Web网页滚动性能优化(4)

requestAnimationFrame
的回调函数中，就会出现在一个渲染帧内多次更新的风险。如果更新操作耗费很高，视差滚动网站通常都会如此(大量被破坏的区域，很多重绘与组合操作)，那么这些重复操作就很浪费。要解决这一问题，你需要反跳滚动事件。当滚动事件触发时你就把上一次滚动的值保持在变量中，然后在
requestAnimationFrame
中执行视觉更新，使用最后已知的那个值。如此一来，浏览器可以在正确的时间里来安排视觉更新，而我们在每一帧中都只做必要的工作。我们在之前一篇文章中介绍过
重排/重绘周期
，如果想了解更多内容不放看看这篇文章。

总结

现在你应该明白如何通过 Chrome 开发者工具的时间线来评估你的应用在滚动中的性能表现。你还要时常重复这样的工作，因为性能特性无时无刻不在变化，有些特性在今天比别的特性慢，但过不了多久可能就会反过来，它们随着时间的变化而不同，关键在于如何解读你看到的数据，并以此来调整优化的手段。你应当始终检查在开发者工具中的
真实
性能数据。用眼睛观察是很简单，但问题不一定那么明显。所以别靠猜，靠测试。

更多内容

如果你对浏览器内部实现或避免渲染性能瓶颈感兴趣，请阅读下面这些内容。
Tali Garsiel & Paul Irish on how browsers workA summary of hardware compositing in ChromePaul Lewis on debouncing scroll events and reflow / repaint cyclesTom Wiltzius on jank busting for better rendering performance