视差效果介绍和使用

视差网站风靡一时，看看这些：
Old Pulteney Row to the PoleAdidas SnowboardingBBC News - James Bond: Cars, catchphrases and kisses
如果您不熟悉它们，它们就是页面的视觉结构在您滚动时发生变化的站点。 通常，页面内的元素与页面上的滚动位置成比例地缩放、旋转或移动。

我们的演示页面包含视差效果
您是否喜欢视差站点是一回事，但您可以非常自信地说它们是性能黑洞。 这样做的原因是，浏览器往往会针对滚动时（取决于滚动方向）出现在屏幕顶部或底部的新内容进行优化，一般来说，浏览器在变化很小的情况下工作得最好在滚动期间视觉上。 对于视差站点而言，这种情况很少见，因为整个页面上的大型视觉元素会发生多次变化，导致浏览器重新绘制整个页面。
像这样概括视差站点是合理的：
背景元素，当您上下滚动时，会改变它们的位置、旋转和比例。页面内容，例如文本或较小的图像，以典型的从上到下的方式滚动。
我们之前介绍了滚动性能 以及提高应用程序响应能力的方法，本文建立在此基础之上，因此如果您还没有这样做，可能值得一读。
所以问题是，如果您正在构建一个视差滚动站点，您是否陷入了昂贵的重绘，或者您是否可以采取其他方法来最大限度地提高性能？ 让我们来看看我们的选择。

选项 1：使用 DOM 元素和绝对位置

这似乎是大多数人采用的默认方法。 页面中有一堆元素，每当触发滚动事件时，都会进行一堆视觉更新来转换它们。 我已经整理了一个演示页面 ，它就是这样做的。
如果您在帧模式下启动 DevTools 时间轴并滚动，您会注意到有昂贵的全屏绘制操作，如果您滚动很多，您可能会在单个帧中看到多个滚动事件，每个事件都会触发布局工作。