我有一个 SPA(Angular 1.4.8)。 启动时,客户端必须下载许多文件,同时还要执行身份验证和引导。
因此我有一个启动画面,其中包含一个简单的 GIF 和根据当前加载阶段更新的几行文本。
我注意到 GIF 的平滑度取决于您打开页面的浏览器/计算机。 在速度非常快的计算机上,GIF 动画运行起来非常流畅,而在其他计算机上,速度较慢的计算机上,动画很粗糙(低 FPS)。
我假设这与加载我的应用程序时必须做很多事情的浏览器负载有关,导致 GIF 动画的 FPS 较低。 根据我的测试,这只是一个假设。
我该怎么做才能确保浏览器牺牲所有必需的资源来正确播放 GIF?
谢谢
最佳答案
不要使用 gif。使用像 these 这样的 CSS 动画微调器.像这样的 CSS 动画微调器不受执行 JS 和更新 UI 的浏览器主线程阻塞的影响。
但是,目前 Blink 上存在一个错误,该错误确实导致 CSS 动画微调器因主线程阻塞而暂停。
Google Chrome compositor-driven animation affected by jam in main thread
但这应该很快就会解决。
关于javascript - 当浏览器下载所需文件时,GIF 在启动画面中缓慢动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35874132/