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

Question

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

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

我注意到 GIF 的平滑度取决于您打开页面的 browser/computer。 在速度非常快的计算机上，GIF 动画运行起来非常流畅，而在其他计算机上，速度较慢的计算机上，动画很粗糙（低 FPS）。

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

我该怎么做才能确保浏览器牺牲播放 GIF 所需的所有资源？

谢谢

Answer 1

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

但是，目前 Blink 上存在一个错误， 会导致 CSS 动画微调器因主线程阻塞而暂停。

但这应该很快就会解决。