Question

我在JavaScript中创建了一些效果（并且使用简单的CSS控制动画），并且它们运行良好，但是需要花费大量硬件资源（尤其是GPU），因此在性能较低的设备上，网页看起来很滞后滚动时。有趣的是，我在一些性能较弱的设备上打开了一些带有滚动链接动画的网页，动画效果也很流畅。

我在滚动链接效果中搜索了性能改进的解决方案，但我发现的唯一一件事就是服务器端预渲染（从网页上制作截图，这样页面出现在一个gif / video中，哪些是帧根据滚动控制）。我认为问题的根源是我不使用框架（JQuery，CSS预处理器），但它不是造成这种性能成本的唯一原因。我尝试使用CSS中的改变，这使得效果更平滑，但还不够。

我创造的效果的一个例子：

window.onscroll = function() {
    var element = document.querySelector(.exampleElement),
      elementsContainer = element.parentNode,
      effect = (element.offsetTop - window.pageYOffset) / window.innerHeight;
    elementsContainer.style.perspective = "1000px";
    element.style.transform = "rotateX(" + effect * 90 + "deg)";
}

我的问题是，提高性能（使动画在任何设备上流畅）的唯一方法是服务器端渲染，还是有另一种方法可以做到这一点？其他使用滚动链接动画的页面如何在任何设备上平滑效果？

Answer 1

最明显的改进是尽可能在滚动处理程序之外移动。导致处理程序对于性能非常重要，因为它经常被触发：

var element = document.querySelector(.exampleElement),
  elementsContainer = element.parentNode;

elementsContainer.style.perspective = "1000px";

window.onscroll = function() {       
   const effect = (element.offsetTop - window.pageYOffset) / window.innerHeight;
   element.style.transform = "rotateX(" + effect * 90 + "deg)";
}

滚动动画的性能改进

1 个答案: