浏览器渲染顺序原理，reflow，repaint，transform

浏览器渲染过程有八个阶段：解析html，样式计算，布局，分层，绘制，分块，光栅化，画。循序渐进，每个环节都会成为下一个环节的准备。

如下

解析html

浏览器在解析html文件时，为提高解析效率，会提前进行一个预解析，它会快速浏览html文件，然后把需要下载的外部css文件和js文件提前开始下载。

主线程解析到link标签时，如果外部css文件还没下好，主线程不会等待，它会继续解析后面的代码。因为下载和解析css的工作是在预解析线程中进行的，这就是为什么css不会阻塞html解析。

主线程解析到script标签时，如果外部js文件没下载好，他会停下来等待，并将script里的代码执行完后才会解析后面的代码。因为script里面的js代码可能会修改已生成的dom树，所以必须要暂停等待。这就是为什么js会阻塞html解析。

全部完成后，会得到一个dom树和cssdom树。

样式计算

每一个dom元素的css属性值都需要有一个确定的值，当然我们不可能去给它的全部属性都赋值，所以当我们不赋值的时候就会使用默认值或者继承父元素的属性值。

layout；（布局）

首先会遍历每个dom的节点，然后根据每个节点的属性去计算得到每个节点的宽高，位置等信息。最后得到一个布局树。

其中对于添加了属性display：none；的属性则在布局树上不会有次节点，也就是说dom树和布局树不是一一对应的。

layer（分层）                        

一个页面并不仅仅只是一个二维的图片，通过F12开发者工具中的3d视图看到，一个页面是由很多个图层渲染出来，像这个示例

而layer这一步，主要是去分析元素的堆叠关系，能影响这一步主要属性有z-index，opacity，transform等。

此外，分层还能在一定程度上提高效率。因为当一个层发生改变时，浏览器会仅对该层做处理。像是滚动条。

paint（绘制）

主线程会为每个层单独绘制指令集，用于描述每个层的内容该如何画出来。

然后将指令集交给合成线程去完成。

tiling（分块）

合成线程首先会对每个图层进行分块，将其划分为更小的区域。他会从线程池中拿去多个线程共同进行分块工作。

raster（光栅化）

合成线程将分好的块交给GPU进程，然后以极高的速度去光栅化。也就是会将每个块的每个像素点去渲染上颜色。会优先处理离视图最近的块。最后得到一块一块的位图。

draw（画）

合成线程根据得到的每一个位图，生成一个个指引（quad）信息，去吧位图画在页面上。

在这一步，还会考虑到旋转、缩放等变形，如transform属性。改动了transform属性后相当于改变了style样式，但可以直接跳过后面的部分流程直接到达draw这一步，这就是为什么transform效率高的原因。

reflow（重排）

reflow的本质就是通过让某一元素样式style发生改变（如改变宽高、边距等），然后重新style计算layout树。当layout树发生改变时，浏览器又会重新执行渲染主进程，将渲染过程重走一次。

为了避免多次修改属性，然后频繁重新渲染，浏览器会合并这些操作，当js代码全部完成后再去执行属性修改，也就是说修改属性造成的reflow是异步的。

但是同样就不能同步拿到修改后的属性值，所以在获取属性值时，会将上文的reflow立即执行，变成了同步代码。

repaint（重绘）

repaint本质就是重新计算绘制指令。

当元素的可见样式发生改变时，如颜色，visibility变化时会发生重绘。

根据style和paint的先后顺序，reflow一定会引起repaint。

transform

为什么transform效率高呢，它不会引起样式style变化，它不会引起重排和重绘。

transform会引起GPU会开启一个新的复合图层，它不会去影响原来的默认图层（标准流），所以不会影响到其他元素。

它就可以直接跳过draw之前的步骤，直接去draw。

能开启一个新的图层的还有animation属性，过渡动画属性。

因为draw在合成线程中不在主线程中，所以主线程堵塞不会导致transform堵塞。