Event Loop：事件循环 - 版本历史

Eijux：/* 一个有意思的例子 */

2023-04-17T23:31:27Z

一个有意思的例子

←上一版本		2023年4月18日 (二) 07:31的版本
第273行：		第273行：
	JavaScript 是没有一个 WebAPIs 结构的，网上文章图片展示的 WebAPIs 大概是指那些任务来自于 WebAPI，但是这种描述并不准确。		JavaScript 是没有一个 WebAPIs 结构的，网上文章图片展示的 WebAPIs 大概是指那些任务来自于 WebAPI，但是这种描述并不准确。

	=== <span style="color: green">'''[[~~变量、词法作用域、闭包~~#一个有意思的例子 \| 一个有意思的例子]]'''</span> ===		=== <span style="color: green">'''[[变量、作用域、闭包#一个有意思的例子 \| 一个有意思的例子]]'''</span> ===

	== 写在后面 ==		== 写在后面 ==

2023年4月17日 (一) 23:26 Eijux

2023-04-17T23:26:35Z

←上一版本		2023年4月18日 (二) 07:26的版本
第245行：		第245行：
	'''语法：'''		'''语法：'''
	: <syntaxhighlight lang="JavaScript">queueMicrotask(() => {/* ... */});</syntaxhighlight>		: <syntaxhighlight lang="JavaScript">queueMicrotask(() => {/* ... */});</syntaxhighlight>


	'''示例：'''		'''示例：'''

2023年4月17日 (一) 23:26 Eijux

2023-04-17T23:26:02Z

2023年4月17日 (一) 23:22 Eijux

2023-04-17T23:22:42Z

←上一版本		2023年4月18日 (二) 07:22的版本
第108行：		第108行：
	# '''Worklet agent'''：包含了一个 WorkletGlobalScope 对象；		# '''Worklet agent'''：包含了一个 WorkletGlobalScope 对象；


	~~====“执行上下文”与“执行上下文栈”<ref>参考：~~
	~~# [https://juejin.cn/post/6844903682283143181 《<nowiki>[译]</nowiki> 理解 JavaScript 中的执行上下文和执行栈》]~~
	~~# [https://juejin.cn/post/6945240902625394718 《你真的了解执行上下文吗？》]~~
	~~</ref>====~~
	JavaScript 代码都需要允许在相应的“执行上下文”中：“执行上下文”用于追踪运行时执行的代码，而“执行上下文栈”（调用栈）用于管理“执行上下文”。

	~~1、每个脚本、函数的“执行”都会创建一个新的“执行上下文”；~~
	~~2、函数的“执行过程”就对应着：“执行上下文”在“调用栈”中的“'''入栈'''”（开始执行）、“'''出栈'''”（执行完毕）操作。~~

	~~执行上下文一共有三种类型：~~
	~~# '''全局执行上下文'''：任何不在函数内部的代码都在全局上下文中。~~
	~~#* 它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。~~
	~~#* 一个程序中只会有一个全局执行上下文。~~
	~~# '''函数执行上下文'''：每当一个函数被调用时, 都会为该函数创建一个新的上下文。~~
	~~#* 每次被调用都会创建一个新的执行上下文。~~
	~~# '''eval执行上下文'''：使用“eval方法”时创建。~~

	== Event Loop<ref name="HTML-Standard"/> ==		== Event Loop<ref name="HTML-Standard"/> ==

Eijux：/* 补充内容 */

2023-04-15T10:38:28Z

补充内容

@@ 第217行： / 第217行： @@
   对于说法：“微任务 -> 渲染 -> 宏任务”，从代码运行结果来看似乎没问题，其实忽略了一点“'''script 脚本本身也是一个任务（宏任务）'''”。
-== 补充内容 ==
+== 关于：Microtasks ==
 === 到底什么是“Microtasks”？ ===
@@ 第289行： / 第283行： @@
 Regular timeout callback has run
 </syntaxhighlight>
 == 写在后面 ==

Eijux：/* 写在后面 */

2023-03-24T23:51:33Z

写在后面

←上一版本		2023年3月25日 (六) 07:51的版本
第302行：		第302行：


	~~那么，问题来了：~~		那么，问题来了<big>❓</big>

	1、Agent 与浏览器的“渲染进程”是否有重叠呢？ —— 虽然《HTML Standard》描述 Agent 是一个“idealized "thread"”		1、Agent 与浏览器的“渲染进程”是否有重叠呢？ —— 虽然《HTML Standard》描述 Agent 是一个“idealized "thread"”
第312行：		第312行：
	3、EventLoop 是由“渲染进程”中的某个线程实现吗？		3、EventLoop 是由“渲染进程”中的某个线程实现吗？
	——【？？？】		——【？？？】


			网上并没有找到 Agent 相关的文章……

	== 参考 ==		== 参考 ==
	<references/>		<references/>

Eijux：/* 写在后面 */

2023-03-24T23:49:14Z

写在后面

←上一版本		2023年3月25日 (六) 07:49的版本
第308行：		第308行：

	2、Agent 的“执行线程”是不是就是“渲染进程”的“JS 引擎线程”呢？		2、Agent 的“执行线程”是不是就是“渲染进程”的“JS 引擎线程”呢？
	~~——【我个人理解就是一个玩意儿，虽然概念不同】~~		——【我个人理解就是一个玩意儿（还有[https://developer.mozilla.org/zh-CN/docs/Glossary/Main_thread 《MDN：“主线程”》]），虽然概念不同】

	3、EventLoop 是由“渲染进程”中的某个线程实现吗？		3、EventLoop 是由“渲染进程”中的某个线程实现吗？

Eijux：/* 补充内容 */

2023-03-24T23:38:48Z

补充内容

←上一版本		2023年3月25日 (六) 07:38的版本
第222行：		第222行：
	参考：[https://juejin.cn/post/6844903764202094606 一次弄懂Event Loop（彻底解决此类面试问题）]		参考：[https://juejin.cn/post/6844903764202094606 一次弄懂Event Loop（彻底解决此类面试问题）]

			P.S.
	JavaScript 是没有一个 WebAPIs 结构的，网上文章图片展示的 WebAPIs 大概是指那些任务来自于 WebAPI，但是这种描述并不准确。		JavaScript 是没有一个 WebAPIs 结构的，网上文章图片展示的 WebAPIs 大概是指那些任务来自于 WebAPI，但是这种描述并不准确。

第257行：		第257行：

	=== 为什么要支持“Microtasks”？<ref name="MDN"/> ===		=== 为什么要支持“Microtasks”？<ref name="MDN"/> ===
	微任务是另一种解决该问题的方案，通过将代码安排在下一次事件循环开始之前运行而不是必须要等到下一次开始之后才执行，这样可以<span style="color: blue">'''提供一个更好的访问级别'''</span>。		微任务是另一种解决该问题的方案，通过将代码安排在下一次事件循环开始之前运行而不是必须要等到下一次开始之后才执行，这样可以<span style="color: blue; font-size: 120%">'''提供一个更好的访问级别'''</span>。


第289行：		第289行：
	Regular timeout callback has run		Regular timeout callback has run
	</syntaxhighlight>		</syntaxhighlight>

			== 写在后面 ==
			通过查询 EventLoop 的资料，前后沟通了许多内容，浅浅地做个梳理，以及一点点未解。


			首先，EventLoop 的资料集中在《HTML Standard》，而《ECMAScript® 2023 Language Specification》中并无只言片语，说明：'''EventLoop 并非 ECMAScript 语言的特性，而是 Web 相关规范'''。 ——【<span style="color: blue">'''即，EventLoop 并不由“JS 引擎”提供，而是依靠浏览器实现'''</span> 】


			其次，Event Loop 提到了 ECMAScript 中的 Agent 概念：
			1、每个 Agent 都有且仅有一个关联的 Event Loop
			2、EventLoop 选取任务是交由 Agent 的“执行线程”（或者说：主线程）来执行


			那么，问题来了：

			1、Agent 与浏览器的“渲染进程”是否有重叠呢？ —— 虽然《HTML Standard》描述 Agent 是一个“idealized "thread"”
			——【？？？】

			2、Agent 的“执行线程”是不是就是“渲染进程”的“JS 引擎线程”呢？
			——【我个人理解就是一个玩意儿，虽然概念不同】

			3、EventLoop 是由“渲染进程”中的某个线程实现吗？
			——【？？？】

	== 参考 ==		== 参考 ==
	<references/>		<references/>

Eijux：/* Event Loop */

2023-03-24T22:48:57Z

Event Loop

←上一版本		2023年3月25日 (六) 06:48的版本
第137行：		第137行：
	<span style="color: green">'''事件循环不一定对应于“实现线程”（注：implementation threads，即“浏览器线程”）。例如，可以在单个线程中协同调度多个窗口事件循环。'''</span>		<span style="color: green">'''事件循环不一定对应于“实现线程”（注：implementation threads，即“浏览器线程”）。例如，可以在单个线程中协同调度多个窗口事件循环。'''</span>

	However, for the various worker agents that are allocated with [[CanBlock]] set to true, the JavaScript specification does place requirements on them regarding forward progress, which effectively amount to requiring dedicated per-agent threads in those cases.		However, for the various worker agents that are allocated with <nowiki>[[CanBlock]]</nowiki> set to true, the JavaScript specification does place requirements on them regarding forward progress, which effectively amount to requiring dedicated per-agent threads in those cases.
	然而，对于 <nowiki>[[CanBlock]]</nowiki> 设置为 true 的各种 worker agents，JavaScript 规范确实对它们提出了关于“forward progress？”的要求，在这些情况下，这实际上相当于需要专用的每个代理线程。		然而，对于 <nowiki>[[CanBlock]]</nowiki> 设置为 true 的各种 worker agents，JavaScript 规范确实对它们提出了关于“forward progress？”的要求，在这些情况下，这实际上相当于需要专用的每个代理线程。

Eijux：/* Event Loop */

2023-03-24T22:48:34Z

Event Loop

←上一版本		2023年3月25日 (六) 06:48的版本
第135行：		第135行：

	Event loops do not necessarily correspond to implementation threads. For example, multiple window event loops could be cooperatively scheduled in a single thread.		Event loops do not necessarily correspond to implementation threads. For example, multiple window event loops could be cooperatively scheduled in a single thread.
	~~事件循环不一定对应于“实现线程”（implementation~~ threads，即“浏览器线程”）。例如，可以在单个线程中协同调度多个窗口事件循环。		<span style="color: green">'''事件循环不一定对应于“实现线程”（注：implementation threads，即“浏览器线程”）。例如，可以在单个线程中协同调度多个窗口事件循环。'''</span>

	However, for the various worker agents that are allocated with [[CanBlock]] set to true, the JavaScript specification does place requirements on them regarding forward progress, which effectively amount to requiring dedicated per-agent threads in those cases.		However, for the various worker agents that are allocated with [[CanBlock]] set to true, the JavaScript specification does place requirements on them regarding forward progress, which effectively amount to requiring dedicated per-agent threads in those cases.

←上一版本		2023年4月18日 (二) 07:26的版本
第71行：		第71行：
	::# [https://html.spec.whatwg.org/multipage/webappapis.html#agents-and-agent-clusters 《HTML Standard》：“Agents and agent clusters”]		::# [https://html.spec.whatwg.org/multipage/webappapis.html#agents-and-agent-clusters 《HTML Standard》：“Agents and agent clusters”]
	::# [https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth MDN：《深入：微任务与 Javascript 运行时环境》]		::# [https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth MDN：《深入：微任务与 Javascript 运行时环境》]
	::# [https://github.com/Lawliet01/everyone-can-read-spec/blob/main/8.execution-environment.md ~~【人人都能读标准】8~~.~~可视化JavaScript的运行环境：agents、执行上下文、Realm~~]</ref> ===		::# [https://github.com/Lawliet01/everyone-can-read-spec/blob/main/8.execution-environment.md 《【人人都能读标准】8.可视化JavaScript的运行环境：agents、执行上下文、Realm》]</ref> ===

	从概念上讲，<big><span style="color: blue; font-size: 120%">'''代理（Agent）'''</span></big> 是一个独立于体系结构、理想化的“线程”，每个 ECMAScript 程序都必须在其中运行。		从概念上讲，<big><span style="color: blue; font-size: 120%">'''代理（Agent）'''</span></big> 是一个独立于体系结构、理想化的“线程”，每个 ECMAScript 程序都必须在其中运行。
第78行：		第78行：

	Agent 包括了：		Agent 包括了：
	# '''一组执行上下文（a set of execution contexts）'''：即，一组可执行、待执行的上下文		# '''一组执行上下文（a set of execution contexts）<ref name="execution_context">参考：【'''[[JS 执行过程：执行上下文、词法环境]]'''】</ref>'''：即，一组可执行、待执行的上下文
	# '''执行上下文栈（the execution context stack）'''：在一些文章中叫做“'''调用栈（call stack）'''”		# '''执行上下文栈（the execution context stack）'''<ref name="execution_context"/>：在一些文章中叫做“'''调用栈（call stack）'''”
	#* 栈顶的那个上下文被称为“运行中的执行上下文（running execution context）”		#* 栈顶的那个上下文被称为“运行中的执行上下文（running execution context）”
	# '''执行线程（an executing thread）'''：在一些文章中叫做“'''主线程（a main thread）'''”		# '''执行线程（an executing thread）'''：在一些文章中叫做“'''主线程（a main thread）'''”
第107行：		第107行：
	# '''Service worker agent'''：包含了一个 ServiceWorkerGlobalScope；		# '''Service worker agent'''：包含了一个 ServiceWorkerGlobalScope；
	# '''Worklet agent'''：包含了一个 WorkletGlobalScope 对象；		# '''Worklet agent'''：包含了一个 WorkletGlobalScope 对象；


	== Event Loop<ref name="HTML-Standard"/> ==		== Event Loop<ref name="HTML-Standard"/> ==

Event Loop：事件循环 - 版本历史

Eijux：​/* 一个有意思的例子 */

2023年4月17日 (一) 23:26 Eijux

2023年4月17日 (一) 23:26 Eijux

2023年4月17日 (一) 23:22 Eijux

Eijux：​/* 补充内容 */

Eijux：​/* 写在后面 */

Eijux：​/* 写在后面 */

Eijux：​/* 补充内容 */

Eijux：​/* Event Loop */

Eijux：​/* Event Loop */

Eijux：/* 一个有意思的例子 */

Eijux：/* 补充内容 */

Eijux：/* 写在后面 */

Eijux：/* 写在后面 */

Eijux：/* 补充内容 */

Eijux：/* Event Loop */

Eijux：/* Event Loop */