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

GIF animates slowly in splash screen while browser downloads needed files

本文关键字：屏幕缓慢动画 GIF 下载浏览器文件更新时间：2023-09-26

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

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

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

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

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

谢谢

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

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

谷歌浏览器合成器驱动的动画受主线程果酱的影响

但这应该很快就会解决。