页面性能：如何系统地优化页面？
通常一个页面有三个阶段：加载阶段、交互阶段和关闭阶段。
接下来，重点关注加载阶段和交互阶段
加载阶段
核心因素：
第一个是关键资源个数。
第二个是关键资源大小。
第三个是请求关键资源需要多少个 RTT（Round Trip Time）。
总的优化原则就是减少关键资源个数，降低关键资源大小，降低关键资源的 RTT 次数。
- 减少关键资源个数
JavaScript 和 CSS，若都改成内联模式；如果 JavaScript 代码没有 DOM 或者 CSSOM 的操作，则可以改成 async 或者 defer 属性；同样对于CSS; - 降低关键资源大小
可以压缩 CSS 和 JavaScript 资源，移除 HTML、CSS、JavaScript 文件中一些注释内容等 - 降低关键资源的 RTT 次数
可以通过减少关键资源的个数和减少关键资源的大小搭配来实现。除此之外，还可以使用 CDN 来减少每次 RTT 时长。
交互阶段
交互渲染流水线
- 减少 JavaScript 脚本执行时间
a. 一种是将一次执行的函数分解为多个任务，使得每次的执行时间不要过久。
b. 另一种是采用 Web Workers。 - 避免强制同步布局
- 避免布局抖动
a. 所谓布局抖动，是指在一次 JavaScript 执行过程中，多次执行强制布局和抖动操作。如下代码所示：
function foo() {
let time_li = document.getElementById("time_li")
for (let i = 0; i 我们在一个 for 循环语句里面不断读取属性值，每次读取属性值之前都要进行计算样式和布局。执行代码之后，使用 Performance 记录的状态如下所示：
从上图可以看出，在 foo 函数内部重复执行计算样式和布局，这会大大影响当前函数的执行效率。这种情况的避免方式和强制同步布局一样，都是尽量不要在修改 DOM 结构时再去查询一些相关值。
- 合理利用 CSS 合成动画
- 避免频繁的垃圾回收
此文章为4月Day21学习笔记，内容来源于极客时间《浏览器原理》，学习使我快乐，每天进步一点点💪💪
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
