使用Javascript实现高效的全屏动画

我的单页应用程序不断为整个1920x1080屏幕的照片制作动画。每个像素都在移动

这在Chrome中的内存占用不断增长。即使我使用

requestAnimationFrame

，它也会增长到1gb以上。我假设它会无限期地增长并使Chrome标签崩溃——或者它会在某个时候更好地管理内存吗

有什么方法可以提高这个应用程序的内存性能吗？也许是通过较少/较慢地设置动画

requestAnimationFrame（滚动图像）；
函数滚动_图像（）{
如果（pos1==frameheight*-1）{//如果在屏幕顶部，则将其移动到底部并填充新图片。
pos1=框架高度；
填充（1）；//用图片填充第一帧。
}否则{//否则，继续向上移动
pos1--；
elem1.style.top=pos1+‘px’；
}
请求动画帧（滚动图像）；
}

您可以尝试使用

css

动画

，

转换

。为什么要调用

requestAnimationFrame

两次？谢谢你的提示。它实际上只被调用一次，但它自己递归地调用。使用提供的代码很难找到问题所在，你能举例说明你在JSFIDLE上尝试做什么吗？@bevanb你能创建一个stacksnippets或当前实现的JSFIDLE来演示吗？不幸的是，我不能，但是我已经更新了代码，使其更加清晰和简洁。基本上，页面上有一个1980x1020 div，里面有一堆图片。调用

scroll\u images

可使其向上移动（就像在智能手机上滑动“向上”）。当它到达顶部时，会再次移动到底部。您可以使用try-using

css

动画

，

过渡

。为什么要调用

requestAnimationFrame

两次？谢谢你的提示。它实际上只被调用一次，但它自己递归地调用。使用提供的代码很难找到问题所在，你能举例说明你在JSFIDLE上尝试做什么吗？@bevanb你能创建一个stacksnippets或当前实现的JSFIDLE来演示吗？不幸的是，我不能，但是我已经更新了代码，使其更加清晰和简洁。基本上，页面上有一个1980x1020 div，里面有一堆图片。调用

scroll\u images

可使其向上移动（就像在智能手机上滑动“向上”）。当它到达顶部时，会再次移动到底部。