蓝桥杯-网络安全比赛（4）基础学习-JavaScript同步与异步、宏任务（MacroTask）与微任务、事件循环机制（MicroTask）

理解JavaScript的异步编程模型对于编写高效、健壮的Web应用程序至关重要。
在Web开发中，经常需要处理异步操作，如网络请求、定时器、文件读写等。
掌握同步和异步的概念，以及宏任务和微任务的处理顺序，可以帮助开发者更好地管理代码的执行流程，避免常见的并发问题，如竞态条件、死锁等。

---

同步与异步

同步和异步是描述 代码执行顺序 的概念，
而宏任务和微任务则是 在异步编程中用于管理任务 执行顺序和优先级的机制。

同步

同步（Synchronous）意味着代码按照顺序一行一行地执行，每一行代码必须等待上一行代码执行完毕才能继续执行。
在同步代码中，如果有某个操作耗时较长，例如读取大文件或发起网络请求，
那么整个程序将会等待这个操作完成，这可能导致程序的响应性变差，甚至造成阻塞。

例如 假设我们有一个同步函数，用于模拟一个耗时操作：：

function synTask() {  
    console.log('开始同步任务');  
      
    // 模拟耗时操作  
    for (let i = 0; i < 1e9; i++) {  
        // 空循环，不做任何实际操作  
    }  
      
    console.log('同步任务结束');  
}  
  
console.log('开始执行');  
synTask();  
console.log('继续执行');

输出顺序将会是：

开始执行  
开始同步任务  
同步任务结束  
继续执行

异步

异步（Asynchronous）编程允许我们在等待某个操作完成的同时，继续执行其他代码。
这样，程序不必一直等待耗时操作完成，从而提高了程序的响应性和效率。
在JavaScript中，异步操作通常通过回调函数、Promise、async/await等方式来实现。

例如 使用Promise实现的异步案例：

function asynTask() {  
    return new Promise((resolve, reject) => {  
        console.log('开始异步任务');  
          
        // 模拟异步操作，例如网络请求或定时器  
        setTimeout(() => {  
            console.log('异步任务结束');  
            resolve('任务完成');  
        }, 1000);  
    });  
}  
  
console.log('开始执行');  
asynTask().then(result => {  
    console.log('处理异步任务结果:', result);  
});  
console.log('继续执行');

输出顺序将会是：

开始执行  
开始异步任务  
继续执行  
异步任务结束  
处理异步任务结果: 任务完成

在这个例子中

1. asynTask函数返回一个Promise对象。
2. 我们使用setTimeout来模拟一个异步操作，这个操作将在1秒后完成。
3. 在异步操作完成之前，JavaScript引擎不会等待它，而是继续执行后面的代码。
4. 当异步操作完成后，我们通过调用resolve方法来解决Promise，并在.then方法中处理异步操作的结果。

宏任务

宏任务（MacroTask）是由宿主环境（如浏览器或Node.js）发起的，可以理解为每次执行栈执行的代码就是一个宏任务。
宏任务队列中存放着需要执行的宏任务，当主线程空闲时，会从宏任务队列中取出一个任务进行执行。

宏任务涵盖了诸如setTimeout、setInterval、Ajax请求、DOM事件等异步操作。这些操作不会被立即执行，而是被放入宏任务队列中，等待主线程空闲时再执行。
由于宏任务通常具有较低的优先级，因此它们可能会被推迟执行，直到没有其他更高优先级的任务需要处理。

微任务

微任务（MicroTask）则是由JavaScript引擎本身创建和调度的，它们在当前任务执行结束后立即执行。
微任务队列是一个与任务队列相互独立的队列，每个微任务都会添加到微任务队列的尾部，并且会按照顺序处理完队列中的所有任务。

微任务通常包括Promise的回调函数、MutationObserver的回调等。
这些微任务在当前宏任务执行完毕后立即执行，即使还有其他的宏任务在队列中等待。
这种机制使得微任务具有比宏任务更高的优先级。

事件循环

在JavaScript的事件循环中，宏任务和微任务共同决定了异步任务的执行顺序。
当主线程中的同步任务执行完毕，事件循环会开始处理异步任务。
它会优先检查微任务队列是否有任务需要执行，如果没有，再去宏任务队列检查是否有任务执行，如此往复。

基本流程

执行栈：JavaScript引擎有一个执行栈，用于同步地执行代码。每当执行一段同步代码时，它都会被推入执行栈中，执行完毕后则会被弹出。

宏任务队列：异步的宏任务（如setTimeout、setInterval、script整体代码等）会被放入宏任务队列中等待执行。

微任务队列：异步的微任务（如Promise.then、process.nextTick等）则会被放入微任务队列中等待执行。

事件循环：当执行栈为空时，事件循环开始工作。

1. 它首先查看微任务队列，如果有微任务，就将其出队并执行，直到微任务队列为空。
2. 然后，事件循环从宏任务队列中取出一个宏任务执行。
   在执行宏任务的过程中，可能会产生新的宏任务或微任务，这些都会被相应地放入对应的队列中。
3. 每执行完一个宏任务，事件循环都会再次查看微任务队列并执行其中的任务，直到微任务队列再次为空。

这个过程会一直重复，形成事件循环。

案例

例如：

console.log('script start'); // 宏任务  
  
setTimeout(function() {  
    console.log('setTimeout'); // 宏任务  
}, 0);  
  
Promise.resolve().then(function() {  
    console.log('promise1'); // 微任务  
}).then(function() {  
    console.log('promise2'); // 微任务  
});  
  
console.log('script end'); // 宏任务

首先执行宏任务script start和script end，然后执行所有的微任务promise1和promise2，最后执行下一个宏任务setTimeout。

题目1

下面的代码会按照什么顺序输出？

console.log('1');  
setTimeout(() => {  
    console.log('2');  
    Promise.resolve().then(() => {  
        console.log('3');  
    });  
}, 0);  
  
Promise.resolve().then(() => {  
    console.log('4');  
});  
  
console.log('5');

首先执行宏任务输出1和5，然后执行微任务输出4。接着执行setTimeout的宏任务输出2，然后再执行其内部的微任务输出3。

所以输出顺序为：1, 5, 4, 2, 3

题目2

下面的代码会按照什么顺序输出？

Promise.resolve().then(() => {  
    console.log('1');  
    setTimeout(() => {  
        console.log('2');  
    }, 0);  
});  
  
setTimeout(() => {  
    console.log('3');  
    Promise.resolve().then(() => {  
        console.log('4');  
    });  
}, 0);  
  
console.log('5');

首先执行宏任务输出5，然后执行微任务输出1。接着执行setTimeout的宏任务输出3，然后再执行其内部的微任务输出4。最后执行另一个setTimeout的宏任务输出2。

所以输出顺序为：5, 1, 3, 4, 2

---

总结

同步与异步是编程中处理耗时操作的两种方式，异步编程通过非阻塞的方式提高了程序的响应性和效率。
宏任务与微任务则是JavaScript事件循环中的两个关键概念，它们共同协作，确保了异步任务的有序执行。

网络安全领域中的许多工具和平台可能会使用到JavaScript或其相关技术。
因此，对JavaScript的深入理解和熟练掌握可以为参赛者在解决某些与Web安全相关的挑战时提供帮助。

系列文章

蓝桥杯-网络安全比赛（3）基础学习- JavaScript的闭包与this
蓝桥杯-网络安全比赛（2）基础学习-正则表达式匹配
蓝桥杯-网络安全比赛（1）基础学习-使用PHP、PYTHON、JAVA