Merge pull request #77 from GuoXiCheng/dev-c

add event-loop md

src/.vitepress/sidebar.yaml

@@ -19,6 +19,8 @@
             link: /javascript/ecma-script/javascript-engine/scope-chain
           - text: this 关键字
             link: /javascript/ecma-script/javascript-engine/this-keyword
+          - text: 事件循环
+            link: /javascript/ecma-script/javascript-engine/event-loop
       - text: 变量声明
         link: /javascript/ecma-script/variable-declaration
       - text: 比较算法

src/index.md

@@ -23,8 +23,16 @@ import MarkMap from './MarkMap.vue';
             - [块级作用域](javascript/ecma-script/javascript-engine/scope#块级作用域)
           - [作用域链](javascript/ecma-script/javascript-engine/scope-chain)
           - [this 关键字](javascript/ecma-script/javascript-engine/this-keyword)
-        - [变量声明](javascript/ecma-script/variable-declaration)
-        - [比较算法](javascript/ecma-script/comparison-algorithm)
+          - [事件循环](javascript/ecma-script/javascript-engine/event-loop)
+        - 变量声明
+          - [var](javascript/ecma-script/variable-declaration#var)
+          - [let](javascript/ecma-script/variable-declaration#let)
+          - [const](javascript/ecma-script/variable-declaration#const)
+        - 比较算法
+          - [==](javascript/ecma-script/comparison-algorithm#松散相等)
+          - [===](javascript/ecma-script/comparison-algorithm#严格相等)
+          - [SameValue](javascript/ecma-script/comparison-algorithm#samevalue)
+          - [SameValueZero](javascript/ecma-script/comparison-algorithm#samevaluezero)
         - [浅拷贝和深拷贝](javascript/ecma-script/shallow-copy-and-deep-copy)
         - 表达式与操作符
           - [条件访问表达式（?.）](javascript/ecma-script/expression-and-operator/conditional-access-expression)
@@ -57,9 +65,7 @@ import MarkMap from './MarkMap.vue';
           - [自定义迭代器](javascript/ecma-script/iterators-and-generators/custom-iterator)
           - [生成器](javascript/ecma-script/iterators-and-generators/generator)
         - JSON
-          - 什么是 JSON
-            - [介绍](javascript/ecma-script/json/what-is-json#介绍)
-            - [历史](javascript/ecma-script/json/what-is-json#历史)
+          - [什么是 JSON](javascript/ecma-script/json/what-is-json)
           - JSON 数据格式
             - [简单值](javascript/ecma-script/json/json-data-format#简单值)
             - [对象](javascript/ecma-script/json/json-data-format#对象)

src/javascript/ecma-script/javascript-engine/event-loop.md

@@ -0,0 +1,31 @@
+# 事件循环
+
+## 什么是事件循环
+
+事件循环机制是 JavaScript 实现非阻塞异步编程的核心原理。
+
+## 事件循环的执行过程
+
+::: details 参考代码
+
+```js
+console.log("Test Start");
+setTimeout(() => console.log("setTimeout"), 0);
+Promise.resolve("Promise").then((res) => console.log(res));
+console.log("Test End");
+
+// Test Start
+// Test End
+// Promise
+// setTimeout
+```
+
+:::
+
+首先以同步方式执行代码，然后事件循环将检查微任务队列。
+
+如果微任务队列不为空，则依次执行队列中的任务，直到队列被清空。
+
+微任务队列中的任务清空后，事件循环会从宏任务队列中取出一个任务执行。
+
+每执行完一个宏任务，事件循环会再次检查微任务队列，重复上述过程。