Web浏览器工作原理
JavaScript执行机制
重要程度：8 分
<div>
<h2>JavaScript执行机制</h2>
<p><strong>1. 单线程</strong></p>
<p>JavaScript语言的一大特点就是单线程，也就是说，所有任务需要排队，前一个任务结束，后一个任务才能开始。</p>
<p><strong>2. 事件循环(Event Loop)</strong></p>
<p>浏览器为JavaScript提供了Event Loop来处理异步操作。Event Loop会一直等待直到调用栈为空，然后取出任务队列中的第一个任务执行，如此反复。</p>
<p><strong>3. 调用栈(Call Stack)</strong></p>
<p>调用栈是一个后进先出的数据结构，用来记录当前正在运行的函数。每当一个函数被调用，它就会被推入调用栈中；当函数执行完毕，它就会从调用栈中弹出。</p>
<p><strong>4. 宏任务与微任务</strong></p>
<p>宏任务(Macro Task)包括整体代码script、setTimeout、setInterval等；微任务(Micro Task)包括Promise、MutationObserver等。每次Event Loop都会先执行完所有的微任务再执行宏任务。</p>
</div>
<div>
<h2>例题说明</h2>
<p>假设我们有如下代码：</p>
<pre>
<code>
console.log('Script Start');
setTimeout(() => {
console.log('setTimeout');
}, 0);
Promise.resolve().then(() => {
console.log('Promise1');
}).then(() => {
console.log('Promise2');
});
console.log('Script End');
</code>
</pre>
<p>执行顺序为：</p>
<ol>
<li>Script Start</li>
<li>Script End</li>
<li>Promise1</li>
<li>Promise2</li>
<li>setTimeout</li>
</ol>
<p>解析：首先执行全局上下文的代码，输出“Script Start”和“Script End”。然后执行微任务队列，输出“Promise1”和“Promise2”。最后执行宏任务队列中的setTimeout，输出“setTimeout”。这体现了JavaScript的执行机制以及宏任务与微任务的区别。</p>
</div>