浏览器中动画帧的任务

Question

所以我明白，为了在 Web 浏览器中运行动画时保持每秒 60 帧的标准，我们每帧只有大约 16 毫秒来执行我们想要的任何任务。 浏览器通常必须通过渲染管道的所有步骤来渲染每一帧：

然而，像 Paul Lewis 这样的专家说，实际上我们每帧只有 10 毫秒来完成我们的任务，因为浏览器对每一帧都有一些“开销”和“内务”要做。 我想知道这些“开销”和“内务管理”任务究竟是什么？

Answer 1

“开销”因浏览器而异，并且大多数不会发生在“每一帧”上，但这些都是累加的，并且由您的浏览器或常见的客户端第三方代码（如 Google Analytics）执行的开销任务也占用了宝贵的资源毫秒。 常见的开销任务包括：

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

以上所有（一个甚至不接近全面的列表）都将被视为您试图在 10 毫秒或 16 毫秒内完成的任何特定内容的“开销”。

另请注意，某些设备无法在浏览器内或任何地方保持 60fps； CPU 速度慢、内存不足或持久存储等都会降低所有应用程序的速度，包括浏览器。

也许你正在寻找更具体的东西，不确定 - 但我想我知道你提到的保罗刘易斯（他谈论 10 毫秒和 16.66 毫秒，等等），我不确定他在谈论什么开销 -但是，例如，如果您尝试在网页上制作一个以 60fps 运行的动画，那么与您优化动画的特定任务相比，上述所有内容都将是“开销”。

希望这可以帮助！