（学习笔记）浏览器工作原理与实践之如何系统地优化页面？

页面的生存周期经历哪些阶段？

• 加载阶段： 是指从发出请求到渲染出完整页面的过程，影响这个阶段的主要因素有网络和JavaScript脚本。

• 交互阶段： 主要从页面加载完成到用户交互的整合过程，影响这个阶段的主要因素是JavaScript脚本。

• 关闭阶段： 主要是用户发出关闭指令后页面所做的一些清理操作。

加载阶段

哪些资源会阻塞页面的首次绘制？

JavaScript、首次请求的HTML资源文件、CSS文件是会阻塞首次渲染的。因为在构建DOM的过程中需要HTML和JavaScript文件，在构造渲染树的过程中需要用到CSS文件。

关键资源的概念？

能阻塞网页首次渲染的资源成为关键资源

影响页面首次渲染的核心因素有哪些？

• 关键资源的个数：如HTML文件的个数，CSS文件的个数，JavaScript文件的个数
• 关键资源大小
• 请求关键资源需要多少个RTT

RTT是什么？

由于TCP的特性，当数据需要拆分成一个个数据包来回多次传输到服务端时，**RTT就是这里的往返时延。它是网络中的一个重要的性能指标，表示从发送端发送数据开始，到发送端收到来自接收端的确认，总共经历的时延。**通常一个HTTP的数据包在14KB左右，即一个RTT的大小在！14KB左右。

RTT是如何计算的？

首先是请求 HTML 资源，大小是 6KB，小于 14KB，所以 1 个 RTT 就可以解决了。至于 JavaScript 和 CSS 文件，这里需要注意一点，由于渲染引擎有一个预解析的线程，在接收到 HTML 数据之后，预解析线程会快速扫描 HTML 数据中的关键资源，一旦扫描到了，会立马发起请求，你可以认为JavaScript 和 CSS 是同时发起请求的，所以它们的请求是重叠的，那么计算它们的 RTT时，只需要计算体积最大的那个数据就可以了。这里最大的是 CSS 文件（9KB），所以我们就按照 9KB 来计算，同样由于 9KB 小于 14KB，所以 JavaScript 和 CSS 资源也就可以算成 1 个 RTT。也就是说，上图中关键资源请求共花费了 2 个 RTT

核心的优化原则是什么？

• 减少关键资源个数
  • 将JavaScript和CSS改成内联的形式
  • 如果JavaScript代码没有DOM或者CSSOM的操作，则可以改成sync或者defer属性，使其变成非关键资源。
  • 对于CSS，如果不是在构建页面之前加载的，则可以添加媒体取消阻止显示的标志，使其变成非关键资源。
• 减少关键资源的大小
  • 压缩CSS和JavaScript资源
  • 移除HTML、CSS、JavaScript文件中一些注释内容
  • 通过前面所说：取消CSS或者JavaScript中关键资源的方式
• 减少关键资源RTT次数
  • 减少关键资源的个数
  • 减少关键资源的大小
  • 通过使用CDN(其关键技术有内容存储和分发技术)来减少每次RTT时长

交互阶段

在交互阶段，帧的渲染速度决定了交互的流畅度。因此讨论页面优化实际上就是讨论渲染引擎是如何渲染帧的，否则就无法优化帧率。

交互阶段是如何生成一个帧的？

大部分情况下，生成一个新的帧都是由JavaScript通过修改DOM或者CSSOM来触发的，还有一部分帧是由CSS来触发的。

核心的优化原则是什么？

尽量减少一帧的生成时间。可以通过减少单次JavaScript的执行时间、避免强制同步布局、避免布局抖动、尽量采用CSS的合成动画、避免频繁的垃圾回收等方式来减少一帧生成的时长。

交互阶段渲染流水线中有哪些因素影响了帧的生成速度以及如何优化？

• 减少JavaScript脚本执行时间 ——不要一次霸占太久主线程

  • 将一次执行的函数分解成多个任务，使得每次的执行时间不要过久
  • 采用Web Workers（由于Web Workers中没有DOM、CSSOM环境，因此可以将一些和DOM操作无关且耗时的任务放到Web Workers中执行）——主线程之外的一个线程

• 避免强制同步布局（指JavaScript强制将计算样式和布局操作提前到当前的任务中）

• 避免布局抖动（指在一次JavaScript执行过程中，多次执行强制布局和抖动操作）