前端性能优化的七大手段之减少重绘回流(二)

【DOM 优化】

1. 缓存 DOM

const div = document.getElementById("div");

由于查询 DOM 比较耗时,在同一个节点无需多次查询的情况下,可以缓存 DOM

2. 减少 DOM 深度及 DOM 数量

HTML 中标签越多,标签的层级越深,浏览器解析 DOM 并绘制到浏览器中所花的时间就越长,所以尽可能减少 DOM 深度及 DOM 数量

3. 批量操作 DOM 

由于批量操作 DOM 比较耗时,且可能造成回流,因此尽量避免批量操作 DOM;如遇到批量操作 DOM 可以先用字符串拼接,再用 innerHTMl 更新

4. 批量操作 CSS 样式

通过切换 class 或者使用元素的 style.csstext 属性去批量操作元素的样式

5. 在内存中操作 DOM 

使用 DocumnetFragment 对象,让 DOM 操作发生在内存中,而不是页面里

6. DOM 元素离线更新

对 DOM 进行相关操作时,例、appendChild 等都可以使用 DocumentFragment 对象进行离线操作,带元素“组装”完成后再一次插入页面,或者使用 display: none 对元素隐藏,在元素“消失”后进行相关操作

7. DOM读写分离

浏览器具有惰性渲染机制,连续多次修改 DOM 可能只触发一次渲染。而如果修改 DOM 后,立即读取 DOM 。为了保证读取到的正确 DOM 值,会触发浏览器一次渲染。因此修改 DOM 操作要与访问 DOM 分开进行

8. 事件代理

事件代理是指将事件监听器注册在父级元素上,由于子元素的事件会通过事件冒泡的方式向上传播到父节点,因此可以由父节点的监听函数统一处理多个子元素的事件。

利用事件代理,可以减少内存使用,提高性能及降低代码复杂度。

9. 防抖和节流

使用函数节流(throttle)或函数去抖(debunce)限制某一个方法的频繁触发

10. 及时清理环境

及时消除对象引用,清除定时器,清除事件监听器,创建最小作用域变量,可以及时回收内存

发表评论

电子邮件地址不会被公开。 必填项已用*标注