高性能JavaScript之重绘和重排

最新推荐文章于 2024-12-08 22:00:00 发布

前端搬运工

最新推荐文章于 2024-12-08 22:00:00 发布

阅读量471

点赞数

CC 4.0 BY-SA版权

分类专栏： Web开发文章标签：高性能JavaScript 重排重绘

本文链接：https://blog.youkuaiyun.com/weixin_42989576/article/details/93971076

Web开发专栏收录该内容

70 篇文章

订阅专栏

本文详细解析了浏览器如何从下载页面组件开始，构建DOM树和渲染树，以及在此过程中涉及的重排和重绘机制。介绍了如何通过优化样式更改、批量修改DOM和使元素脱离文档流来减少重排和重绘的次数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浏览器下载完页面所需的所有组件后就开始解析并生成两个内部数据结构：

DOM树：表示页面结构
渲染树：表示 DOM 节点如何展示

DOM 树中的每个需要显示的节点在渲染树中至少存在一个对应的节点（隐藏的DOM 元素没有）。渲染树中的节点被称为“帧”或“盒”，符合 CSS 模型的定义（盒子模型是一个具有内边距，外边距，边框和位置的盒子）。一旦 DOM 和渲染树构建完成，浏览器就开始显示页面元素。

重排（回流）：浏览器需要重新计算元素的几何属性，需要重新构造渲染树。
重绘：重新绘制元素

重排何时发生？一句话总结：当页面布局和几何属性发生改变时需要重排

添加或者删除元素
改变元素的几何尺寸（padding，margin，border，height，width等）
元素位置改变
内容改变（文本改变或者图片被另个一尺寸的图片代替）
浏览器的窗口发生改变
滚动条滚动时

渲染树变化的排队与刷新：
由于每次重排都会产生计算消耗，大多数浏览器通过队列化修改和批量执行来优化重排过程。获取布局的信息会导致队列刷新，比如以下方法：

offsetTop，offsetLeft，offsetWidth，offsetHeight
scrollTop，scrollLeft，scrollWidth，scrollHeight
clientTop，clientLeft，clientWidth，clientHeight

最小化重排和重绘：

改变样式：

var el = document.getElementById('div');
el.style.borderLeft = '2px';
el.sytle.borderRight = '2px';
el.style.padding = '2px';
// 需改为
var el = document.getElementById('div');
el.style.cssText = 'border-left: 2px; border-right: 2px; padding: 2px;';

批量修改 DOM
使用以下方式可以较少重排和重绘的次数。
1. 使元素脱离文档流
2. 对其应用多重改变
3. 再把元素带回文档中
这个过程只有第一步和第三部发生重排，第二步无论修改多少次都不影响。
有三种方式可以使 DOM 脱离文档：
- 隐藏元素，应用修改，重新显示
- 使用文档片段在当前 DOM 之外构建一个子树，再把它拷贝回来（推荐）
- 将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素