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

Question

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

因此，我有一个初始屏幕，其中包含一个简单的GIF和一些根据当前加载阶段更新的文本行。

我注意到GIF的平滑度取决于您在其中打开页面的浏览器/计算机。在一台非常快的计算机上，GIF的动画运行得像我的眼睛所看到的那样平滑，而在其他计算机上，GIF的动画则较慢，该动画显得矮胖（低FPS）。

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

为了确保浏览器牺牲所有正确播放GIF所需的资源，我该怎么做？

谢谢

Answer 1

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

但是，当前Blink上存在一个错误，该错误确实导致CSS动画微调器因主线程上的卡纸而暂停。

受主线程卡纸影响的Google Chrome合成器驱动的动画

但这应该尽快解决。