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

耗性能样式(Expensive Styles) 重排(reflow)与重绘(repaint) 反跳滚动事件失败
接下来深入探讨下这些问题。

耗性能样式

首先要说明的是，不同样式在消耗性能方面是不同的，有些效果(如经常被人提起的 box-shadow)从渲染角度来讲十分耗性能，原因就是与其他样式相比，它们的绘制代码执行时间过长。这就是说，如果一个耗性能严重的样式经常需要重绘，那么你就会遇到性能问题。其次你要知道，没有不变的事情，在今天性能很差的样式，可能明天就被优化，并且浏览器之间也存在差异。因此关键在于，你要借助开发工具来分辨出性能瓶颈所在，然后设法减少浏览器的工作量。在
Google I/O 2012
上，Nat Duca 和 Tom Wiltzius 对如何在 Chrome 中避免渲染卡顿做了出色的演讲，并且给出了许多实用技巧，包括耗费昂贵的样式与如何计算它们造成的影响。

重排与重绘

无论何时你在 JavaScript 中获取元素的
offsetTop
属性，就相当于立即为浏览器布置了大量任务，它必须马上布局页面来为你返回正确答案。这个过程就称为重排。当我们基于
offsetTop
的值来改变元素的其他属性，那么元素(还有它的复合层)就需要重绘。它还会带来一个连锁反应，即由于重绘而导致
offsetTop
的值失效，因为对浏览器来说，页面发生了变化。当你对多个元素做上述操作时就可能引发严重问题。如果我们为每个元素计算位置然后重绘它，就会使浏览器进入耗能高且浪费的重排-重绘周期中。在这种情况下，我们应该通过两个步骤来减少周期：首先，收集元素的
offsetTop
值，然后，完成视觉更新。通过这样的方式，我们就避免了重复计算元素的位置，假设我们使用
requestAnimationFrame
，那么就可以让视觉更新按照浏览器的最优时间来安排计划。值得一提的是，
除了 offsetTop 之外的其他操作
也会引起重排，最好了解一下这些内容来提高警惕。

反跳滚动事件（Debouncing Scroll Events）

假设你正开发一个视差滚动网站。你很自然的想到在获得滚动事件时对视觉进行更新。主要的问题在于滚动事件和浏览器的视觉更新并不合拍，比如说在