事件循环中有哪些类型的队列?

2023-12-25

我面临着提及render queue在不同的文章中(example https://blog.usejournal.com/welcoming-javascript-57e1051d9d, example https://medium.com/@atinders/how-to-make-your-javascript-app-less-sluggish-by-hacking-event-loop-dcbfd8afd88c) 两位作者都说

渲染回调被赋予最高优先级

  1. 这是真的吗?
  2. Does render queue作为单独的队列存在或者是 它是渲染回调的别名吗?
  3. 渲染哪些回调?当我进行任何重绘时,都会进行渲染回调
  4. 是否还有其他类型的队列?如果有,我可以在哪里阅读有关它们的信息?

In w3.org https://www.w3.org/TR/2018/WD-html53-20181018/webappapis.html#task-queues我们可以读

来自不同任务源的任务可能会被放置在不同的任务队列中

但没有提及类型或优先级


从 HTML 规范来看,关于这个问题最重要的一点是任务源定义 https://html.spec.whatwg.org/multipage/webappapis.html#task-source我们可以在哪里阅读:

根据其源字段,每个任务都被定义为来自特定的任务源。对于每个事件循环,每个任务源必须与特定的任务队列关联。

Note

本质上,任务源在标准中用于分离逻辑上不同类型的任务,用户代理可能希望区分这些任务。用户代理使用任务队列来合并给定事件循环内的任务源。

Example

例如,用户代理可以有一个用于鼠标和按键事件的任务队列(与用户交互任务源关联),以及另一个与所有其他任务源关联的任务队列。然后,利用事件循环处理模型的初始步骤中授予的自由度,它可以在四分之三的时间里让键盘和鼠标事件优先于其他任务,从而保持界面响应,但不会让其他任务队列挨饿。请注意,在此设置中,处理模型仍然强制用户代理永远不会无序地处理来自任何一个任务源的事件。

并且在任务队列定义 https://html.spec.whatwg.org/multipage/webappapis.html#task-queue:

事件循环有一个或多个任务队列。任务队列是一组任务。

总而言之,规范只要求每个事件循环至少有一个任务队列。他们不会详细说明任务队列,而是使用任务来源,用户代理(UA)将链接到任何内容任务队列他们希望以自己认为合适的方式进行,只要每个任务任务源均按顺序执行。

有许多任务来源例如,在 HTML 规范中使用这是通用列表 https://html.spec.whatwg.org/multipage/webappapis.html#generic-task-sources:task-source,但每个规格都可以定义自己的,就像消息接口 https://html.spec.whatwg.org/multipage/web-messaging.html#port-message-queue,其中每个消息端口对象将有自己的任务源! (意味着 UA 可以映射这些消息中的每一个任务源到不同的任务队列).

获取所有的详细列表任务来源这实际上是不可能的,也不是很有用,因为它们实际上可能都以相同且唯一的方式结束任务队列.


我们需要查看的规格的另一个非常重要的部分是事件循环处理模型 https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model:event-loop.

该算法定义了事件循环在每次迭代时应经历的所有步骤。
乍一看有点复杂,而且随着时间的推移,它并没有变得简单,因为越来越多的上下文都遵循这个模型,需要处理非常不同的问题(看着你在 Worker 中的 OffscreenCanvas...).

但是,对于我们在这里感兴趣的内容,让我们假设它很简单并且我们处于 Window 上下文中。

第一步 https://html.spec.whatwg.org/multipage/webappapis.html#step1任务优先级是由规范设计的:

Let 任务队列是事件循环的任务队列之一,以实现定义的方式选择[...]

就在这里,他们对 UA 说,他们有权选择任务队列从中选择下一个任务。这意味着,例如,如果他们有专门的任务队列为了用户交互任务源,另一个只是为了网络任务源,并且两者都包含等待的任务,那么他们可以自由选择他们喜欢先运行的任务。

Now regarding the rendering, if we look how the processing model goes after this task is executed, all microtasks are too and a bunch of measurements are made, we see that at step 11, they should update the rendering https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering. That's actually part of all event loop's iterations (in a Window context), but the first steps of this algorithm is to define if this was indeed a rendering frame or not, meaning that most of the time it will just early exit without doing anything.
When it is a rendering frame though, it has to perform all the rendering steps, as part of the event loop iteration, i.e maybe after a normal task has been executed.
So from the specs point of view, we can't really talk about prioritization here, it's just one part of every event loop iteration, just like the microtask checkpoint, it doesn't go back to the step 1 where they can pick what task to execute, they are forced to execute that part of the event loop. Though technically, in the rendering steps the UA is also the one responsible to determine when it has a "rendering opportunity", so if they want, they can actually set up that prioritization.

所以对于我们网络作者来说,这意味着是的,我们可以拥有requestAnimationFrame在 a 之前回调触发setTimeout(fn, 0)一项(或任何其他任务),至少在调用此任务的一项任务的情况下requestAnimationFrame()方法本身在 a 的开头执行渲染帧.

这实际上可能经常发生,这里有一个小片段,应该可以使它在 Firefox 中非常可靠地发生,有时在 Chrome 中:

/*
  In latest FF and Chrome browsers, UI events like mousemove are being throttled by the UA.
  (as recommended by the specs)
  They make the limit rate match the one of the screen-refresh, like resize or scroll events.
  However, at least in Firefox they don't make it part of the 'update the rendering' algorithm,
  but execute it as a normal task.
  So a 'mousemove' event in this browser actually gives us accesss to the first step of a 'rendering frame'.
  
  This simple snippet tries to demonstrate that,
  if successful, "rAF" should always be logged first.
*/
onmousemove = (evt) => {
  console.clear();
  setTimeout( () => console.log( 'timeout' ), 0 );
  requestAnimationFrame( () => console.log( 'rAF' ) );
};
move your mouse over the frame

现在我们可以回答您的所有观点:

1) 渲染回调被赋予最高优先级。 这是真的吗?

正如我们刚刚演示的那样,事实并非如此,即使渲染回调可能会在与调度它们的任务相同的事件循环迭代中执行,我们也不能在这里真正讨论优先级。

2)渲染队列是否作为单独的队列存在,或者是渲染回调的别名?

规格,不要定义任何特殊的任务队列,但是没有任务源用于渲染。这更新渲染图 https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering算法是由许多要执行的不同任务组成的,其中存在运行动画帧回调 https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model:run-the-animation-frame-callbacks-2命令,您可能指的是。但这些回调存储在 Map 中,而不是队列中。

3)渲染哪些回调?当我进行任何重绘时,都会进行渲染回调

一切都在更新渲染图 https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering,但您可能想关注之后发生的事情step 5,因为之前只是一些检查。

4)是否还有其他类型的队列?如果有,我可以在哪里阅读有关它们的信息?

正如已经说过的,规格并没有定义任务队列, and 任务来源定义过于松散,无法给出完整的列表。

但请记住,所有这些都是从规格的角度来看的。实施者可能在很多方面偏离该模型,并且该模型本身足够宽松,可以允许一大堆不同的设置。

作为一个例子,我想向您指出火狐浏览器问题 https://bugzilla.mozilla.org/show_bug.cgi?id=1270059,其中介绍了一个非常有趣的案例:
他们想要拥有setTimeout回调的优先级低于其他任务,但仅在页面加载时。为此,他们确实创建了一个新的任务队列,专门用于这种情况。
现在,在火狐浏览器中, setTimeout回调的优先级低于其他任务,但仅在页面加载时:

function test() {
  setTimeout( () => console.log('timeout'));
  onmessage = (evt) => console.log('message');
  postMessage('', '*');
}
console.log('at page load');
test();

setTimeout( () => {
  console.log('after page load');
  test();
}, 1000 );

/* results in Firefox:
at page load
message
timeout
after page load
timeout
message

Chrome will always print "message" first, but because they have a 2ms min timeout on setTimeout
*/

另一件需要注意的事情是可能即将到来的优先postTask API https://github.com/WICG/main-thread-scheduling/blob/master/PrioritizedPostTask.md,我们已经可以在 Chrome 中使用它了#enable-experimental-web-platform-features标志,并且暴露了scheduler.postTask(fn, priority)方法,它允许我们控制任务的优先级。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

事件循环中有哪些类型的队列? 的相关文章

随机推荐

  • XSD 中禁止原始数据类型的空元素

    我在处理 Web 服务响应时遇到 Apache CXF 解析错误 归根结底是返回一个空元素
  • 如何在下载时开始播放AVAudioPlayer?

    我在某个 URL 处有一个 mp3 曲目http mysite com MP3 track1 mp3 http mysite com MP3 track1 mp3 使用 NSURLConnection 和 NSDocumentDirecto
  • 如何使用操作栏显示库存全景活动

    需要帮助来解决我最近几天以来尝试做的事情 我正在尝试使用 Google Panorama API 打开图像 Override public void onConnected Bundle bundle Panorama PanoramaAp
  • 为什么int a=1左移31位再右移31位变成-1

    given int a 1 00000000000000000000000000000001 我所做的只是 a a lt lt 31 gt gt 31 我假设a应该还是1在这句话之后 我认为没有任何改变 然而事实证明 1 111111111
  • Raspberry Pi RPi.GPIO 错误并带有威胁回调

    我被 Python 包中的 wait for edge 函数困住了RPi http sourceforge net p raspberry gpio python wiki Inputs 我为 GPIO 下降添加了多个事件检测 只要回调函数
  • 是否可以在非响应式网站中加载响应式 iframe?

    在您将其标记为重复之前 让我告诉您 这并不是要调整 iframe 的大小 而且我不期望得到这样的答案 使 iframe 响应式 https stackoverflow com questions 17838607 making an ifr
  • 使用 Scala actor 的客户端-服务器示例

    实施以下示例的最佳方法是什么 Actor server收到Requests 处理它们 创建一个新的Response对于每个Request并发送Response后退 到Request sender Actor client sends Req
  • Tensorflow 中的 while_loop 错误

    我尝试使用while 循环 in 张量流 但是当我尝试返回目标时output从 while 循环中可调用 它给了我一个错误 因为形状每次都会增加 输出应包含 0 或 1 值 基于data值 输入数组 如果data值大于5返回1否则返回0 返
  • Base64:无效长度必须是四的倍数:颤振错误

    我获得了图像 Base64 编码的图像数据 但我获得的其中一张图像未上传 并给出了以下形式的错误 无效长度必须是四的倍数 另外 我的其他图像出现一会儿然后消失一会儿 他们来了又走 这个问题有解决办法吗 Widget image String
  • 在 ASP.NET MVC 中扩展 HiddenFor 模板

    我想Html HiddenFor可以使用类似的模板Html DisplayFor or Html EditorFor 不幸的是该方法不接受TemplateName和其他人一样 我知道 解决方法是使用具有 HiddenFors 的 Displ
  • iOS AirPlay:只有当镜像打开时,我的应用程序才会收到外部显示器的通知?

    我正在尝试在我的应用程序中启用 AirPlay 支持 我不做视频 我想将外部显示器用作 第二个显示器 我的问题是 如果我从 AirPlay 按钮中选择 AppleTV 我的应用程序不会收到通知 我的应用程序唯一收到通知的时间是当我离开应用程
  • Intent.ACTION_PICK 的行为不同

    我正在使用以下代码从图库中选择图像 当我用三星 Galaxy S4 测试它时 它直接进入图库 这正是我真正想要的 但是 当我在 LG Optimus II 设备上测试我的代码时 它显示一个对话框 提供选择图库或图片的选项 换句话说 它又增加
  • WIX 安装程序工具集 - SQL Server 和 IIS 快速安装 [已关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我有带有一些自定义 UI 屏幕的 WIX 安装程序 其中有一个自定义 UI 屏幕 上面有两个单选按钮 我
  • 使唯一的键大小写不敏感

    这是我使用 mysql 5 时的 mysql 表模式 Table structure for table DATA USER ROLE DROP TABLE IF EXISTS DATA USER ROLE 40101 SET saved
  • 如何在运行 powershell 进程时阻止 Windows 10 计算机进入睡眠/休眠状态?

    我有一个 powershell 进程 它从远程服务器读取记录并将其复制到本地数据库中 运行时 可能会运行 8 12 小时 如何防止计算机在此期间关闭 或进入睡眠 休眠模式 我知道我可以调整 电源和睡眠设置 以将计算机设置为从不睡眠 但这不是
  • ElementTree 和 unicode

    我在 xml 文件中有这个字符
  • 使用 flutter 的带有每日步数计数器的计步器

    我正在尝试使用 flutter 构建一个基本的健身应用程序 该应用程序有两个主要功能 每日步数计数器 历史数据图表 每天的步数 我用计步器插件 https pub dev packages pedometer从手机的传感器检索数据 我的问题
  • 处理 Kafka 流中的异常

    已经浏览了多个帖子 但其中大多数与处理错误消息相关 而不是处理它们时的异常处理 我想知道如何处理流应用程序收到的消息并且处理消息时出现异常 异常可能是由于多种原因造成的 例如网络故障 RuntimeException 等 有人可以建议什么是
  • 当 div (ng) 禁用时 ng-click 仍然会触发

    问题是ng click适用于这样的事件如果cancelTicket false它仍然在燃烧ng click 我怎样才能阻止呢 div class btn block save changes padding 10 style display
  • 事件循环中有哪些类型的队列?

    我面临着提及render queue在不同的文章中 example https blog usejournal com welcoming javascript 57e1051d9d example https medium com ati