javascript - 如何编写不阻塞 ui 的 Javascript 代码

Question

我正在开发一个执行 2 个作业的 javascript 应用程序。

第一份工作比较重要，需要以 60fps 的速度运行。另一个作业是仍然需要运行的“后台”作业，但如果需要更长的时间也没关系。

通常我这样做的方式是将更重要的作业代码放在 RequestAnimationFrame 循环中，然后将后台作业放在 Web Worker 上。

然而，主要工作已经产生了 2 个网络 worker ，出于上下文切换和内存消耗的原因，我不想产生第三个。

RequestAnimationFrame 循环还剩下大约 8 毫秒的处理时间，我必须使用它来运行后台作业，但这项作业大约需要 100 毫秒才能完成。

我的问题是有没有一种方法可以编写一个循环，在每次 ui 即将被阻塞时自动暂停？

基本上运行尽可能多的代码，直到帧剩余 8 毫秒的时间用完，然后暂停直到再次有空闲时间。

Answer 1

这是目前的实验技术isn't well-supported yet ，但是:有 requestIdleCallback ，其中:

...queues a function to be called during a browser's idle periods. This enables developers to perform background and low priority work on the main event loop, without impacting latency-critical events such as animation and input response. Functions are generally called in first-in-first-out order; however, callbacks which have a timeout specified may be called out-of-order if necessary in order to run them before the timeout elapses.

关于 rIC 的一个关键事情是它收到一个 IdleDeadline object哪个

...lets you determine how much longer the user agent estimates it will remain idle and a property, didTimeout, which lets you determine if your callback is executing because its timeout duration expired.

所以当 deadline.timeRemaining() method 时你可以让你的循环停止返回足够小的剩余毫秒数。

---

也就是说，我想在尝试其他方法之前，我可能会添加第三个 worker 并在积极的测试中看看它是什么样子。是的，上下文切换确实代价高昂，您不想过度使用它。另一方面，现在移动设备和架构上已经有很多其他的东西在上下文切换方面非常快。我无法说明工作人员对手机的内存需求(我自己没有测量过)，但这就是我要开始的地方。