浏览器渲染原理

浏览器组成

主要包括用户界面、浏览器引擎、渲染引擎、网络、Js解释器、UI后端、数据存储。

image.png

渲染流程

image.png

解析HTML，并构建DOM树
构建Render树
布局Render树
绘制Render树

image.png

解析HTML，并构建DOM树

其中，渲染进程解析HTML时，将HTML标签转化为DOM节点，同时也会解析CSS文件及style标签中的样式，需要注意的是，外部CSS的引入是由单独的下载线程异步下载的，也就是说：

CSS的加载不会阻塞DOM树的构建（可能会影响脚本执行）
但会阻塞Render树渲染，因为布局绘制Render树需要CSS信息，从而导致白屏

Js同理，当HTML解析到<script>标签时，会立即调用Js引擎线程执行脚本（同步过程），由于Js引擎线程与GUI引擎线程是互斥的，因此，当Js耗时过长，也会阻塞页面加载。当然，也可以给<script>增加defer属性，防止脚本加载会对页面结构造成影响，因为脚本会立即下载，但是被延迟到页面解析完毕之后再执行。也有async属性，会在后台下载，不会阻塞解析线程。
预解析，Webkit和FireFox都做过此优化；当执行脚本时，外挂另一个线程解析剩下的文档，加载后面需要网络加载的资源，如外部脚本、CSS、img等，不改变DOM树，等待主线程执行。

构建Render树

Render树（渲染树）由元素显示序列中，可见元素组成，它是文档的可视化表示，构建这棵树是为以正确的顺序绘制文档内容.

Webkit用渲染对象来描述这些元素，Firefox则用frames，其中，RenderObject是Webkit的渲染对象基类，它的定义如下：

class RenderObject{
     virtual void layout();
     virtual void paint(PaintInfo);
     virtual void rect repaintRect();
     Node* node;  //the DOM node
     RenderStyle* style;  // the computed style
     RenderLayer* containLayer; //the containing z-index layer
}

布局Render树

当Render对象被添加到树中时，他们并没有位置和大小，计算这些值的过程叫Layout或reflow（回流）
HTML使用基于流的布局模型，可以使用单一的途径进行几何计算。

绘制Render树

一个渲染对象的堆栈顺序是：(从后向前)

背景色
背景图
border
children
outline

普通图层和复合图层

GPU中，各个复合图层的绘制是不相干的，会独立分配资源。
其中，普通文档流为一个复合图层（这里称为默认复合层，里面不管添加多少元素，其实都是在同一个复合图层中）尽管是absolute、fixed布局，虽然可以脱离普通文档流，但它仍然属于默认复合层。
可以通过所谓硬件加速的技术，新建一个复合图层

最常用的方式：translate3d、translateZ
opacity属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）
will-change属性（这个比较偏僻），一般配合opacity与translate使用（而且经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层）
好处：可以独立于普通文档流中，改动后可以避免整个页面重绘，提升性能。但是最好不要大量使用，耗费资源。

Reference

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
 https://blog.csdn.net/zzzaquarius/article/details/6532299

浏览器渲染原理