浏览器的渲染机制

1.页面加载过程

在介绍浏览器渲染过程之前，想简明扼要的介绍下页面的加载过程，有助于更好的理解后续渲染过程，要点如下：

• 浏览器根据DNS服务器得到域名的IP地址
• 向这个IP的机器发送HTTP请求
• 服务器收到、处理并返回HTTP请求
• 浏览器得到返回内容

2.浏览器渲染过程

2.1.构建渲染树

当我们生成DOM树和CSSOM树以后，就需要将这两棵树组合为渲染树。

在这一过程中，不是简单的将两者合并就行了。渲染树只会包括需要显示的节点和这些节点的样式信息，如果某个节点是display:none的，那么就不会在渲染树中显示。

2.2.浏览器如果渲染过程中遇到JS文件怎么处理

渲染过程中，如果遇到<script>就停止渲染，执行JS代码。因为浏览器渲染和JS执行共用一个线程，而且这里必须是单线程操作，多线程会产生渲染DOM冲突。JavaScript的加载、解析与执行会阻塞DOM的构建，也就是说，在构建DOM时，HTML解析器若遇到了JavaScript，那么它会暂停构建DOM，将控制权移交给JavaScript引擎，等JavaScript引擎运行完毕，浏览器再从中断的地方恢复DOM构建。

也就是说，如果想首屏渲染得越快，就越不应该在首屏就加载JS文件，这也是都建议将script标签放在body标签底部的原因。当然在当下，并不是说script标签必须放在底部，因为你可以给script标签添加defer或者async属性.

2.3.JS文件不只是阻塞DOM的构建，它会导致CSSOM也阻塞DOM的构建

原本DOM和CSSOM的构建是互不影响的，井水不犯河水，但是一旦引入JavaScript，CSSOM也开始阻塞DOM的构建，只有CSSOM构建完毕后，DON再恢复DOM构建。这是为什么呢？原因如下：

因为JavaScript不只是可以改DOM，它还可以改样式，也就是它可以更改CSSOM。因为不完整的CSSOM是无法使用的，如果JavaScript想访问CSSOM并更改它，那么在执行JavaScript时，必须要能拿到完整的CSSOM。所以就导致了一个现象，如果浏览器尚未完成CSSOM的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟脚本执行和DOM构建，直至其完成CSSOM的下载和构建。也就是说，在这种情况下，浏览器会先下载和构建CSSOM，然后再执行JavaScript，最后再继续构建DOM。

3.布局与绘制

当浏览器生成渲染树以后，就会根据渲染树来进行布局(也可以叫做回流)。这一阶段浏览器要做的事情是要弄清楚各个节点在页面中的确切位置和大小。通常这一行为也被成为"自动重排"。

布局流程的输出是一个"盒模型"，它会精确地捕获每个元素在视口内的确切位置和尺寸，所有相对测量值都将转换为屏幕上的绝对像素。

布局完成后，浏览器会立即发出"Paint Setup"和"Paint"事件，将渲染树转换成屏幕上的像素。