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

系列文章目录

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

---

文章目录

系列文章目录

文章目录

前言

代码解析

总结

---

前言

该文章作用于 “web前端大师课” 的学习笔记，附上课程链接。

本章用一段代码来解释 JS 为何会阻碍渲染？

---

代码解析

将用以下代码来解释 JS 为何会阻碍渲染

Mr.Yuan is awesome!
change

上述代码中，当用户点击按钮时，渲染主线程的执行顺序依次是：执行全局 JS → 让交互线程监听点击事件 → 渲染主线程休眠 → 当用户点击按钮 → 变量赋值 → 但是在页面上不会马上绘制更新后的文本，而是将绘制事件放进事件队列 → 执行delay函数死循环三秒（这三秒内任何异步任务都会依次放到绘制事件后等待调度） → 三秒结束最后再执行绘制

---

总结

Js 是在浏览器进程的渲染主线程中执行全局代码的，也就是 Js 是单线程的原因；所以当主线程上正在执行的同步任务过长时，不仅会阻塞到后面的任务，也会阻塞到异步任务（计时任务、交互事件、微任务等任务），那么自然的也会阻塞到dom绘制的事件。以上即 Js 会阻塞渲染的原因。