【浏览器渲染原理】 渲染树和页面渲染

【浏览器渲染原理】 渲染树和页面渲染

• 我们主要讨论以下列出的几个问题：
• 什么是渲染树？和DOM树及CSSOM树有什么关系？
• 渲染树是如何形成的？
• 浏览器渲染顺序问题

1.什么是渲染树？和DOM树及CSSOM树有什么关系？

首先我们得先了解一下渲染的基本步骤
当用户请求的资源通过浏览器网络层到达渲染引擎后。渲染工作就会开始。
第一步：浏览器解析HTML文档和解析CSS样式表形成DOM树和CSSOM树
第二步 : 结合DOM树和CSSDOM树形成 render树。 也就是我们所说的渲染树。渲染树
第三步： 浏览器在render树内对每个render节点进行布局处理，计算出每一个元素的大小和位置。确定其在屏幕上的位置
第四步：绘制。通过遍历render树将实际的像素显示到屏幕上

以上的步骤是一个渐进的步骤，但是为了提高用户体验，浏览器并不会等待所有html文档加载完成之后才建立渲染树并渲染。 他会在从网络层获取html文档的同时把已经接收到的局部内容先渲染出来

---

2.渲染树是如何形成的？
基于DOM树的一些可视化的节点，WebKit根据需要来创建相应的RenderObject节点，这些节点也构成了一颗树，称为render树。

Render树是基于Dom树建立起来的新的一棵树，Render节点和Dom节点并不是一一对应。所以什么情况下需要建立新的render节点呢？
-