浏览器渲染原理

有一道经典面试题：从地址栏输入地址后，到页面渲染这期间一共发生了什么？

其实这里可以分为两大块：网络、浏览器渲染

学好浏览器渲染对于性能优化也起着至关重要的作用，今天我们来探索一下，浏览器到底是怎么把我们写好的HTML渲染到页面上的

1. 解析HTML

   浏览器在拿到html后，渲染主进程会从上到下依次解析html生成DOM树。如果遇到link标签则开启另外一个进程下载并解析css，如果遇到script（标签上没有添加其他属性的情况下），则会停止html的解析，转而下载、解析js。最终第一步输出DOM树

2. 解析CSS

   在解析html的同时，遇到了css则会解析css，输出CSSOM树

3. 计算样式

   在浏览器解析完html、css后，会去计算样式，来生成Render树。这棵树表明每个DOM元素的CSS样式。

4. 布局

   拿到Render树后，计算出每个元素的布局。最终输出Layout树（注意： Render树每一个元素、样式和Render树都一一对应，但是Layout树只有可显示在页面的元素）

5. 分层

   这里的分层不是z-index，或者脱离文档流的分层。而是浏览器为了更改元素的时候不需要重新绘制全部元素而做的性能优化。浏览器会自动的将元素进行分层，分层不一定会受到z-index等样式的影响，但是你可以设置will-change属性来告知浏览器你希望将此元素进行单独的分层处理。（浏览器大概率会将此元素分层）

6. 绘制

   渲染主线程的最后一步，会将目前计算好的所有分层依次计算出绘制指令，并传递给合成线程

7. 分块

   合成线程会将每一个分层分为一个一个的小块，渲染时也会优先渲染用户视口内的块。

8. 光栅化

   合成线程 把这一步交给GPU 计算出每一个分块的每一个像素点像素信息。这其中就包含我们经常听到的CSS3 GPU加速

9. Draw

   绘制出我们现在看到的页面～

为什么使用transform会对性能有优化：

因为transform是发生在最后一步画的阶段。不涉及前面这些步骤，更不会产生回流重绘（除非影响到了其他元素的几何信息）。

回流发生在什么阶段：

改变页面几何信息的操作都可能会导致回流。回流会先改变CSSOM树，然后重新布局、分层....

重绘发生在什么阶段：

重绘也会先改变CSSOM树，然后跳过布局、分层。直接计算出绘制指令。