浏览器下载所需文件时，GIF 在初始屏幕中缓慢动画答案

【问题标题】：GIF animates slowly in splash screen while browser downloads needed files浏览器下载所需文件时，GIF 在初始屏幕中缓慢动画
【发布时间】：2016-06-22 19:08:01
【问题描述】：

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

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

我注意到 GIF 的流畅度取决于您打开页面的浏览器/计算机。在一台速度非常快的计算机上，GIF 的动画运行得如我所见一样流畅，而在其他计算机上，速度较慢的计算机上，动画很粗（低 FPS）。

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

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

谢谢

【问题讨论】：

标签： javascript angularjs animation gif animated-gif

【解决方案1】：

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

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

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

但这应该很快就会解决。

【讨论】：

我读过另一篇文章，似乎在 Firefox 中，当在浏览器的控制台中执行时：for (var i = 0; i < 9999999; i++); 动画也卡住了。（出于某种原因，除了 1 或 2 之外，所有这些）。你能解释一下这种行为吗？
是的，这取决于动画的制作方式。转换、不透明度、旋转等属性的转换可以由合成器线程单独完成，无需主线程的帮助。然而，高度、阴影等的过渡（在第一个示例中发生）需要主线程的绘画帮助。这就是为什么当主线程忙于执行循环时它会卡住。示例 3 有效，因为它只转换不需要主线程的旋转。