web性能优化之DOM优化

1. DOM优化

在JS中对DOM进行访问的代价很高，建议用变量缓存DOM属性和元素

1.1. 重排和重绘

重排：元素布局发生修改

重绘：元素的视觉表现属性的修改

不论是重排还是重绘，都会阻塞浏览器。要提高性能，就要降低重排和重绘的频率和成本，近可能少地触发重新渲染。

CSS Triggers List - What Kind of Changes You Can Make 列举了CSS属性在不同的渲染引擎中是否会触发重排或重绘

优化策略：

• CSS属性读写分离
• 通过切换class或者style.csstext属性去批量操作元素样式
• DOM元素离线更新：当对DOM进行相关操作时，例如innerHTML、appendChild，可以使用 DocumentFragment（文档片段接口）创建并组成一个 DOM 子树，再一次插入页面中，或者先将元素隐藏/脱离文档流，再进行操作。

1.2. 避免DOM过大、过深

影响DOM渲染、查找DOM节点的时间

2. 事件优化

2.1 防抖和节流

防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

使用场景：

• search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
• window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

节流：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

使用场景：

• 鼠标不断点击触发，mousedown(单位时间内只触发一次)
• 监听滚动事件，比如是否滑到底部自动加载更多，用节流来判断

2.2 事件解绑

在单页应用的设计中，用户使用它时是不需要刷新浏览器的，所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效。

因此，我们在 v-if 从 DOM 中移除元素，或者路由到不同的组件时，需要考虑解绑事件和销毁实例。

export default {
  mounted() {
    // 函数消抖
    this.__resizeHandler = debounce(() => {
      this.chartInstance?.resize()
      this.handleResize && this.handleResize()
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.__resizeHandler)
  }
}