哪个队列与 requestAnimationFrame 关联?

2023-12-19

今天我在接受采访时被问到这个问题。我无法回答这个问题,面试官说有一个特殊的队列用于 requestAnimationFrame 回调。但我找不到任何这方面的信息。

如果 rAF 有它自己的队列,那么为什么这个队列从未在任何地方被提及?当我们谈论事件循环时,我们只提到宏任务队列和微任务队列?


当我们谈论事件循环时,我们只提到宏任务队列和微任务队列?

首先,规范中没有提到“宏观”任务,只是tasks https://html.spec.whatwg.org/multipage/webappapis.html#concept-task and 微任务 https://html.spec.whatwg.org/multipage/webappapis.html#microtask(进而回调 https://webidl.spec.whatwg.org/#idl-callback-interfaces,稍后会详细介绍)。

然后,几乎每一个任务源 https://html.spec.whatwg.org/multipage/webappapis.html#task-source有自己的任务队列 https://html.spec.whatwg.org/multipage/webappapis.html#task-queue在现代浏览器中,尽管目前还没有have到。所以不只是两个队列,一个是微任务队列 https://html.spec.whatwg.org/multipage/webappapis.html#microtask-queue另一个为所有tasks, 有很多的任务队列 (each MessagePort实例可以有自己的任务队列)。这允许每个人有不同的优先级任务源。例如,用户界面事件可以在网络事件之前得到处理。

But requestAnimationFrame callbacks are not even queued in a task queue. This method schedules a callback that (in the specs1) isn't invoked from a task, but from a special place in the event loop called "update the rendering" https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering, itself visited only once in a while (generally when the monitor sends a VSync signal and the document is active), which will also fire scroll and resize events, Web Animation updates, ResizeObserver callbacks, etc. and the rendering of the page.

重要的是,从概念上讲,所有这些步骤都是not执行于tasks,因为这意味着任何task从这些回调中排队的函数不会在下一次渲染之前执行,同时仍然确保ResizeObserver回调安排从resize例如事件,将在之前调用。

动画帧回调存储在一个有序地图 https://infra.spec.whatwg.org/#ordered-map,称为动画帧回调图 https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#list-of-animation-frame-callbacks。这不是一个queue本身,因为我们可以通过“取消”回调cancelAnimationFrame()方法。这也允许获取开头的所有键运行动画帧回调 https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#run-the-animation-frame-callbacks算法本身允许从这样的回调安排新的回调到下一个动画帧,而不会永远阻塞事件循环(如果它是一个队列,算法将不断地调用新的回调,就像在微任务检查点中一样)。

但这么多细节有点迂腐,除非你真的很喜欢这类东西,否则你不需要知道更多

  • 大多数本机事件和 Web API 回调都在任务队列中排队,这些任务队列在事件循环开始时通过优先级系统进行访问,
  • 每次调用回调后都会执行所有微任务,如果从微任务中排队微任务,您可能会陷入事件循环,
  • 一些与渲染相关的本机事件和动画帧在事件循环中自己的位置进行处理。

尽管如此,我相信了解这种特殊的情况还是有好处的更新渲染图事件循环中的步骤,它与其他排队任务不同,因为它不参与任务优先级系统。我经常读到它具有更高的优先级,但在我看来,这样说是错误的,并且考虑到我们很快就会有 https://wicg.github.io/scheduling-apis/真正控制一些任务的优先级,它会变得更加重要。它还有助于理解何时执行样式重新计算以及与(同步)DOM 更新的关系,以及与浏览器中渲染相关的其他内容。但是,如果您不申请涉及浏览器渲染细节的职位,也许他们只是期望(IMO 非常糟糕)口语“在渲染队列中”,就像正在使用的那样。在P·罗伯茨的放大镜 http://latentflip.com/loupe/.

1: Firefox, for one, actually queues tasks even for these, but they do it in a way it's not observable.

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

哪个队列与 requestAnimationFrame 关联? 的相关文章

  • 类型错误:类扩展值未定义不是函数或 null

    尝试创建这些实体时出现以下错误 TypeError Class extends value undefined is not a function or null 我假设这与循环依赖有关 但是在使用表继承和一对多关系时应该如何避免这种情况
  • 使用 jQuery Select2 清除下拉菜单

    我正在尝试使用奇妙的方式以编程方式清除下拉菜单Select2 http ivaynberg github com select2 图书馆 使用 Select2 远程 ajax 调用动态填充下拉列表query option HTML
  • 如何让Gmail像加载进度条一样

    我想在页面的中心和顶部创建一个像 Gmail 一样的加载进度条 并适用于所有浏览器 这是基本代码
  • Mapbox GL 中的 MaxBounds 和自定义非对称填充

    我有一个 Mapbox GL JS 应用程序 在地图上显示一些小部件 为了确保地图上的任何内容都不会被它们隐藏 我使用以下命令添加了一些填充map setPadding 这是一个不对称的 在我的例子中左边比右边大 它按预期工作 例如fitB
  • 如何使 d3 饼图响应式?

    我有一个 PIE 图表 它工作正常 但我无法使其具有响应能力和可调整大小 我需要它与移动浏览器和 iPad 等兼容 div div
  • 设置双指缩放时精确的滚动位置

    我正在创建一个地图应用程序 它将标记图像放置在画布上并滚动到它 我正在使用浏览器的捏缩放和滚动来放大 缩小地图 然而 我注意到有一些奇怪的行为 我想知道如何解决它 这有点难以解释 但我们开始吧 假设您处于网页的标准缩放级别 无法进一步缩小
  • 在javascript中访问函数内的实例变量?

    如何以最简单的方式访问函数内的实例变量 function MyObject Instance variables this handler Methods this enableHandler function var button doc
  • 此页面上的脚本导致 ie 运行缓慢

    问题就在标题中 IE 行为异常 并说有一个脚本运行缓慢 FF 和 Chrome 没有这个问题 我怎样才能找到问题所在 那个页面有很多JS 手动检查不是一个好主意 EDIT 这是我正在处理的一个项目的页面 但我需要一个工具来查找问题 End
  • karma/jasmine 控制台更详细的测试结果

    我使用 Karma 和 Jasmine 进行 javascript 单元测试 假设我有一个失败的测试 如下所示 expect objectA toEqual expectedObjectA 当失败时 我看到控制台上转储了两个对象 并显示一条
  • 如何在 Web 服务器上设置 gzip 压缩?

    我有一个嵌入式网络服务器 总共有 2 兆空间 通常 您使用 gzip 文件对客户端有利 但这会节省我们在服务器上的空间 我读到你可以只 gzip js 文件并将其保存在服务器上 我在 IIS 上测试过 但没有任何运气 为了使这项工作成功 我
  • 当我多次调用 requestAnimationFrame 时会发生什么

    我的意思是一次调用多个具有相同功能的 requestAnimationFrame function Draw DoSomething function AFunc prepare something requestAnimationFram
  • 为什么我收到“在嵌套函数中通过 this 对类字段进行潜在无效的引用访问”错误

    在普通 JS 中 我的代码可以正常工作 对于这种情况 我想组件化我的Wall类应该在浏览器中显示用户上传的图像 同样 这在 vanilla JS 中正常工作 但在 JSX 中不起作用 我得到了一个potentially invalid re
  • webpack中动态加载外部模块失败

    我正在尝试建立以下架构 一个核心 React 应用程序 它具有一些基本功能 并且能够在运行时加载其他 React 组件 这些额外的 React 组件可以按需加载 并且它们在构建核心应用程序时不可用 因此它们不能包含在核心应用程序的捆绑包中
  • 如何为我的整个 Node.js 应用程序使用相同的 MySQL 连接?

    我有一个app js 我从那里运行我的整个应用程序 在 app js 内部 我require许多文件中都有代码 对于每个文件 我都这样做 var mysql require mysql var mclient mysql createCon
  • 语法错误:意外的标记“?”在 repl.it 上用 JavaScript 制作不和谐机器人时 [重复]

    这个问题在这里已经有答案了 我收到错误 const token this client token this client accessToken SyntaxError Unexpected token Discord 机器人代码 con
  • 尝试使用 Javascript 解决对称差异

    我正在尝试找出对称的解决方案 使用 javascript 完成以下任务的差异 目标 接受未指定数量的数组作为参数 保留数组中数字的原始顺序 不删除单个数组中数字的重复项 删除数组中出现的重复项 因此 例如 如果输入是 1 1 2 6 2 3
  • ThreeJS 中阴影的奇怪行为

    所以我有一个 ThreeJS 场景 并且添加了一些球体 多材质 我还添加了定向光 this light new THREE DirectionalLight 0xFFFFFF 1 this light position set 2 10 2
  • Jwt 签名和前端登录身份验证

    我有这个特殊的 jwt sign 函数 Backend const token jwt sign id user id process env TOKEN SECRET expiresIn 1m res header auth token
  • 以角度访问窗口 TemplateUrl 内的范围

    我的模式有一个 windowTemplateUrl 如下 div class modal fade div class modal dialog div class modal content square btn div div div
  • 确定 Javascript 中的日期相等性

    我需要找出用户在 Javascript 中选择的两个日期是否相同 日期以字符串 xx xx xxxx 形式传递给该函数 这就是我需要的全部粒度 这是我的代码 var valid true var d1 new Date datein val

随机推荐

  • Django 发送 POST 请求时返回 403 错误

    当我使用以下 Python 代码向我的 Django 网站发送 POST 请求时 出现 403 Forbidden 错误 url http www sub example com values var test try data urlli
  • 停止 NSView 打印

    我在 Xcode 中有一个非常基本的 Mac 应用程序 带有一个分割视图 其中包含一个 PDFThumbnailView 和一个 PDFView 就像预览一样 除了将 PDF 加载到视图所需的代码之外 几乎没有任何 Swift 代码 但是
  • 通过 Intent 将对象作为 Parcel(带有文件描述符)发送会导致异常

    我正在尝试将 StatusBarNotifications 数组发送到我的另一个服务 所以我已经这样做了 服务延伸NotificationListenerService Override public void onNotification
  • 暴露给 VBA (COM) 的 C# 属性:运行时错误“424”:需要对象

    此 C 代码位于 NET 4 5 中ComVisible集会 C Code InterfaceType ComInterfaceType InterfaceIsDual Guid 22341123 9264 12AB C1A4 B4F112
  • 如何在设备处于横向时拍摄人像照片

    I am making a rather specialist camera app for a device which is physically always going to be held in a landscape orien
  • 读取 pom.xml 中的属性文件时出错

    我有一个示例属性文件 如下所示 样本 属性 language English site www google com login Login 我使用以下插件和目标将属性文件调用到我的 pom xml 中 属性 maven 插件和 读取项目属
  • 如何在chrome扩展中使用exportFunction?

    exportFunction function var document oldContentDocumentGetter call this if document interceptWindow document defaultView
  • 如何将库添加到 testImplementation 和 androidTestImplementation

    两者的 kotlin 库test and android tests 单元测试和 UI 测试 如果我将以下两行写为 build gradle 的一部分 它就可以正常工作 我的问题是 这是添加在测试和 Android 测试中使用的库的正确方法
  • Fisher 测试错误:LDSTP 太小

    input NN lt c 359 32 JJ lt c 108 13 NNS lt c 103 15 VBN lt c 95 9 RB lt c 63 11 NNP lt c 56 0 VBG lt c 55 10 IN lt c 38
  • 跳过 reStructuredText 中的标题级别

    是否可以通过某种方式跳过 RestructedText 中的标题级别 例如 给定 PART Chapter Section Subsection Subsubsection Paragraph Another section Another
  • SSN 的正则表达式 [重复]

    这个问题在这里已经有答案了 我在 C 中有一个方法 它表示 FormatSSN 接受字符串格式的 SSN 并替换破折号 我的意思是我希望 SSN 的格式为 XXX XX XXXX 我想编写一个正则表达式来确保 SSN 采用我提到的格式 谁能
  • 如何获取http.Request中的URL

    我建立了一个 HTTP 服务器 我使用下面的代码来获取请求 URL 但它没有获取完整的 URL func Handler w http ResponseWriter r http Request fmt Printf Req s s r U
  • 图像在 PictureBox 中旋转

    正如问题所暗示的 当我将图像加载到图片框 使用对话框 中时 它不会以其原始外观显示 在此屏幕截图中 左侧的图像是我加载到图片框 右侧 中的图像 Trying to know what causes this I draw an image
  • 我*必须*在 Silverlight WCF 客户端中使用 ObservableCollection 吗?

    当在 WCF 中访问 Silverlight 时 您会得到生成的代理可观察集合 http sweux com blogs psampaio index php 2009 04 28 an introduction to observable
  • 将 JSON 字符串转换为 HashMap

    我正在使用 Java 并且我有一个 JSON 字符串 name abc email id email protected cdn cgi l email protection email protected cdn cgi l email
  • 谷歌地图中的标记掉落事件?

    当用户在地图上放置标记时 我需要触发一个事件 我有代码可以让他们删除标记 但我不知道如何触发该事件 有小费吗 通过标记事件拖拽 您可以获得标记放置位置的纬度 这是你需要的吗 google maps event addListener Mar
  • 如何将 Access 数据库中的所有表导出到 Excel - 每个表一个工作表

    我有一个包含约 30 个表的 Access 数据库 如何将所有 30 个表格导出到 Excel 工作簿中的单独工作表中 我希望找到一些可以从 Access 中运行的 VBA VBS 代码来完成此任务 有任何想法吗 你应该能够做这样的事情 D
  • 删除两个方向的 n 行以及 sed 中的匹配项?

    在运行之前删除匹配项和两行 sed i bak e match 2d someCommonName txt 运行后删除匹配项和两行 sed i bak e match 2d someCommonName txt 但是删除匹配项 其后两行和其
  • WriteAsync 超时

    我尝试编写一个带有超时的简单异步写入代码 如下所示 并期望该函数在给定非常大的缓冲区和较小的 waitTime 的情况下抛出 TaskCanceledException 然而 这并没有发生 WriteAsync 将阻塞很多秒 直到写入完成
  • 哪个队列与 requestAnimationFrame 关联?

    今天我在接受采访时被问到这个问题 我无法回答这个问题 面试官说有一个特殊的队列用于 requestAnimationFrame 回调 但我找不到任何这方面的信息 如果 rAF 有它自己的队列 那么为什么这个队列从未在任何地方被提及 当我们谈