《浏览器渲染原理及流程》学习笔记

浏览器完整地呈现一张页面在咱们眼帘以前，都作了啥工做？或者说，其步骤为什么？

答案是构建各类树。所谓的树，那就是有兄弟、子孙等节点了。一棵树构造出来，各类元素的前后顺序就都有了。

有哪些树呢？这些树：

DOM Tree：浏览器将HTML解析成树形的数据结构。

CSS Rule Tree：浏览器将CSS解析成树形的数据结构。

Render Tree: DOM和CSSOM合并后生成Render Tree。

layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每一个节点在屏幕中的位置。

painting: 按照算出来的规则，经过显卡，把内容画到屏幕上。

期间会有一些二月逆流：reflow（回流）和 repaint（重绘）。

注意：上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽量早的将内容呈现到屏幕上，并不会等到全部的html都解析完成以后再去构建和布局render树。它是解析完一部份内容就显示一部份内容，同时，可能还在经过网络下载其他内容。

有学习必有输出，《浏览器渲染原理及流程》是高手的学习笔记，而后我如今拜读了他的学习笔记后又写了这篇学习笔记。

参考资料：
浏览器渲染原理及流程