深入剖析浏览器渲染流程

一、深入剖析浏览器渲染

浏览器的基本组成如上图。
上篇文章我们讲解了计算机五层体系结构.
那么当我们在浏览器的地址栏输入字符后，浏览器判断字符是关键词就进行搜索，是网址就加载网页。最终都会返回一个页面给我们，那么页面是怎么渲染的呢？

1、DOM树

服务器根据浏览器请求，返回一个html页面给我们，浏览器的主线程会从上到下词法分析，标记识别，解析出dom节点，并对应生成一棵dom树；但是一旦碰倒了script标签，会立即阻塞解析dom节点构造dom树，因为script中可能会有操作改变html的结构，要解析完当前的script才会接着解析后续节点。 （所以我们在学习js时就说script需要放在合适的位置。）

2、Render tree

加载dom时碰到css也会加载，节点和对应的样式信息会生成render tree。

3、Layout布局

浏览器主线程把dom节点和样式信息（位置、颜色、大小等）进行计算，得出节点的渲染信息，最后生成Layout布局，该布局中会记录伪元素以及对于display：node加点不显示。

接着针对节点的层级信息（z-indexdeng），计算并记录在绘制记录表，以保证元素节点的层级正确性

4、Layer Tree

浏览器主线程将Layout布局和绘制记录表最终计算成layer Tree，代表最终的元素节点的渲染信息。
layer tree包含大量的渲染元素，每个渲染元素被分配到相应的图层中，将这些信息交付给合成器线程，合成器线程将大的图块进行栅格化成小格子，然后将这些信息变成显示帧给GPU进行页面渲染。

5、重构和重绘

而我们平时操作dom等插入节点或者改变元素样式，都会使主线程中的过程重新计算，也就是我们所说的重构（reflow）和重绘（repaint）操作。区别是，重构由于改变了元素的大小等位置信息等，导致从DOM节点数开始都要重新计算，对浏览器渲染性能影响较大；而重绘只是改变元素的颜色等，所以不用计算布局等，对浏览器的渲染性能影响较小。

6、性能优化

在上述一系列的渲染过程中，浏览器都能在16ms（60HZ刷新率）计算完成并进行渲染，而16ms内的空闲时间会执行js脚本（如需要一些动画而使用js频繁操作dom等）。

一旦我们的JS脚本执行时间过长，导致占用了主线程的渲染频率，就会使页面的刷新率低于60HZ，从而影响浏览器渲染性能和用户体验。

优化方案： 尽量使用使用CSS3动画属性操作dom，前面我们提到使用js等操作dom，一个是导致渲染时重构和重绘，而且js执行也会占用浏览器主线程。但是CSS3的动画属性transform所在的图层会进入独立的合成器线程处理，而合成器线程是不占用主线程的，从而极大的优化页面的渲染性能。

requestAnimationFrame： 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。且在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！