渲染 render树 渲染阻塞

浏览器渲染过程(从解析DOM树到展示在屏幕这个过程)：主要是解码/令牌化/建树/收集样式表/布局渲染树/绘制列表/栅格化/绘制图块/...这些过程

渲染过程可分为以下五个步骤：

1根据HTML解析出DOM树

2根据CSS解析生成CSS规则树

3结合DOM树和CSS规则树，生成渲染树

4根据渲染树计算每一个节点的信息

5根据计算好的信息绘制页面

---

1.根据HTML解析DOM树

因为浏览器无法直接理解和使用HTML，所以需将HTML转换为浏览器能够理解的结构：DOM树。

DOM树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点，再构建下一个兄弟节点。

在读取HTML文档，构建DOM树的过程中，若遇到script标签，则DOM树的构建会暂停，直至脚本执行完毕。

2.根据CSS解析生成CSS规则树

这个过程是将CSS文本转换为浏览器能够理解的结构：CSS规则树（styleSheets）。

解析CSS规则树时js执行将暂停，直至CSS规则树就绪。

浏览器在CSS规则树生成之前不会进行渲染。

3.结合DOM树和CSS规则树，生成渲染树

DOM树和CSS规则树全部准备好了以后，浏览器才会开始构建渲染树。

精简CSS并可以加快CSS规则树的构建，从而加快页面相应速度。

4.根据渲染树计算每一个节点的信息（布局）

布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸。

回流：在布局完成后，发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。

5.根据计算好的信息绘制页面

绘制阶段，系统会遍历呈现树，并调用呈现器的「paint」方法，将呈现器的内容显示在屏幕上。

重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘。

回流：某个元素的尺寸发生了变化，则需重新计算渲染树，重新渲染。

---

加载JS和CSS会阻塞浏览器的渲染吗?

a. 都会阻塞

b. JS有可能操作DOM树中的节点，如果不阻塞渲染的话，有可能之后还需要再次解析造成资源浪费

c. DOM树的解析和CSS的解析是并行的，CSS的解析不会阻塞DOM树的解析；但是会阻塞渲染树的解析

浏览器渲染期间可调用的回调函数，以及调用时机

了解cpu渲染和Gpu渲染吗

dom树 cssom树 render树有什么变化

---

DOM树与渲染树有什么区别？DOM树中有的元素在渲染树中是否也有？

The render tree relation to the DOM tree

The renderers correspond to DOM elements, but the relation is not one to one. Non-visual DOM elements will not be inserted in the render tree. An example is the "head" element. Also elements whose display value was assigned to "none" will not appear in the tree (whereas elements with "hidden" visibility will appear in the tree).

There are DOM elements which correspond to several visual objects. These are usually elements with complex structure that cannot be described by a single rectangle. For example, the "select" element has three renderers: one for the display area, one for the drop down list box and one for the button. Also when text is broken into multiple lines because the width is not sufficient for one line, the new lines will be added as extra renderers.

Another example of multiple renderers is broken HTML. According to the CSS spec an inline element must contain either only block elements or only inline elements. In the case of mixed content, anonymous block renderers will be created to wrap the inline elements.

Some render objects correspond to a DOM node but not in the same place in the tree. Floats and absolutely positioned elements are out of flow, placed in a different part of the tree, and mapped to the real frame. A placeholder frame is where they should have been.