浏览器事件循环原理 —— JS为何会阻碍渲染？

系列文章目录

• 第一章 浏览器事件循环原理 —— 浏览器进程模型
• 第二章 浏览器事件循环原理 —— 渲染主线程如何工作？
• 第三章 浏览器事件循环原理 —— 何为异步？

---

文章目录

系列文章目录

文章目录

前言

代码解析

总结

---

前言

该文章作用于 “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 会阻塞渲染的原因。