哪个队列与 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 关联? 的相关文章

  • Angular - 如何从 DOM 中删除我使用过 $compile 的元素?

    我需要的是两个 ng views 的功能 因为我不能 我想更改某些内容的innerHTML 并编译它 我遇到的问题是 当我再次更改内容时 我可以编译 但是 Angular 是否会自行删除绑定 或者我必须手动执行此操作 如果是这样 怎么办 编
  • 使用 jquery 远程图像属性

    目前我正在尝试获取远程图像宽度 高度 我正在开发一个链接共享模块 就像当你在 Facebook 上粘贴链接时 你可以看到标题 描述和图像 所以我尝试使用 php getimagesize 来获取图像宽度 高度 但速度非常慢 所以我正在考虑使
  • 将鼠标悬停时的鼠标光标更改为锚状样式

    如果我将鼠标悬停在div鼠标光标将更改为 HTML 锚点中的光标 我怎样才能做到这一点 假设你的div has an id myDiv 将以下内容添加到您的 CSS 中 这cursor pointer指定光标应与用于锚点 超链接 的手形图标
  • Javascript 函数查找数字的倍数

    创建一个名为的函数multiplesOf 它将接受两个参数 第一个参数是数字数组 第二个参数是数字 该函数应返回一个新数组 该数组由参数数组中的每个数字组成 该数字是参数数字的倍数 So multiplesOf 5 6 7 8 9 10 3
  • 以编程方式填写reactjs表单

    我正在编写一个用户脚本 但无法填写由reactjs制作的表单 我的代码 document querySelector id username value email protected cdn cgi l email protection
  • 引导程序提前输入未填充承诺的响应

    我的引导程序预输入如下
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端?

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 如何用另一个响应替换窗口的 URL 哈希?

    我正在尝试使用替换方法更改哈希 URL document location hash 但它不起作用 function var anchor document location hash this returns me a string va
  • JavaScript 相对路径

    在第一个 html 文件中 我使用了一个变量类别链接 var categoryLinks Career prospects http localhost Landa DirectManagers 511 HelenaChechik Dim0
  • 如何使用asm.js进行测试和开发?

    最近我读到asm js规范 看起来很酷 但是是否有任何环境 工具来开发和测试这个工具 这还只是处于规范阶段吗 您可以尝试使用 emscripten 和 ASM JS 1 并从侧分支在 firefox 构建中运行它 有关 asm js 的链接
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • 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 有它自己的队列 那么为什么这个队列从未在任何地方被提及 当我们谈