- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在不同的文章(example,example)中都提到了render queue
两位作者都说
render callback is given the highest priority
render queue
是否作为单独的队列存在?tasks from different task sources may be placed in different task queues
最佳答案
从HTML规范中,最重要的一点是在task-source definition中,我们可以阅读:
Per its source field, each task is defined as coming from a specific task source. For each event loop, every task source must be associated with a specific task queue.
Note
Essentially, task sources are used within standards to separate logically-different types of tasks, which a user agent might wish to distinguish between. Task queues are used by user agents to coalesce task sources within a given event loop.
Example
For example, a user agent could have one task queue for mouse and key events (to which the user interaction task source is associated), and another to which all other task sources are associated. Then, using the freedom granted in the initial step of the event loop processing model, it could give keyboard and mouse events preference over other tasks three-quarters of the time, keeping the interface responsive but not starving other task queues. Note that in this setup, the processing model still enforces that the user agent would never process events from any one task source out of order.
在 task queue definition中:
An event loop has one or more task queues. A task queue is a set of tasks.
综上所述,规范仅要求每个事件循环至少具有一个任务队列。他们将不再详细介绍任务队列,而是使用任务源,只要执行每个任务源中的任务,用户代理(UA)便会链接到他们希望的任何任务队列,只要他们认为合适即可。为了。
HTML规范中使用了许多任务源,例如 here is a list of the generic ones,但是每个规范都可以定义自己的任务源,就像 Message API一样,其中每个MessagePort对象都将拥有自己的任务源! (意味着UA可以将这些消息任务源中的每一个映射到不同的任务队列)。
不可能获得所有任务源的详尽列表,也不是真正有用的,因为它们实际上可能全部都位于相同且唯一的任务队列中。
我们需要查看的规格的另一个非常重要的部分是 event loop processing model。
该算法定义了事件循环在每次迭代中应执行的所有步骤。
乍看之下,它有点复杂,而且随着时间的流逝,它并没有得到简化,因为越来越多的上下文都遵循此模型,并且要处理的问题非常不同(请在Worker中查看OffscreenCanvas ...)。
但是,对于我们在这里感兴趣的内容,我们假设它很简单并且处于Window上下文中。
The first step是由规范设计任务优先级的地方:
Let taskQueue be one of the event loop's task queues, chosen in an implementation-defined manner [...]
就在这里,他们对UA表示,他们有权从哪个任务队列中进行选择以从中选择下一个任务。这意味着,例如,如果它们有一个专用于用户交互任务源的任务队列,而另一个仅用于网络任务源,并且都包含等待任务,则他们可以自由选择他们更喜欢先运行的任务。
现在关于渲染,如果我们看一下执行此任务后处理模型的运行方式,所有微任务也是如此,并进行了大量测量,我们看到在步骤11中,它们应该为 update the rendering。这实际上是所有事件循环迭代的一部分(在Window上下文中),但是此算法的第一步是定义这是否确实是渲染帧,这意味着在大多数情况下,它将不做任何事情就提前退出。
但是,当它是一个渲染框架时,它必须执行所有渲染步骤,作为事件循环迭代的一部分,即在执行正常任务之后。
因此,从规格的 Angular 来看,我们在这里不能真正谈论优先级,它只是每个事件循环迭代的一部分,就像微任务检查点一样,它不会返回到步骤1,他们可以选择什么任务为了执行,他们被迫执行事件循环的那一部分。尽管从技术上讲,在渲染步骤中,UA还是负责确定何时具有“渲染机会”的UA,因此,如果他们愿意,他们实际上可以设置优先级。
因此,对于我们的网络作者来说,是的,至少在一个调用了requestAnimationFrame
方法的任务本身在执行时,我们才可以在setTimeout(fn, 0)
一个(或其他任何任务)之前触发requestAnimationFrame()
回调。渲染帧的开始。
这实际上可能经常发生,这是一个小片段,应该可以使其在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) render callback is given the highest priority. Is it true?
正如我们刚刚演示的那样,虽然不是真的,尽管渲染回调可能会在与安排它们的任务相同的事件循环迭代中执行,但我们在这里不能真正讨论优先级。
2) Does render queue exist as separate queue or is it alias for render callbacks?
规范,没有定义任何特殊的任务队列,但是也没有用于渲染的任务源。 update the rendering算法由许多要执行的不同任务组成,并且其中包含您可能要引用的 run the animation frame callbacks命令。但是这些回调存储在Map中,而不是存储在队列中。
3) Which callbacks are render? As I take in any repaint is render callback
所有这些都在 update the rendering中,但是您可能要关注步骤5之后的内容,因为之前只是进行一些检查。
4) Are there any other types of queues and if there are where can I read about them?
如前所述,规范没有定义任务队列,并且任务源定义过于宽松,无法提供完整的列表。
但是请记住,所有这些都是从规范的 Angular 来看的。实现者可能会在许多方面偏离该模型,并且该模型本身过于宽松,无法进行一整套不同的设置。
例如,我想为您指出 Firefox issue,它引入了一个非常有趣的情况:
他们希望setTimeout
回调的优先级低于其他任务 ,但仅在页面加载时。为此,他们确实为此创建了一个新的任务队列。
现在,Firefox中的 ,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
*/
还有另一件事需要注意,就是传入的PrioritizedpostTask
API,我们已经可以在#enable-experimental-web-platform-features
标志下在Chrome中播放它了,它公开了scheduler.postTask(fn, priority)
方法,该方法允许我们控制任务优先级。
关于javascript - 事件队列中有哪些类型的队列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53627773/
我有一个 html 格式的表单: 我需要得到 JavaScript在value input 字段执行,但只能通过表单的 submit .原因是页面是一个模板所以我不控制它(不能有
我管理的论坛是托管软件,因此我无法访问源代码,我只能向页面添加 JavaScript 来实现我需要完成的任务。 我正在尝试用超链接替换所有页面上某些文本关键字的第一个实例。我还根据国家/地区代码对这些
我正在使用 JS 打开新页面并将 HTML 代码写入其中,但是当我尝试使用 document.write() 在新页面中编写 JS 时功能不起作用。显然,一旦看到 ,主 JS 就会关闭。用于即将打开的
提问不是为了解决问题,提问是为了更好地理解系统 专家!我知道每当你将 javascript 代码输入 javascript 引擎时,它会立即由 javascript 引擎执行。由于没有看过Engi
我在一个文件夹中有两个 javascript 文件。我想将一个变量的 javascript 文件传递到另一个。我应该使用什么程序? 最佳答案 window.postMessage用于跨文档消息。使
我有一个练习,我需要输入两个输入并检查它们是否都等于一个。 如果是 console.log 正则 console.log false 我试过这样的事情: function isPositive(fir
我正在做一个Web应用程序,计划允许其他网站(客户端)在其页面上嵌入以下javascript: 我的网络应用程序位于 http://example.org 。 我不能假设客户端网站的页面有 JQue
目前我正在使用三个外部 JS 文件。 我喜欢将所有三个 JS 文件合而为一。 尽一切可能。我创建 aio.js 并在 aio.js 中 src="https://code.jquery.com/
我有例如像这样的数组: var myArray = []; var item1 = { start: '08:00', end: '09:30' } var item2 = {
所以我正在制作一个 Chrome 扩展,它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件,您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 jav
我有 A、B html 和 A、B javascript 文件。 并且,如何将 A JavaScript 中使用的全局变量直接移动到 B JavaScript 中? 示例 JavaScript) va
我需要将以下整个代码放入名为 activate.js 的 JavaScript 中。你能告诉我怎么做吗? var int = new int({ seconds: 30, mark
我已经为我的 .net Web 应用程序创建了母版页 EXAMPLE1.Master。他们的 I 将值存储在 JavaScript 变量中。我想在另一个 JS 文件中检索该变量。 示例1.大师:-
是否有任何库可以用来转换这样的代码: function () { var a = 1; } 像这样的代码: function () { var a = 1; } 在我的浏览器中。因为我在 Gi
我收到语法缺失 ) 错误 $(document).ready(function changeText() { var p = document.getElementById('bidp
我正在制作进度条。它有一个标签。我想调整某个脚本完成的标签。在找到可能的解决方案的一些答案后,我想出了以下脚本。第一个启动并按预期工作。然而,第二个却没有。它出什么问题了?代码如下: HTML:
这里有一个很简单的问题,我简单的头脑无法回答:为什么我在外部库中加载时,下面的匿名和onload函数没有运行?我错过了一些非常非常基本的东西。 Library.js 只有一行:console.log(
我知道 javascript 是一种客户端语言,但如果实际代码中嵌入的 javascript 代码以某种方式与在控制台上运行的代码不同,我会尝试找到答案。让我用一个例子来解释它: 我想创建一个像 Mi
我如何将这个内联 javascript 更改为 Unobtrusive JavaScript? 谢谢! 感谢您的回答,但它不起作用。我的代码是: PHP js文件 document.getElem
我正在寻找将简单的 JavaScript 对象“转储”到动态生成的 JavaScript 源代码中的最优雅的方法。 目的:假设我们有 node.js 服务器生成 HTML。我们在服务器端有一个对象x。
我是一名优秀的程序员,十分优秀!