• 前端性能优化-09-对症下药——DOM 优化原理与基本实践
  DOM 优化原理与基本实践 从本节开始，我们要关心的两大核心问题就是：“DOM 为什么这么慢”以及“如何使 DOM 变快”。 后者是一个比“生存还是毁灭”更加经典的问题。不仅我们为它“肝肠寸断”，许多优秀前端框架的作者大大们也曾为其绞尽脑汁。 这一点可喜可贺——研究的人越多，产出优秀实践的概率就越大。因此在本章的方法论环节，我们不仅会根据 DOM 特性及渲染原理为大家讲解基本的优化思路...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-08-知己知彼——解锁浏览器背后的运行机制
  浏览器背后的运行机制 从本章开始，我们的性能优化探险也正式进入到了“深水区”——浏览器端的性能优化。 平时我们几乎每天都在和浏览器打交道，在一些兼容任务比较繁重的团队里，苦逼的前端攻城师们甚至为了兼容各个浏览器而不断地去测试和调试，还要在脑子中记下各种遇到的 BUG 及解决方案。 即便如此，我们好像并没有去主动地关注和了解下浏览器的工作原理。 我想如果我们对此做一点了解，在项目过程中...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-07-服务端渲染的探索与实践
  服务端渲染的探索与实践 服务端渲染（SSR）近两年炒得很火热，相信各位同学对这个名词多少有所耳闻。 本节我们将围绕“是什么”（服务端渲染的运行机制）、“为什么”（服务端渲染解决了什么性能问题 ）、“怎么做”（服务端渲染的应用实例与使用场景）这三个点，对服务端渲染进行探索。 服务端渲染是一个相对的概念，它的对立面是“客户端渲染”。在运行机制解析这部分，我们会借力客户端渲染的概念，来帮大家...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-06-CDN 的缓存与回源机制解析
  写在小册的半山腰 不知不觉，小册内容已经过了小半了。 回顾一下走过的路：在对知识体系进行一番梳理后，我们操起 webpack 开始优化文件（顺便还学了点 Gzip），随后又马不停蹄进入图片的小天地，最后把缓存和本地存储的味道逐一品尝，终于得以窥见网络层面核心优化技术的全貌。 古人云：学而不思则罔。 站在性能优化的半山腰，我希望大家可以缓一缓，停下来思考一个问题：我得到了什么？ 作为...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-05-本地存储——从 Cookie 到 Web Storage、IndexDB
  本地存储 随着移动网络的发展与演化，我们手机上现在除了有原生 App，还能跑“WebApp”——它即开即用，用完即走。 一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。 我认为，WebApp 就是我们前端性能优化的产物，是我们前端工程师对体验不懈追求的结果，是 Web 网页在性能上向 Native 应用的一次“宣战”。 WebApp 优异的性能表现，要归功于浏...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-04-浏览器缓存机制介绍与缓存策略剖析
  缓存 缓存可以减少网络 IO 消耗，提高访问速度。浏览器缓存是一种操作简单、效果显著的前端性能优化手段。对于这个操作的必要性，Chrome 官方给出的解释似乎更有说服力一些： 通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信，这会延迟浏览器获得和处理内容的时间，还会增加访问者的流量费用。因此，缓存并重复利用之前获取的资源的能力成为性能优化的一个关键...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-03-图片优化 质量与性能的博弈
  图片优化 《高性能网站建设指南》的作者 Steve Souders 曾在 2013 年的一篇 博客 中提到： 我的大部分性能优化工作都集中在 JavaScript 和 CSS 上，从早期的 Move Scripts to the Bottom 和 Put Stylesheets at the Top 规则。为了强调这些规则的重要性，我甚至说过，“JS 和 CSS 是页面上最重要的部分”。...
  2021-10-12 13:01:55 | FrontEnd
• 前端性能优化-02-webpack 与 gzip
  网络层面的性能优化 从本节开始，我们进入网络层面的性能优化世界。 大家可以从第一节的示意图中看出，我们从输入 URL 到显示页面这个过程中，涉及到网络层面的，有三个主要过程： DNS 解析 TCP 连接 HTTP 请求/响应 对于 DNS 解析和 TCP 连接两个步骤，我们前端可以做的努力非常有限。 相比之下，HTTP...
  2021-10-12 13:01:55 | FrontEnd