当浏览器下载需要的文件时，GIF在启动画面中缓慢动画

我有SPA（Angular 1.4.8）。启动时，客户端必须下载许多文件，同时执行身份验证和自举。当浏览器下载需要的文件时，GIF在启动画面中缓慢动画

因此，我有一个启动画面，其中包含一个简单的GIF和几个文本行，根据当前的加载阶段进行更新。

我注意到GIF的平滑度取决于您打开页面的浏览器/计算机。在一台速度非常快的计算机上，GIF的动画运行顺畅，我的眼睛可以注意到，而在其他计算机上，较慢的，动画是矮胖（低FPS）。

我假设这与加载我的应用程序时必须做很多事情的浏览器上的负载有关，导致GIF动画的FPS较低。 根据我的测试，这只是一个假设。

如何才能确保浏览器牺牲播放GIF所需的全部资源？

谢谢

2016-03-08 johni

请勿使用gif。使用CSS动画微调器，如these。像这些CSS动画旋转器不受执行你的JS和更新UI的浏览器主线程上的阻塞影响。

但是，目前在Blink上有一个错误确实导致CSS动画微调停止与主线程上的阻塞。

但应尽快解决。

2016-03-08 17:49:17 Prashant

我读过另一篇文章，看起来在firefox中，当在浏览器的控制台中执行时：'for（var i = 0; i <9999999; i ++）;'动画片段也是。（由于某种原因，除1或2以外的所有人）。你能解释这种行为吗？ – johni

是的，这取决于动画是如何完成的。像变换，不透明，旋转等属性的转换可以由合成器线程完成，而无需主线程的帮助。而在高度，阴影等（第一个例子中发生的）上的过渡需要主线程对绘画的帮助。这就是为什么当主线程忙于执行循环时它会卡住。示例3的工作原理是它仅转换不需要主线程的旋转。 – Prashant

回答