影响浏览器重绘和重排

Posted 2020-09-04 Yuri 前端什么狮子

1.简述重排的概念
浏览器下载完页面中的所有组件（html、javascript、CSS、图片）之后会解析生成两个内部数据结构（DOM树和渲染树），DOM树表示页面结构，渲染树表示DOM节点如何显示。重排是DOM元素的几何属性变化，DOM树的结构变化，渲染树需要重新计算。
2.简述重绘的概念
重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用table布局页面的原因之一。
3.简述重绘和重排的关系
重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。

4.什么情况下会触发重排？
(1)页面渲染初始化时；（这个无法避免）
(2)浏览器窗口改变尺寸；
(3)元素尺寸改变时；
(4)元素位置改变时；
(5)元素内容改变时；
(6)添加或删除可见的DOM 元素时。

5.重排优化有如下五种方法
(1)将多次改变样式属性的操作合并成一次操作，减少DOM访问。
(2)如果要批量添加DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发一次重排。（fragment元素的应用）
(3)将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
(4)由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发两次重排。
(5)在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性添加到文档中去，而不是循环添加每一行。

 

6.CSS加载 

• CSS（外链或内联）会阻塞 整个 DOM的渲染（Rendering），然而DOM解析（Parsing）会正常进行
• 很多浏览器中，CSS会延迟脚本执行和 DOMContentLoaded 事件
• JS（外链或内联）会阻塞 后续 DOM的解析（Parsing），后续DOM的渲染（Rendering）也将被阻塞
• JS前的DOM可以正常解析（Parsing）和渲染（Rendering）

CSS阻塞DOM渲染

无论是外链CSS还是内联CSS都会阻塞DOM渲染（Rendering），然而DOM解析（Parsing）会正常进行。 这意味着在CSS下载并解析结束之前，它后面的HTML都不会显示。 这也是为什么我们把样式放在HTML内容之前，以防止被呈现内容发生样式跳动。 当然代价就是显示延迟，所以性能攸关的站点都会内联所有CSS。