浏览器的渲染过程

一、基本概念

1.DOM Tree（DOM树）：

浏览器将HTML解析成树形的数据结构。

2.CSS Rule Tree（CSS规则树或CSS对象模型

浏览器将CSS解析成树形的数据结构。

3.Render Tree（渲染树）

DOM树和CSS规则树合并后生产Render树。

4.Layout（布局）

有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。

5.Painting（绘制）

按照算出来的规则，通过显卡，把内容画到屏幕上。

6.Reflow（回流）

当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。

7.Repaint（重绘）

改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
注意：display:none的节点不会被加入Render Tree，而visibility: hidden则会，所以display:none会触发reflow，visibility: hidden会触发repaint。

二、浏览器渲染过程

浏览器内核（渲染进程）拿到响应报文之后，渲染大概分为以下步骤:
1.解析HTML生成DOM树，同时浏览器主进程负责下载CSS文件
2.CSS文件下载完成，解析CSS生成CSS对象模型。
3.根据DOM树和CSS对象模型合并构建渲染树。
4.根据渲染树进行布局，负责各个元素节点的尺寸、位置计算。
绘制渲染树(Painting)，绘制页面像素信息。
5.浏览器主进程将默认图层和复合图层交给GPU进程，GPU进程再将各个图层合成（composite），最后显示出页面

三、普通图层和复合图层

1.基本概念

普通图层（渲染图层）：是页面普通的文档流。无论添加多少元素，还在在同一个默认复合层。
虽然绝对定位（absolute），相对定位（fixed），浮动定位（float）会让元素成为脱离文档流，但它仍然属于默认复合层，共用同一个绘图上下文对象（GraphicsContext）。

复合图层，又称图形层。它会单独分配系统资源，每个复合图层都有一个独立的GraphicsContext。（当然也会脱离普通文档流，这样一来，不管这个复合图层中怎么变化，也不会影响默认复合层里的回流Reflow重绘Repaint）

2. 如何变成复合图层

1）translate3d、translateZ（3D或透视变换）
2）等元素
3）元素有一个 z-index 较低且包含一个复合层的兄弟元素（换句话说就是该元素在复合层上面渲染）
4）元素有一个包含复合层的后代节点（换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里）

3.复合图层的优缺点

（1）优点

合成层的位图，会交由 GPU 合成，比 CPU 处理要快（毕竟该硬件专为处理图像运算的工作负载而设计）
当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
对于 transform 和 opacity 效果，不会触发 layout 、layer和 paint,直接进入合成线程处理
CPU 和 GPU 之间的并行性，可以同时运行以创建高效的图形管道。

（2）缺点

1.提升到合成层后合成层的位图会交GPU处理，但请注意，仅仅只是合成的处理需要用到GPU，生成合成层的位图处理是需要CPU。
2.当需要 repaint 的时候可以只 repaint 本身，不影响其他层，但是 paint 之前还有 style， layout 渲染过程，那就意味着即使合成层只是 repaint 了自身，但 style 和 layout 本身就很占用时间。
3.通过transform和opacity创建的复合图层不会引发 layout 和paint，其他的属性暂未确定，因为这两个没有发生形变和rgb变化。