事件性能

浏览器中存在大量的高频触发的事件, 如果我们在监听此事件时执行某些操作通常会进行密集的计算. 因此程序性能极有可能会变得非常低效. 那么有什么颁发能够优化此类性能呢?

减少逻辑执行的密集度

这是最广泛的性能优化手段之一, 通过防抖和节流等手段减少真实操作的频率.(对滚动和鼠标移动以及屏幕滚动来说很有用)

ts

// 节流 滚动时200毫秒才会执行一次
dom.addEventListener('scroll', throttle(() => {
  // do sth...
}, 200))

// 防抖 停止滚动200毫秒后才会执行一次
dom.addEventListener('scroll', debounce(() => {
  // do sth...
}, 200))

节流和防抖都属于闭包结构, 属于比较基础的内容, 可以自行了解.

减少性能损耗的操作, 比如触发重排的操作

遇到必须需要触发重排的操作, 可以事先获取并缓存. 在动画时可能会经常遇到此类操作, 尤其需要注意.

告诉监听器, 你的操作不会阻止默认操作

在事件监听处理器第三个选项中传入passive: true.

这样浏览器就不会去判断有没有可能会有阻止默认操作的可能.