其他优化技巧✅

如何改善网站滚动性能?

答案

核心概念

改善网站滚动性能的关键在于减少滚动时主线程的负担，避免重排重绘、减少合成层数量、优化事件处理和动画渲染，确保滚动流畅不卡顿。

详细解释

避免重排重绘：滚动时频繁操作 DOM 或修改样式（如 top/left）会导致重排重绘，建议使用 transform: translate3d 或 will-change: transform 让浏览器用 GPU 加速。
合理使用合成层：为动画元素添加 will-change: transform 或 translateZ(0)，但不要滥用，避免内存占用过高。
事件优化：避免在滚动事件（如 scroll）中执行复杂逻辑，必要时用 requestAnimationFrame 或节流（throttle）优化回调频率。
减少阴影/模糊等高开销样式：如 box-shadow、filter: blur 等会拖慢合成，滚动区域应尽量避免。
虚拟滚动/懒加载：长列表采用虚拟列表（如 react-window、vue-virtual-scroller），只渲染可视区域内容，减少 DOM 数量。
使用 passive 监听器：为滚动相关事件（如 touchstart、touchmove）加 { passive: true }，避免阻塞主线程。

代码示例

// 节流 scroll 事件
window.addEventListener('scroll', throttle(handleScroll, 100), { passive: true })

function throttle (fn, delay) {
  let last = 0
  return function (...args) {
    const now = Date.now()
    if (now - last > delay) {
      last = now
      fn.apply(this, args)
    }
  }
}

// GPU 加速
const el = document.querySelector('.scroll-item')
el.style.transform = 'translate3d(0,0,0)'
el.style.willChange = 'transform'

常见误区

滥用合成层导致内存暴涨。
在滚动事件中频繁操作 DOM。
忽视移动端 passive 事件监听器。

延伸阅读

滚动优化

如何改善网站滚动性能?​

如何改善网站滚动性能?