类别:性能优化 / 日期:2023-01-07 / 浏览:250 / 评论:0
减少回流与重绘的措施:
操作 DOM 时,尽量在低层级的 DOM 节点进行操作
不要使用 table 布局, 一个小的改动可能会使整个 table 进行重新 布局
使用 CSS 的表达式
不要频繁操作元素的样式,对于静态页面,可以修改类名,而不是样 式。
使用 absolute 或者 fixed,使元素脱离文档流,这样他们发生变化 就不会影响其他元素
避免频繁操作 DOM,可以创建一个文档片段 documentFragment,在它 上面应用所有 DOM 操作,最后再把它添加到文档中
将元素先设置 display: none,操作结束后再把它显示出来。因为在 display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘。
将 DOM 的多个读操作(或者写操作)放在一起,而不是读写操作穿插 着写。这得益于浏览器的渲染队列机制。
浏览器针对页面的回流与重绘,进行了自身的优化——渲染队列 浏览器会将所有的回流、重绘的操作放在一个队列中,当队列中的操 作到了一定的数量或者到了一定的时间间隔,浏览器就会对队列进行 批处理。这样就会让多次的回流、重绘变成一次回流重绘。-性能优化
上面,将多个读操作(或者写操作)放在一起,就会等所有的读操作 进入队列之后执行,这样,原本应该是触发多次回流,变成了只触发 一次回流。
发表评论 / 取消回复