本文主要是介绍蓝桥杯-网络安全比赛（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('继续执行');
输出顺序将会是：
开始执行
开始异步任务
继续执行
异步任务结束
处理异步任务结果: 任务完成
在这个例子中
asynTask函数返回一个Promise对象。- 我们使用
setTimeout来模拟一个异步操作，这个操作将在1秒后完成。 - 在异步操作完成之前，JavaScript引擎不会等待它，而是继续执行后面的代码。
- 当异步操作完成后，我们通过调用
resolve方法来解决Promise，并在.then方法中处理异步操作的结果。
宏任务
宏任务（MacroTask）是由宿主环境（如浏览器或Node.js）发起的，可以理解为每次执行栈执行的代码就是一个宏任务。
宏任务队列中存放着需要执行的宏任务，当主线程空闲时，会从宏任务队列中取出一个任务进行执行。
宏任务涵盖了诸如setTimeout、setInterval、Ajax请求、DOM事件等异步操作。这些操作不会被立即执行，而是被放入宏任务队列中，等待主线程空闲时再执行。
由于宏任务通常具有较低的优先级，因此它们可能会被推迟执行，直到没有其他更高优先级的任务需要处理。
微任务
微任务（MicroTask）则是由JavaScript引擎本身创建和调度的，它们在当前任务执行结束后立即执行。
微任务队列是一个与任务队列相互独立的队列，每个微任务都会添加到微任务队列的尾部，并且会按照顺序处理完队列中的所有任务。
微任务通常包括Promise的回调函数、MutationObserver的回调等。
这些微任务在当前宏任务执行完毕后立即执行，即使还有其他的宏任务在队列中等待。
这种机制使得微任务具有比宏任务更高的优先级。
事件循环
在JavaScript的事件循环中，宏任务和微任务共同决定了异步任务的执行顺序。
当主线程中的同步任务执行完毕，事件循环会开始处理异步任务。
它会优先检查微任务队列是否有任务需要执行，如果没有，再去宏任务队列检查是否有任务执行，如此往复。
基本流程
执行栈：JavaScript引擎有一个执行栈，用于同步地执行代码。每当执行一段同步代码时，它都会被推入执行栈中，执行完毕后则会被弹出。
宏任务队列：异步的宏任务（如setTimeout、setInterval、script整体代码等）会被放入宏任务队列中等待执行。
微任务队列：异步的微任务（如Promise.then、process.nextTick等）则会被放入微任务队列中等待执行。
事件循环：当执行栈为空时，事件循环开始工作。
- 它首先查看微任务队列，如果有微任务，就将其出队并执行，直到微任务队列为空。
- 然后，事件循环从宏任务队列中取出一个宏任务执行。
在执行宏任务的过程中，可能会产生新的宏任务或微任务，这些都会被相应地放入对应的队列中。 - 每执行完一个宏任务，事件循环都会再次查看微任务队列并执行其中的任务，直到微任务队列再次为空。
这个过程会一直重复，形成事件循环。
案例
例如：
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
这篇关于蓝桥杯-网络安全比赛（4）基础学习-JavaScript同步与异步、宏任务（MacroTask）与微任务、事件循环机制（MicroTask）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
