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

Question

我有SPA（Angular 1.4.8）。 启动时，客户端必须下载许多文件，同时还要执行身份验证和引导。

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

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

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

我可以做些什么来确保浏览器牺牲所有播放GIF所需的资源？

由于

Answer 1

不要使用gif。使用CSS动画微调器，如these。像这样的CSS动画微调器不会受到执行JS并更新UI的浏览器主线程上的阻塞的影响。

但是，Blink目前存在一个错误，确实导致CSS动画微调器暂停，主线程上出现卡塞。

Google Chrome compositor-driven animation affected by jam in main thread

但这应该很快修复。