视差效果介绍和使用(3)

这意味着使用 此 选项时，情况会有所不同：我们可能为应用 3D 变换的任何元素设置一层。 如果我们从这一点上做的只是对元素进行更多的转换，我们就不需要重新绘制图层，GPU 可以处理移动元素并将最终页面合成在一起。
这是另一个演示 正在使用的 3D 变换。 如果您滚动，您会发现情况有了很大改善。
很多时候人们只是使用 -webkit-transform: translateZ(0);破解并看到神奇的性能改进，虽然这在今天有效，但存在问题：
它不是跨浏览器兼容的。它通过为每个转换的元素创建一个新层来强制浏览器的手。 很多层会带来其他性能瓶颈，因此请谨慎使用！已某些 WebKit 端口 （倒数第四个！）。
如果你走 3D 翻译路线要小心，它是你问题的临时解决方案！ 理想情况下，我们会从 2D 变换中看到与 3D 类似的渲染特征。 浏览器正在以惊人的速度发展，所以希望在这之前我们会看到。
最后，您应该尽可能避免绘画，并简单地在页面周围移动现有元素。 例如，视差网站的典型方法是使用固定高度的 div 并更改其背景位置以提供效果。 不幸的是，这意味着每次通过时都需要重新绘制元素，这可能会降低性能。 相反，如果可以的话，您应该创建元素（将其包装在 div 中 overflow: hidden如有必要）并简单地翻译它。

选项 3：使用固定位置的画布或 WebGL

我们要考虑的最后一个选项是在页面后面使用一个固定位置的画布，我们将在其中绘制转换后的图像。 乍一看，这似乎不是最高效的解决方案，但这种方法实际上有一些好处：
由于只有一个元素，即画布，我们不再需要那么多的合成器工作。我们正在有效地处理单个 硬件加速 位图。Canvas2D API 非常适合我们希望执行的转换，这意味着开发和维护更易于管理。
使用画布元素为我们提供了一个新层，但它只是 一个 层，而在选项 2 中，我们实际上为 每个 应用了 3D 变换的元素提供了一个新层，因此将所有这些层合成在一起的工作量增加了。 鉴于不同的跨浏览器转换实现，这也是当今最兼容的解决方案。
如果您查看的演示 并在 DevTools 中对其进行测试，您会发现性能非常好。 对于这种方法，我们只需使用画布drawImageAPI 调用，我们给它我们的背景图像和我们的每个彩色斑点，以便在屏幕上的正确位置绘制。