标签：CSSOM 浏览器 DOM 渲染 节点 html 重排 重绘

浏览器渲染页面的一般过程：

1.浏览器解析html源码，然后创建一个 DOM树。并行请求 css/image/js在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。

2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。

3.DOM Tree + CSSOM --> 渲染树（rendering tree）。渲染树和DOM树有点像，但是是有区别的。

DOM树完全和html标签一一对应，但是渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性。

4.一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。

为了形成渲染树，浏览器做的事情：

1.从DOM树根节点开始，遍历每一个可见的节点

2.对每一个可见的节点，找到合适的匹配的CSSOM规划，并且应用样式

3.显示可见节点，节点包括内容和被计算的样式

总结：（浏览器的执行过程）

1.处理html标签建立DOM树

2.处理CSS标签建立CSSOM树

3.连接CSSOM树和DOM树形成一个渲染树

4.在渲染树上运行布局来计算每个节点的形状

5.在屏幕上画每个节点

重排和重绘

1.重排（Reflow）:当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并且重新构造渲染树

2.重绘（Repaint）:是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观，比如：改变某个元素的背景色，文字颜色，边框颜色

3.重绘不一定会影响重排，重排必然会导致重绘

4.以上浏览器渲染页面说到，如果DOM或者CSSOM被修改，浏览器渲染页面过程会被重复执行，就是重排，将重排后的节点绘画在屏幕上就是重绘。

5.因为重排影响浏览器的性能，我们要尽可能在操作的时候减少重排：

造成重排的操作:

①添加、删除可见的DOM元素

②元素的位置发生改变

③元素的尺寸发生改变（内外边距，边框宽度等几何属性）

④页面渲染初始化

⑤浏览器窗口尺寸变化

⑥获取某些属性，当获取一些属性时，浏览器为取得正确的值也会触发重排，它会导致队列刷新。（获取offset系列值时）

标签：CSSOM,浏览器,DOM,渲染,节点,html,重排,重绘
来源： https://www.cnblogs.com/mandymm/p/13961272.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。