如何系统优化页面

前言

页面优化就是让页面响应速度更快，由于一个页面在它不同的阶段，所侧重的关注点是不一样的，所以如果我们要讨论页面优化，就要分析一个页面生存周期的不同阶段：加载、交互和关闭。重点分析加载和交互阶段。

加载阶段

这个阶段是指从请求到渲染出完整页面的过程。

影响因素如下：

1. 关键资源个数。
2. 关键资源大小。
3. 请求关键资源需要多少个 RTT。

关键资源是指 HTML、JavaScript 和 CSS。

RTT 就是这里的往返时延。它是网络中一个重要的性能指标，表示从发送端发送数据开始，到发送端收到来自接收端的确认，总共经历的时延。通常 1 个 HTTP 的数据包在 14KB 左右，所以 1 个 0.1M 的页面就需要拆分成 8 个包来传输了，也就是说需要 8 个 RTT。

对应优化如下：

• 如何减少关键资源个数？

1、JavaScript 和 CSS 改成内联的形式。

2、如果 JavaScript 代码没有 DOM 或者 CSSOM 的操作，则可以改成 async 或者 defer 属性。

3、对于 CSS，如果不是在构建页面之前加载的，则可以添加媒体取消阻止显现的标志 disabled。

• 如何降低关键资源大小？

1、压缩 CSS 和 JavaScript 资源。

2、移除 HTML、CSS 和 JavaScript 无用注释。

• 如何减少关键资源的 RTT 数？

1、CDN。

2、结合前面两种方案。

交互阶段

通常是由 JavaScript 触发交互动画，那就会造成重排或者重绘，还有另外一种情况，通过 CSS 实现一些变形、渐变、动画等特效，这是由 CSS 触发的，并且是在合成线程上执行的，这个过程称为合成。

性能代价排序是：重排 > 重绘 > 合成

优化方案如下：

• 减少 JavaScript 脚本执行时间。

1. 将一次执行的函数分解为多个任务，使得每次的执行时间不要过久。
2. 采用 Web Workers。注意：Web Workers 中是无法通过 JavaScript 来访问 DOM 的，所以我们可以把一些和 DOM 操作无关且耗时的任务放到 Web Workers 中去执行。

总之，在交互阶段，对 JavaScript 脚本总的原则就是不要一次霸占太久主线程。

• 避免强制同步布局。

所谓强制同步布局，是指 JavaScript 强制将计算样式和布局操作提前到当前的任务中。

• 避免布局抖动。

所谓布局抖动，是指在一次 JavaScript 执行过程中，多次执行强制布局和抖动操作。

• 合理利用 CSS 合成动画。
• 避免频繁的垃圾回收。

结语

本文到这里就结束了。这是学习《浏览器工作原理与实践》李兵老师课程的笔记。希望可以帮到你。