JavaScript script 代碼塊執(zhí)行機制與輸出順序詳解
本文深入探討 JavaScript 中 script 代碼塊的執(zhí)行機制及其輸出順序，并澄清其與宏任務(wù)的關(guān)系。
script 代碼塊是宏任務(wù)嗎？
簡單地說，將 script 代碼塊直接等同于宏任務(wù)并不完全準確。 雖然 script 代碼塊的執(zhí)行時機受事件循環(huán)機制影響，但其執(zhí)行方式與典型的宏任務(wù)（如 setTimeout、setInterval）存在關(guān)鍵區(qū)別。
讓我們分析以下代碼：
console.log('script1'); promise.resolve().then(() => console.log('promise1')); console.log('script2');
如果認為 script 代碼塊是宏任務(wù)，預(yù)期輸出順序應(yīng)為：
立即學(xué)習(xí)“Java免費學(xué)習(xí)筆記（深入）”；
script1 promise1 script2
然而，實際輸出為：
script1 script2 promise1
這是因為內(nèi)聯(lián)的 script 代碼塊在解析時同步執(zhí)行。瀏覽器解析到 <script> 標簽時，立即執(zhí)行其中的代碼，console.log(‘script1’) 和 console.log(‘script2’) 立即輸出。Promise.resolve().then() 的回調(diào)函數(shù)則被添加到微任務(wù)隊列中，并在當前宏任務(wù)結(jié)束后執(zhí)行。</script>
script 代碼塊的執(zhí)行流程
script 代碼塊的執(zhí)行并非簡單的宏任務(wù)入隊和執(zhí)行。瀏覽器在解析 html 時，遇到 <script> 標簽，會<strong>立即暫停 HTML 解析，執(zhí)行 script 代碼，然后<strong>繼續(xù)解析 HTML。 這與宏任務(wù)的異步執(zhí)行機制不同，宏任務(wù)會在當前任務(wù)執(zhí)行完畢后，由事件循環(huán)機制調(diào)度執(zhí)行。</script>
因此，script 代碼塊的執(zhí)行更像是同步的、阻塞式的。 這對于理解代碼執(zhí)行順序至關(guān)重要，因為它直接影響到代碼的執(zhí)行順序和性能。
理解 script 代碼塊的執(zhí)行機制，對于編寫高效、可預(yù)測的 JavaScript 代碼至關(guān)重要，特別是涉及異步操作時。 將 script 代碼塊與宏任務(wù)和微任務(wù)的執(zhí)行機制區(qū)分開來，能幫助開發(fā)者避免常見的 JavaScript 執(zhí)行順序錯誤。
