JavaScript常见宏任务有哪些

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript中常见宏任务API有哪些》，聊聊，希望可以帮助到正在努力赚钱的你。

宏任务是JavaScript事件循环中用于处理异步操作的一种机制，主要包括setTimeout、setInterval、I/O操作、UI事件、setImmediate（Node.js）和requestAnimationFrame（浏览器）。1. setTimeout和setInterval将回调放入宏任务队列，延迟执行；2. I/O操作完成后，其回调作为宏任务执行；3. UI交互或页面加载事件触发的回调被安排为宏任务；4. Node.js中setImmediate在当前阶段结束后执行；5. requestAnimationFrame在浏览器重绘前调度。这些API产生宏任务是为了保持主线程响应性，避免阻塞渲染和用户交互。宏任务在当前同步代码和微任务执行完毕后才会运行，影响着代码执行顺序和UI更新时机。合理使用宏任务可优化性能，如拆分耗时任务、控制高频事件触发频率、推迟DOM更新等，从而提升用户体验。

在JavaScript的世界里，有些API调用后，它们的执行不会立即发生，而是会被安排在未来的某个时间点，等待事件循环（Event Loop）来处理。这些被安排在“未来”执行的任务，我们通常称之为宏任务（Macrotasks）。简单来说，它们是浏览器或Node.js环境用来协调各种异步操作的“大块”工作。

解决方案

理解JavaScript中的宏任务，核心在于把握事件循环的机制。当我们谈论哪些API会产生宏任务时，主要指的是那些需要等待外部事件或达到特定时间点才能执行的代码块。这包括：

• setTimeout(callback, delay) 和 setInterval(callback, delay): 这两个是大家最熟悉的定时器函数。它们的作用是指定一个回调函数在设定的延迟时间后（或每隔一段时间）执行。无论你把 delay 设置成多少，甚至是0，它们的回调函数都会被放入宏任务队列等待执行，而不是立即执行。这是因为它们本质上是基于时间的调度，属于浏览器或运行时环境的“外部”调度机制。
• I/O 操作: 比如网络请求（XMLHttpRequest, Fetch API）、文件读写（在Node.js中，如fs.readFile）。当这些操作完成时，它们相关的回调函数（如onload, onerror, Promise的then或catch处理程序）会被放入宏任务队列。这是因为I/O操作是系统级别的，需要等待操作系统完成数据传输，然后通知JavaScript运行时。
• UI 渲染事件: 比如用户交互事件（click, keydown等）、页面加载事件（load, DOMContentLoaded）等。当这些事件发生时，它们对应的事件监听器回调也会作为宏任务被加入队列。浏览器需要处理这些用户输入或页面状态变化，然后调度相应的JavaScript代码执行。
• setImmediate(callback) (Node.js特有): 这是一个在Node.js环境中独有的API，它的回调函数会在当前轮询阶段（poll phase）结束后，下一个事件循环迭代开始前执行。它和setTimeout(..., 0)有些相似，但在特定场景下（如I/O回调后）的执行顺序会有差异，它更强调“立即”执行，但仍然是宏任务。
• requestAnimationFrame(callback) (浏览器特有): 虽然它不是直接的宏任务队列成员，但它与浏览器渲染周期紧密相关。它的回调会在浏览器下一次重绘之前执行。从宏观上看，它也是一种由浏览器调度的大任务，用于优化动画和视觉更新，确保在每一帧绘制前执行。

这些API之所以产生宏任务，是为了确保JavaScript主线程的响应性。想象一下，如果一个耗时的网络请求回调直接阻塞了主线程，那用户界面就彻底卡死了。将它们放入宏任务队列，意味着它们会在主线程空闲时，或者在完成当前一轮的微任务处理后，才会被“挑选”出来执行。

为什么这些API会产生宏任务，而不是微任务？

这事儿说起来，其实是JavaScript事件循环设计哲学的一种体现。我个人觉得，这就像是把不同类型的待办事项分门别类：有些事情是“现在立刻马上”要做的，有些是“等手头这批小事儿都忙完了再做”的，还有些是“等下次有机会了再做”的。

微任务（Microtasks），比如Promise的回调（.then(), .catch(), .finally()），或者queueMicrotask()，它们优先级非常高。它们会在当前宏任务执行完毕后，下一个宏任务开始之前，被全部清空。这意味着，如果你在一个宏任务里触发了多个微任务，它们会紧接着在这个宏任务之后，几乎“插队”一样地执行完。

而宏任务呢？它们代表的是更大粒度、可能涉及外部系统交互（比如网络请求、文件操作）或者需要等待特定时间（比如定时器）才能完成的任务。如果把这些也设计成微任务，那可能会导致几个问题：

1. 阻塞UI渲染和用户交互：想象一下，如果一个setTimeout的回调被当成微任务，并且它里面又触发了别的耗时操作，那么浏览器可能就没机会进行页面重绘，用户点击也无法响应了。宏任务的设计，就是为了在每个大任务之间，给浏览器一个喘息的机会，去更新UI，处理用户输入，保持页面的流畅性。
2. 调度复杂性：网络I/O、定时器这些操作，它们的完成时机是不确定的，依赖于外部环境。把它们归类为宏任务，可以让事件循环在处理完一轮微任务后，再去检查宏任务队列，这种“批处理”的方式简化了调度逻辑。
3. 职责分离：宏任务处理的是“外部事件”和“时间调度”，微任务处理的是“内部状态变化”和“异步流程控制”。这种区分使得整个异步模型更加清晰和可预测。说白了，就是把那些“可能耗时”或者“需要等待”的任务，都扔到宏任务队列里，让它们排队，确保主线程不会被它们卡死。

宏任务的执行顺序和影响是什么？

理解宏任务的执行顺序，是理解JavaScript异步行为的关键。它的影响深远，直接决定了你的代码何时执行、UI何时更新以及用户体验如何。

事件循环的基本流程是这样的：

1. 执行当前宏任务：从宏任务队列中取出一个宏任务（比如一个script标签的全部代码，或者一个click事件的回调）并执行。
2. 清空微任务队列：在当前宏任务执行过程中，可能会产生一系列微任务（比如Promise的回调）。当当前宏任务执行完毕后，事件循环会立即检查微任务队列，并把里面所有的微任务全部执行完毕。
3. 渲染（浏览器环境）：如果是在浏览器环境中，在清空微任务队列后，浏览器可能会进行一次渲染（重绘和回流），更新页面的视觉状态。
4. 进入下一个宏任务：渲染完成后，事件循环会再次从宏任务队列中取出下一个宏任务，重复上述过程。

这种执行顺序带来的影响是：

• UI响应性：因为每次宏任务执行完毕后，浏览器都有机会进行渲染，这保证了即便有大量异步操作，UI也能保持一定的响应性。用户不会觉得页面“卡死”了，因为浏览器总有机会在下一个宏任务开始前更新画面。
• 代码执行的“非即时性”：即便你设置setTimeout(func, 0)，它的回调也永远会在所有当前同步代码和所有当前微任务执行完毕之后才执行。这解释了为什么console.log('同步') -> Promise.resolve().then(() => console.log('微任务')) -> setTimeout(() => console.log('宏任务'), 0) 的输出顺序总是“同步”、“微任务”、“宏任务”。
• 潜在的“卡顿”风险：如果一个宏任务本身执行时间过长（比如进行了大量的计算），那么在它执行期间，UI是不会更新的，用户输入也无法响应。这就是为什么我们常说要避免在主线程中执行耗时操作，或者将其拆分成小块，利用setTimeout(..., 0)来“切片”执行。
• Node.js中的setImmediate与setTimeout(..., 0)：在Node.js中，setImmediate和setTimeout(..., 0)的执行顺序在某些情况下会有差异。setImmediate的回调通常会在当前事件循环的“check”阶段执行，而setTimeout的回调则在“timers”阶段。如果在I/O回调内部，setImmediate会比setTimeout(..., 0)先执行，因为I/O回调结束后会直接进入check阶段。但在全局环境下，它们的顺序是不确定的，取决于定时器启动的精确时间。

在实际开发中，如何合理利用宏任务的特性？

理解宏任务的特性，绝不仅仅是理论知识，它在实际开发中有着非常具体的应用场景，能帮助我们写出更高效、更流畅的代码。

1. 避免长时间阻塞主线程：这是最核心的。当你知道某个计算任务非常耗时时，不要一次性在主线程里跑完。可以利用setTimeout(..., 0)将大任务拆分成多个小任务，分批执行。例如，处理一个大型数组：

   function processLargeArray(arr) {
     let i = 0;
     function processChunk() {
       const chunkSize = 1000; // 每次处理1000个元素
       const start = i;
       const end = Math.min(i + chunkSize, arr.length);
   
       for (let j = start; j < end; j++) {
         // 执行耗时操作，比如复杂计算
         // console.log(`Processing item ${j}: ${arr[j]}`);
       }
   
       i += chunkSize;
       if (i < arr.length) {
         // 继续调度下一个宏任务来处理下一批
         setTimeout(processChunk, 0);
       } else {
         console.log('所有数据处理完毕！');
       }
     }
     setTimeout(processChunk, 0); // 启动第一个宏任务
   }
   
   // 示例：创建一个大数组
   const bigArray = Array.from({ length: 100000 }, (_, index) => index);
   console.log('开始处理大数组...');
   processLargeArray(bigArray);
   console.log('主线程继续执行其他任务...');

   这样，每次处理一小部分数据后，主线程就有机会去处理其他事件或渲染UI，避免了页面卡顿。

2. Debounce（防抖）和 Throttle（节流）：这两个技术在处理频繁触发的事件（如resize, scroll, mousemove, input）时非常有用。它们都依赖setTimeout这个宏任务来控制回调函数的执行频率。

   • 防抖：在事件停止触发一段时间后才执行回调。例如，搜索框输入：

     function debounce(func, delay) {
       let timer;
       return function(...args) {
         const context = this;
         clearTimeout(timer);
         timer = setTimeout(() => func.apply(context, args), delay);
       };
     }
     
     const handleSearch = debounce((query) => {
       console.log('Searching for:', query);
       // 实际的搜索请求
     }, 500);
     
     // inputElement.addEventListener('input', (e) => handleSearch(e.target.value));

   • 节流：在一段时间内只执行一次回调。例如，滚动事件：

     function throttle(func, delay) {
       let timer = null;
       let lastArgs = null;
       let lastContext = null;
     
       return function(...args) {
         lastArgs = args;
         lastContext = this;
     
         if (!timer) {
           timer = setTimeout(() => {
             func.apply(lastContext, lastArgs);
             timer = null;
             lastArgs = null;
             lastContext = null;
           }, delay);
         }
       };
     }
     
     const handleScroll = throttle(() => {
       console.log('Scrolled!');
     }, 200);
     
     // window.addEventListener('scroll', handleScroll);

3. 确保DOM操作在下一个渲染周期发生：有时你需要在某个操作完成后，等待浏览器完成当前的渲染周期，再进行后续的DOM操作。虽然requestAnimationFrame是更专业的动画和渲染调度方式，但setTimeout(..., 0)在某些简单场景下也能起到类似的效果，将操作推迟到下一个宏任务。

   // 假设你有一个复杂的DOM操作，不想它立即阻塞当前渲染
   function updateComplexUI() {
     // 执行一些会改变DOM的计算
     console.log('计算完成，准备更新UI...');
     setTimeout(() => {
       // 实际的DOM更新操作
       document.getElementById('myDiv').textContent = '更新后的内容';
       console.log('UI已更新');
     }, 0);
   }
   
   // updateComplexUI();

4. 处理异步流程中的“等待”：当你的代码需要等待一个外部事件（如网络请求完成）或一段固定时间后才能继续执行时，宏任务是天然的选择。Promise配合Fetch API就是典型的例子，Fetch API的响应回调就是作为宏任务被调度的。

   合理利用宏任务，其实就是学会如何与事件循环“共舞”，让你的代码在异步的世界里，既能高效完成任务，又能保持应用的流畅和响应。这不仅是技术层面的优化，更是用户体验层面的考量。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。