浏览器中动画帧的任务

Question

因此，我了解到，为了在Web浏览器中运行动画时，为了保持每秒60帧的标准速度，我们只能获得每帧16毫秒左右的时间来执行我们想要执行的任务。浏览器通常必须经历渲染管道的所有步骤才能渲染每一帧：

但是，像Paul Lewis这样的专家说，实际上，我们每帧只有10毫秒才能完成我们的任务，因为浏览器每帧都有一些“开销”和“内务处理”。我想知道这些“间接费用”和“客房整理”任务实际上是什么？

Answer 1

“开销”因浏览器而异，并且大多数情况并非在“每一帧”上发生，而是全部累加，并且由浏览器或由常见的客户端第三方代码（例如Google Analytics（分析））执行的开销任务也需要花费宝贵的毫秒数。常见的开销任务包括：

• 垃圾收集
• 监听并处理经常发生的事件，例如scroll，mousemove和某些触摸事件（例如，如果您具有生成热图的分析库，则该软件可能会跟踪每个鼠标操作和触摸操作）
• 页面上的动画（涉及CSS或JavaScript管理的动画）对于页面的操作而言是“开销”
• 第三方（或您自己的）代码仅在满足某些条件（例如，图像的延迟加载，其中仅在屏幕上或接近屏幕显示时才加载（并绘制和合成）的图像）后才起作用”>
• 由广告网络投放的广告
• 您自己的异步代码（由setTimeout()，setInterval()，事件处理程序等触发）等等，以及在某个时间执行的任何第三方库的异步代码，并且在执行时吞噬了您的16ms（显然，这和上一点有很多重叠）
• 广告拦截器和类似的插件（它们在不同的线程上运行，但是例如在需要DOM操作或任何其他跨线程通信时与您的线程进行交互）
• 流媒体的加载（通常由幕后的许多网络请求组成），甚至可以包含相对较短的静态视频
• 运行GIF动画或视频（您或UGC）的开销-与上一项分开，只涉及网络交互）
• 当用户滚动或跳转到页面的另一部分时，需要进行重新绘制（与scroll，resize等的任何侦听器无关）
• 如果您或用户添加，删除或调整了某些类型的元素，则可能会完全重绘DOM
• 处理XHR或iframe服务器响应或从网络传入的其他数据（例如websockets流量）
• 跟踪像素（加载像素，处理其宝贵的JavaScript引擎时间要求）；请注意，大型网站上通常会有十二个或两个不同类型的跟踪像素，并且只需要编写一个拙劣的像素就可以对浏览器有限的资源提出巨大的要求。]
• 试图预测接下来会发生什么并执行所涉及的优化的逻辑
• 操作系统中运行的其他应用程序（或浏览器中其他选项卡中运行的其他页面）占用的CPU过多，这些资源占用了JavaScript引擎，渲染引擎等的资源
• 事件循环开销-JavaScript事件循环是处理单线程代码的一种优雅方法，但是操作它涉及开销。>

以上所有内容（不完整的清单）都被认为是您要在10ms或16ms内完成的特定工作的“开销”。

还要注意，某些设备无法在浏览器内或任何地方保持60fps的速度； CPU速度慢，缺少足够的内存或持久存储等，可能会导致all

应用程序变慢，包括浏览器。

[也许您正在寻找更具体，不确定的内容-但我想我知道您提到的Paul Lewis（他谈论的是10ms与16.66ms等），我不确定他在谈论什么开销大约-但是，例如，如果您要在以60fps的速度运行的网页上制作一个动画，那么与优化动画效果的特定任务相比，上述所有操作都是“开销”。

希望这会有所帮助！