性能优化：让滚动和动画流畅 requestAnimationFrame

• 前提：滚动和动画会频繁的引起回流与重绘，操作卡顿问题

• 防抖（debounce）与 节流（throttle）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

• window.requestAnimationFrame() 这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，用于准确控制页面的帧刷新渲染，让动画效果更加流畅。频率是每秒 60 次，也就是 1000/60 ，触发频率大概是 16.7ms 。（当执行复杂操作时，当它发现无法维持 60fps 的频率时，它会把频率降低到 30fps 来保持帧数的稳定。）

• 避免在scroll 事件中修改样式属性或将样式操作从 scroll 事件中剥离，因为如果你在 scroll 事件的处理函数中做了修改样式属性的操作，那么这些操作会被浏览器暂存起来。然后在调用 requestAnimationFrame 的时候，如果你在一开始做了读取样式属性的操作，那么这将会导致触发浏览器的强制同步布局。

• 滑动过程中尝试使用 pointer-events: none 禁止鼠标事件，可用来提高滚动时的帧频。当滚动时，鼠标悬停在某些元素上，则触发其上的 hover 效果，多半导致滚动出现问题。