浅析 JavaScript 执行机制

嘿，大家好，我是墩墩大魔王丶。在前端开发中，JavaScript 的执行机制是我们必须要了解的重要知识之一。它决定了我们的代码如何被执行，影响着我们开发的效率和性能。本文将深入浅出地介绍 JavaScript 的执行机制，让我们一起来探索吧！

了解 JavaScript 执行机制

在开始之前，我们先来了解一下 JavaScript 的执行机制是什么以及它的基本原理。JavaScript 是一种单线程、非阻塞的脚本语言，它采用事件驱动(Event loop)的方式执行代码。这意味着 JavaScript 代码是按照一定的顺序依次执行的，而且在执行过程中不会阻塞后续代码的执行。

为什么JavaScript 是单线程的?

举个例子: 现在如果有两个任务一个删除DOM节点,一个是增加DOM节点,浏览器该如何执行?所以JavaScript是单线程的。

同步任务与异步任务

JavaScript 分为同步任务和异步任务同步任务在主线程执行异步任务会添加到 event table并注册函数->将函数移入 event queue(事件队列) JS的 event loop (不断循环) 读取event queue对应的函数(先进先出)加入到Event loop 中等待主线程执行完毕之后加入到主线程开始执行

同步任务（Synchronous tasks）

同步任务是按照代码顺序依次执行的任务。当一个同步任务执行时，JavaScript 运行时会阻塞代码执行，直到该任务完成为止。这意味着，只有当前任务完成后，下一个任务才会执行。

javascript 复制代码

console.log('开始执行任务1');
// 同步任务1
console.log('任务1执行完毕');

console.log('开始执行任务2');
// 同步任务2
console.log('任务2执行完毕');

异步任务（Asynchronous tasks）

异步任务是在主线程之外执行的任务。它们不会阻塞主线程的执行。异步任务完成后，它们会将回调函数添加到事件队列中等待执行。

javascript 复制代码

console.log('开始执行任务1');
// 异步任务1
setTimeout(function() {
  console.log('异步任务1执行完毕');
}, 1000);

console.log('开始执行任务2');
// 异步任务2
setTimeout(function() {
  console.log('异步任务2执行完毕');
}, 500);

异步任务的执行流程

异步任务的执行流程是如何的呢？让我们来了解一下。

异步任务完成后，添加到任务队列中：当发生异步任务时，比如定时器到期、事件触发、Promise 完成等，浏览器或者运行时环境会将异步任务添加到对应的任务队列中，比如微任务队列或者宏任务队列。
事件循环开始工作：主线程在空闲时会从事件队列中取出任务执行。事件循环（Event Loop）开始工作，它会检查是否有任务需要执行。
依次执行任务：如果存在微任务队列，事件循环会优先执行微任务队列中的所有任务，直到微任务队列为空。微任务执行完毕后，事件循环会继续检查宏任务队列。如果存在宏任务，事件循环会从宏任务队列中取出一个任务，放入执行栈中执行。执行完毕后，事件循环再次检查微任务队列。
重复执行：重复以上步骤，直到所有队列都为空。

这就是 JavaScript 异步任务的执行流程，通过这个流程，我们可以更好地理解 JavaScript 中代码的执行顺序以及异步任务的处理过程。

宏任务（Macrotasks）：

定时器（setTimeout、setInterval）：用于在指定的时间之后执行一次或者重复执行任务。
事件监听器（click、keyup 等）：响应用户的交互事件。
Ajax 请求：通过 XMLHttpRequest 或者 Fetch API 发起的网络请求。
I/O 操作：比如文件读写、数据库操作等。
requestAnimationFrame：用于执行动画或其他需要以较高的频率更新的任务。
MutationObserver：用于监听 DOM 变化。

微任务（Microtasks）：

Promise 的回调函数：包括 .then()、.catch()、.finally() 中注册的回调函数。
MutationObserver 的回调函数：用于监听 DOM 变化并进行相应操作的回调函数。
process.nextTick（Node.js 环境）：用于将回调函数添加到微任务队列中，会在当前事件循环迭代结束后执行。
queueMicrotask：用于将回调函数添加到微任务队列中，会在当前事件循环迭代结束后执行，类似于 Promise.resolve()。

执行优先级 : 同步任务 > 异步微任务 MicroTask > 异步宏任务

结语

通过本文的浅析，我们对 JavaScript 的执行机制有了更深入的了解。了解 JavaScript 的执行机制不仅有助于我们编写高效的代码，还能够更好地处理异步任务，提高代码的性能和用户体验。希望本文能对你有所启发，欢迎大家在实际项目中运用这些知识，共同进步！💐