本文深入解析网页渲染的全过程，从HTML解析生成DOM树，到CSS生成CSSOM树，再到渲染树的构建，以及Layout和Painting阶段的关键操作。详细阐述了回流与重绘的触发条件，帮助开发者优化页面性能。
1. 解析html，生成DOM树，解析css，生成CSSOM树
2.将DOM树和CSSDOM树结合，生成渲染树（Render Tree）
3.Layout (回流)：根据生成的渲染树，进行回流（Layout），得到节点的几何信息（位置，大小）
4.Painting(重绘)：根据渲染树的以及回流得到的几何信息，得到节点的绝对像素
5.Display：将像素发送给gpu，展示在页面上，（这一步其实还有很多内容，比如会在gpu将多个合成层合并为一个层，并展示在页面中。而css3硬件加速的原理则是新建合成层）
为了构建渲染树，浏览器主要完成了一下工作：
1.从dom树的根结点开始遍历每个可见节点。
2.对于每个可见的节点，找到cssdom树中对应的规则，并应用他们
3.根据每个可见节点以及对应的样式，组合成渲染树
第一步，先理解节点的可见性，不可见的节点包括：
a.一些不会渲染输出的节点，比如script,meta,link等。
b.一些通过css进行隐藏的节点。比如display: none。注意，利用vislibility和opacity隐藏的节点，还是会显示在渲染树上的。
只有display：none的节点不会显示在渲染树上
注意：渲染树只包含可见节点
回流：得到了渲染树，我们可以将可见DOM节点以及它对应的样式结合起来，可我们还需要计算它们在设备视口（viewport）内确切位置和大小，这个计算的阶段就是回流。
为了弄清楚每个对象在网站上确切的位置和大小，浏览器从渲染树的节点开始遍历，我们可以看一下下面的例子
// ...
<body>
<div style="width: 50%">
<div style="width: 50%">guolinge</div>
</div>
</body>
第一个div节点的显示尺寸设置为视口宽度的50%,第二个div将其尺寸设置为父节点的50%，而在这个回流过程中，我们就需要根据视口具体的宽度，将其转为实际的像素值
重绘：
经过了上述阶段，我们知道了那些节点是可见的，以及可见节点的样式和具体的几何信息（位置，大小），那么我们就可以将渲染树上的每一个节点转换成屏幕上的实际像素，这个过程叫重绘节点。
何时发生回流重绘
我们前面知道，回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。例如：
1.添加和删除可见的dom元素
2.元素的位置发生变化
3.元素的尺寸发生变化（外边距，内边距，边框大小，高度和宽度等）
4.内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所代替（字体大小没变样式变了好像没回流）
5.页面第一次渲染的时候（避免不了）
6.浏览器的窗口尺寸变化（因为回流是根据视口大小来计算元素的位置和大小的）
注意：回流一定触发重绘，而重绘不一定会回流
根据变化的范围和程度，渲染树中或大或小的部分需要计算，有些改变会触发整个页面的重排，比如滚动条出现的时候或者修改了根结点
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
