浏览器工作原理学习（十七）

1. 显示器是如何显示图像的

• 每个显示器都有固定的刷新频率，通常是60HZ，也就是每秒更新60张图片，更新的图片都来自于显卡中一个叫前缓冲区的地方，显示器就是每秒固定读取60次前缓冲区中的图像，并将读取的图像显示到显示器上。
• 显卡的职责就是合成新的图像，并将图像保存到后缓冲区中，一旦显卡把合成的图像写到后缓冲区，系统就会让后缓冲区和前缓冲区互换，这样就能保证显示器都能读取到最新显卡合成的图像。
• 一般情况下显卡的更新频率和显示器的刷新频率是一致的，但有时候复杂的场景中，显卡处理成一张图片的速度会变慢，这样就会造成视觉上的卡顿。
• 帧：渲染流水线生成的每一副图片被称为一帧
• 帧率：渲染流水线每秒更新了多少帧称为帧率，如一秒钟更新了60帧，那么帧率就是60HZ（60FPS）
• 解决卡顿问题，实质是解决每帧生成时间过久的问题，为此浏览器引入了分层和合成机制，分层和合成机制代表了当今最先进的渲染技术。

2. 如何生成一帧图像

• 关于任意一帧的生成方式，有重排、重绘和合成三种方式。这三种方式的渲染路径是不同的，通常渲染路径越长，生成图像花费的时间就越多，比如重排。
• 重排需要根据CSSOM和DOM来计算布局树，这样生成一副图片时，会让整个渲染流水线的每个阶段都执行一遍。
• 重绘因为没有重新布局的阶段，操作效率稍高
• 合成：不需要触发布局和绘制2个阶段，如果采用GPU那么合成效率会非常高。

3. 分层和合成机制

• 浏览器分层和合成机制：分层、分块和合成。将素材分解为多个图层的操作就称为分层，最后将这些图层合并到一起的操作就称为合成，所以分层和合成通常时一起使用的。
• 分层体现再生成布局树之后，渲染引擎会根据布局树的特点将其转化为层树，层树时渲染流水线后续流程的基础结构。
• 层树中的每个节点都对应着一个图层，下一步的绘制就依赖于层树中的节点，绘制过程不是真正绘制图片，而是将绘制指令组合成一个列表。
• 有了绘制列表之后，就需要进入光栅化阶段，光栅化就是按照绘制列表中的指令生成图片，每一个图层都对应一张图片，合成线程有了这些图片之后，会将这些图片合成为1张图片，并最终将生成的图片发送到后缓冲区。
• 合成操作时再合成线程上完成的，这也意味着再执行合成操作时，是不会影响到主线程执行。
• 合成线程会将每个图层分割为大小固定的图块，然后优先绘制靠近视口的图块。
• 只绘制优先级高的图块，也要耗费不少的时间，因为涉及到一个很关键的因素——纹理上次，为此浏览器在首次合成图块的时候使用一个低分辨率的图片。在首次显示页面内容的时候，将这个低分辨率的图片显示出来，然后合成器会继续绘制正常比例的网页内容，当正常比例的页面内容绘制完成后，在替换掉当前显示的低分辨率内容——思考图片懒加载技术是不是切合这个原理？

4. 如何利用分层技术优化代码

• web应用编写时，针对某个元素做几何形状变换、透明度变换或者一些缩放操作，如果使用JS来写会引起重绘，使用will-change来告诉渲染引擎对该元素做一些特效变换，CSS代码生效渲染引起会将该元素单独实现一帧，等这些变换发生时，渲染引擎会通过告诉合成线程直接区处理变换，这些变换没有涉及到住线程，就大大提高了渲染效率。这也是CSS动画比JS动画高效的原因。
• 通过will-change CSS属性告诉渲染引擎为该元素准备独立层，避开主线程，通过合成线程处理一方面是提高了渲染效率。但是它占用的内存也大大增加。所以也需要慎用will-change。

5. 如何系统的优化页面？

• 所谓的页面优化，本质是让页面更快地显示和响应。从一个页面生成周期地不用阶段切入，加载阶段：是指发出请求到渲染页面地过程，影响该阶段地主要因素有网络和JS脚本；交互阶段：主要是从页面加载完成到用户交互地整合过程，影响该阶段地主要因素是JS脚本；关闭阶段，主要是用户发出关闭指令后页面所做地一些清理操作。
• js资源、首次请求地HTML资源文件、CSS文件会阻塞首次渲染，因为构建DOM的过程中需要HTML和JS文件，构建渲染树的时候需要用到CSS文件。这些阻塞网页首次渲染的资源称为关键资源。关键资源的个数、大小和请求关键资源需要多少个RTT有关。
• RTT：TCP文件传输过程中的往返时延，它是网络中一个重要的性能指标，表示从发生端发送数据开始到发送端接收到来自接收端的确认，总共经历的时延。一个HTTP的数据包在14KB左右，所以1个0.1M的页面需要拆分成8个包来传输，也就是8个RTT。
• 减少关键资源的个数：将JS和CSS改成内联的形式；如果JS代码没有DOM或者CSSOM操作，则可以使用async或defer；CSS如果不是在构建页面之前加载的，则可以添加媒体取消阻止显示的标志。
• 减小关键资源的大小：压缩CSS和JS资源，移除HTML、CSS、JS文件中的一些注释内容。
• 减少关键资源RTT的次数：使用CDN来减少每次RTT时长。
• 交互阶段：本质是如何提高渲染进程渲染帧的速度，帧的渲染速度决定了交互的流畅度。而形成一个性的帧都是由JS通过修改DOM或者CSSOM来触发的。如果在计算样式阶段发现有布局信息的修改，那么就会触发重排操作，如果跳过计算样式阶段直接进入到绘制阶段会引发重绘。通过CSS实现一些变形、渐变、动画等特效。这是由CSS触发的并且是在合成线程上执行的，这个过程叫做合成。
• 一个大的原则就是让单个帧的生成速度快：减少JS脚本执行时间，即讲一次执行的寒素分解为多个任务这样使得每次的执行时间不要过久。另一种是采用Web Workers（主线程之外的一个线程可执行JS，但是没有DOM和CSSOM环境），将一些和DOM操作无关切耗时的任务放到Web Workers中执行。
• 避免强制同步布局：强制同步布局是指JS强制将计算样式和布局操作提前到当前的任务中。为了避免该情况，在修改DOM之前查询相关值。
• 避免抖动布局：一次JS执行过程中，多次执行强制布局和抖动操作。尽量不要在修改DOM结构时再区查询一些相关值。
• 合理利用CSS合成动画：合成动画时直接再合成线程上执行的，如果主线程被JS或者一些布局任务占用，CSS动画依然能继续执行。如果能提前知道对某个元素执行动画操作，可以标记为will-change，这样渲染引擎可以将该元素单独生成一个图层。
• 避免频繁的垃圾回收：JS使用自动垃圾回收机制，如果再一些函数中频繁创建临时对象那么垃圾回收器也会频繁地去执行垃圾回收策略。垃圾回收操作发生时，是会占用主线程的。