系列文章目录
- 第一章 浏览器事件循环原理 —— 浏览器进程模型
- 第二章 浏览器事件循环原理 —— 渲染主线程如何工作？
- 第三章 浏览器事件循环原理 —— 何为异步？
文章目录
系列文章目录
文章目录
前言
代码解析
总结
前言
该文章作用于 “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 会阻塞渲染的原因。
)
