浏览器渲染机制

浏览器的多线程

GUI线程

负责渲染浏览器界面，解析HTML,CSS,构建DOM树和RenderObject树，布局和绘制等。
与JS线程互斥。

JS线程

例如V8引擎，负责解析JavaScript脚本，运行代码

事件触发线程

如onclick，ajax等，由事件触发，将需要执行的事件放到事件任务队列的队尾，等待JS引擎的处理。

浏览器渲染

主要步骤

①解析HTML生成DOM树
②解析CSS生成CSSOM规则树
③将DOM树与CSSOM规则树合并在一起生成渲染树
④遍历渲染树开始布局，计算每个节点的位置大小信息
⑤将渲染树每个节点绘制到屏幕

构建DOM树

当浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，HTML Parser将HTML标记解析成DOM Tree。

构建CSSOM规则树

CSS Parse将每个CSS文件都被解析成一个StyleSheet对象，每个对象都包含Style Rules，Style Rules也叫CSSOM（CSS Object Model）。

阻塞渲染

当HTML解析器（HTML Parser）遇到script标记阻塞时，解析器虽然会停止构建 DOM，但仍会执行JavaScript脚本的资源直至脚本执行完再开始构建DOM；如果JavaScript脚本还操作了CSS，而正好这个CSSOM还没有下载和构建，这时就存在阻塞的资源，浏览器会延迟JavaScript脚本执行，直至完成其CSSOM的下载和构建再执行。即GUI线程和JS线程执行顺序导致的阻塞问题。

构建渲染树

Render Tree的构建其实就是DOM Tree和CSSOM attach的过程(每个 DOM 节点都有一个“attach”方法)。
样式计算：
样式计算是个很复杂的问题。DOM中的每个节点可以对应样式表中的多个元素，样式表包括了所有样式：浏览器默认样式表，自定义样式表，inline样式元素，HTML可视化属性如：width=100
注：display等于none的不会被显示在渲染树里，但是visibility等于hidden的元素是会显示在渲染树里的

渲染树布局

创建渲染树后，下一步就是布局，也叫回流，这个过程就是通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸，将其安置在浏览器窗口的正确位置，而有些时候我们会在文档布局完成后对DOM进行修改，这时候可能需要重新进行布局，也可称其为回流，本质上还是一个布局的过程，每一个渲染对象都有一个布局或者回流方法，实现其布局或回流。

渲染树绘制

在绘制阶段，系统会遍历渲染树，并调用渲染器的“paint”方法，将渲染器的内容显示在屏幕上。绘制工作是使用用户界面基础组件完成的。

重绘和回流

重绘

屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变

回流

元件的几何尺寸变了，我们需要重新验证并计算Render Tree，是Render Tree的一部分或全部发生了变化。
display:none会触发回流，visibility: hidden只会触发重绘；回流的成本比重绘的成本高得多。DOM Tree里的每个结点都会有回流方法，一个结点的回流很有可能导致子结点，甚至父点以及同级结点的回流。
浏览器一般不会频繁进行回流，而是会积攒一批做一次回流，这又叫异步回流或增量异步回流。但是有些情况浏览器是不会这么做的，比如：调整窗口，改变了页面默认的字体等这些操作，浏览器会马上进行回流。