《浏览器原理》学习笔记Day60

页面性能：如何系统地优化页面？

通常一个页面有三个阶段：加载阶段、交互阶段和关闭阶段。
接下来，重点关注加载阶段和交互阶段

加载阶段

核心因素：
第一个是关键资源个数。
第二个是关键资源大小。
第三个是请求关键资源需要多少个 RTT（Round Trip Time）。
总的优化原则就是减少关键资源个数，降低关键资源大小，降低关键资源的 RTT 次数。

• 减少关键资源个数
  JavaScript 和 CSS，若都改成内联模式；如果 JavaScript 代码没有 DOM 或者 CSSOM 的操作，则可以改成 async 或者 defer 属性；同样对于CSS;
• 降低关键资源大小
  可以压缩 CSS 和 JavaScript 资源，移除 HTML、CSS、JavaScript 文件中一些注释内容等
• 降低关键资源的 RTT 次数
  可以通过减少关键资源的个数和减少关键资源的大小搭配来实现。除此之外，还可以使用 CDN 来减少每次 RTT 时长。

交互阶段

_{交互渲染流水线}

1. 减少 JavaScript 脚本执行时间
   a. 一种是将一次执行的函数分解为多个任务，使得每次的执行时间不要过久。
   b. 另一种是采用 Web Workers。
2. 避免强制同步布局
3. 避免布局抖动
   a. 所谓布局抖动，是指在一次 JavaScript 执行过程中，多次执行强制布局和抖动操作。如下代码所示：

function foo() {
    let time_li = document.getElementById("time_li")
    for (let i = 0; i < 100; i++) {
        let main_div = document.getElementById("mian_div")
        let new_node = document.createElement("li")
        let textnode = document.createTextNode("time.geekbang")
        new_node.appendChild(textnode);
        new_node.offsetHeight = time_li.offsetHeight;
        document.getElementById("mian_div").appendChild(new_node);
    }
}

我们在一个 for 循环语句里面不断读取属性值，每次读取属性值之前都要进行计算样式和布局。执行代码之后，使用 Performance 记录的状态如下所示：

从上图可以看出，在 foo 函数内部重复执行计算样式和布局，这会大大影响当前函数的执行效率。这种情况的避免方式和强制同步布局一样，都是尽量不要在修改 DOM 结构时再去查询一些相关值。

4. 合理利用 CSS 合成动画
5. 避免频繁的垃圾回收

此文章为4月Day21学习笔记，内容来源于极客时间《浏览器原理》，学习使我快乐，每天进步一点点💪💪