目录
页面的渲染过程
(1)Javascript:通过JS实现动画效果或者操作DOM实现交互
(2)Style:计算样式,如果样式有改变将重新计算,并返回给DOM
(3)Layout:根据DOM的样式,重新布局(重排、回流)
(4)Paint:在多个渲染层上,对新的布局重新渲染(重绘)
(5)Composite:将绘制好的多个渲染层合并,显示到页面上
在页面生成时,至少进行一次布局和渲染,在后面用户不断地操作过程中会进行多次的重排和重绘,以至于影响页面的性能。
重排(回流)
浏览器下载完页面中的所有组件(HTML、JavaScript、CSS、图片)之后会解析生成两个内部数据结构(DOM 树和渲染树),DOM 树表示页面结构,渲染树表示 DOM 节点如何显示。重排是 DOM 元素的几何属性变化,DOM 树的结构变化,渲染树需要重新计算。
触发操作
- 页面渲染初始化时;(这个无法避免)
- 浏览器窗口改变尺寸;
- 元素尺寸改变时;
- 元素位置改变时;
- 元素内容改变时;
- 添加或删除可见的 DOM 元素时。
- 当获取一些属性值时,浏览器为了保证获取到正确的值也会引起重排。如元素的offsetTop,offsetLeft,offsetHeight,offsetWidth,scrollTop,scrollWidth,scrollLeft,scrollHeight等
重绘
重绘是一个元素外观的改变所触发的浏览器行为(元素的样式发生了变化,而大小和尺寸没有发生改变),例如改变 visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。但 table 及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性值,比同等元素要多花两倍时间,这就是我们尽量避免使用 table 布局页面的原因之一。
触发操作
只修改元素的样式,而未修改元素的大小和位置,引起重绘。
重排(回流)和重绘关系
重绘不会引起重排,但重排一定会引起重绘,一个元素的重排通常会带来一系列的反应,甚至触发整个文档的重排和重绘,性能代价是高昂的。
浏览器本身优化策略
浏览器会维护一个队列,将所有引起重排和重绘的操作都放在这个队列里,当操作达到一定的数量或者时间间隔时,浏览器会进行一个批处理。这样可以让多次的重排重绘,变成一次。但是有时候一些特殊的style属性会使这种优化失效,例如offsetTop,scrollTop,clientTop等属性,这些属性都是要实时返回给用户的几何属性或者布局属性,因此浏览器需要立即执行,触发重排返回正确的值。
优化方法
HTML、CSS方面优化
- 将多次改变样式属性的操作合并成一次操作,减少 DOM 访问,可以通过切换类名的方法实现。
- 如果要批量添加 DOM,可以先让元素脱离文档流,操作完后再带入文档流,这样只会触发一次重排。(fragment 元素的应用)
- 将需要多次重排的元素,position 属性设为 absolute 或 fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
- 由于 display 属性为 none 的元素不在渲染树中,对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时,可以先隐藏它,操作完成后再显示。这样只在隐藏和显示时触发两次重排。
- 在内存中多次操作节点,完成后再添加到文档中去。例如要异步获取表格数据,渲染到页面。可以先取得数据后在内存中构建整个表格的 html 片段,再一次性添加到文档中去,而不是循环添加每一行。
- 将原始元素拷贝到一个独立节点中去,然后操作这个独立的节点,覆盖原始元素。
Javascript方面优化
JavaScript代码优化(减少作用域链上的查找次数(函数尾调用、尾递归、全局查找)、使用原生方法、减少语句、减少页面重绘、使用事件委托)_AIWWY的博客-CSDN博客
补充:多次使用例如offsetTop,scrollTop,clientTop等属性(这些属性都是要实时返回给用户的几何属性或者布局属性)时,进行申明变量缓存。