浏览器组成
主要包括用户界面、浏览器引擎、渲染引擎、网络、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
网友评论