事件性能
浏览器中存在大量的高频触发的事件, 如果我们在监听此事件时执行某些操作通常会进行密集的计算. 因此程序性能极有可能会变得非常低效. 那么有什么颁发能够优化此类性能呢?
减少逻辑执行的密集度
这是最广泛的性能优化手段之一, 通过防抖和节流等手段减少真实操作的频率.(对滚动和鼠标移动以及屏幕滚动来说很有用)
ts
// 节流 滚动时200毫秒才会执行一次
dom.addEventListener('scroll', throttle(() => {
// do sth...
}, 200))
// 防抖 停止滚动200毫秒后才会执行一次
dom.addEventListener('scroll', debounce(() => {
// do sth...
}, 200))
节流和防抖都属于闭包结构, 属于比较基础的内容, 可以自行了解.
减少性能损耗的操作, 比如触发重排的操作
遇到必须需要触发重排的操作, 可以事先获取并缓存. 在动画时可能会经常遇到此类操作, 尤其需要注意.
告诉监听器, 你的操作不会阻止默认操作
在事件监听处理器第三个选项中传入passive: true.
这样浏览器就不会去判断有没有可能会有阻止默认操作的可能.