滚动链接动画的性能改进
滚动链接动画的性能改进
提问于 2018-03-20 21:37:28
我已经在JavaScript中创建了一些效果(以及简单的CSS控制动画)，它们工作得很好，但需要花费大量的硬件资源(特别是GPU)，所以在性能较差的设备上，网页在滚动时会显得迟缓。有趣的是，我打开了一些网页，在性能较弱的设备上也有很多滚动链接的动画，动画看起来很流畅和漂亮。
我在滚动链接效果中寻找性能提升的解决方案，但我发现唯一的解决方案是服务器端的预渲染(从网页中截屏，这样页面就会出现在一个gif/video中，其中的帧是根据滚动来控制的)。我认为问题的根源可能是我没有使用框架(JQuery，CSS预处理器)，但这不可能是造成如此多性能损失的唯一原因。我尝试在CSS中使用will-change，这使得效果更流畅，但还不够。
下面是我创建的效果示例：
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)";
}我的问题是，提高性能(使动画在任何设备上流畅)的唯一方法是服务器端渲染，或者有其他方法可以做到这一点？其他使用滚动链接动画的页面是如何在任何设备上实现平滑效果的？
回答 1
Stack Overflow用户
发布于 2018-03-20 21:53:03
最明显的改进是尽可能多地在滚动处理程序之外移动。因为处理程序对性能非常重要，因为它经常被触发：
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)";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49385735
复制相关文章
相似问题
腾讯云开发者
