高性能JavaScript之重绘和重排

布满荆棘的人生 2021-12-21 05:27 300阅读 0赞

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

*  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 之外构建一个子树，再把它拷贝回来（推荐）
     *  将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素