系列文章目錄
- 第一章?瀏覽器事件循環原理 —— 瀏覽器進程模型
- 第二章?瀏覽器事件循環原理 —— 渲染主線程如何工作？
- 第三章 瀏覽器事件循環原理 —— 何為異步？
文章目錄
系列文章目錄
文章目錄
前言
代碼解析
總結
前言
該文章作用于 “web前端大師課” 的學習筆記，附上課程鏈接。
本章用一段代碼來解釋 JS?為何會阻礙渲染？
代碼解析
將用以下代碼來解釋?JS 為何會阻礙渲染
<h1>Mr.Yuan is awesome!</h1>
<button>change</button><script>
var h1 = document.querySelector('h1');
var btn = document.querySelector('button');// 死循環指定的時間
function delay(duration) {var start = Date.now();while (Date.now() - start < duration) {}
}btn.onclick = function () {h1.textContent = '袁?師很帥！'; // 該課程的老師delay(3000); // 死循環三秒
};
</script>上述代碼中，當用戶點擊按鈕時，渲染主線程的執行順序依次是：執行全局 JS → 讓交互線程監聽點擊事件 → 渲染主線程休眠 → 當用戶點擊按鈕 → 變量賦值 → 但是在頁面上不會馬上繪制更新后的文本，而是將繪制事件放進事件隊列 → 執行delay函數死循環三秒（這三秒內任何異步任務都會依次放到繪制事件后等待調度） → 三秒結束最后再執行繪制
總結
Js 是在瀏覽器進程的渲染主線程中執行全局代碼的，也就是 Js 是單線程的原因；所以當主線程上正在執行的同步任務過長時，不僅會阻塞到后面的任務，也會阻塞到異步任務（計時任務、交互事件、微任務等任務），那么自然的也會阻塞到dom繪制的事件。以上即 Js 會阻塞渲染的原因。
)
