浏览器事件循环原理 —— 渲染主线程如何工作？

 

 系列文章目录

• 第一章 浏览器事件循环原理 —— 浏览器进程模型

---

目录

 系列文章目录

前言

渲染主线程需要处理的任务包括但不限于

渲染主线程如何调度任务队列？

---

前言

该文章作用于 “web前端大师课” 的学习笔记，第一章 浏览器事件循环原理 —— 浏览器进程模型。

---

渲染主线程需要处理的任务包括但不限于

• 解析 HTML
• 解析 CSS
• 计算样式 （em、rem、hv、wv，样式冲突、优先级等等计算）
• 布局（元素的宽高、位置等计算）
• 处理图层（z-index等计算）
• 每秒把页面画 60 次（不停的渲染画面）
• 执行全局 JS 代码
• 执行事件处理函数
• 执行计时器的回调函数
• ……

渲染主线程如何调度任务队列？

要处理这么多的任务，主线程遇到了⼀个前所未有的难题：如何调度任务？

​

1. 在最开始的时候，渲染主线程会进⼊⼀个⽆限循环。
2. 每⼀次循环会检查消息队列中是否有任务存在。如果有，就取出第⼀个任务执⾏，执⾏完⼀个后进⼊下⼀次循环；如果没有，则进⼊休眠状态。
3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务。

整个过程，被称之为事件循环（消息循环）

注：在 W3C 中称为 event_loop，在谷歌浏览器源码中称为 message_loop。

---

总结

浏览器的渲染主线程要处理非常多的任务，有些较长事件的任务会导致线程堵塞，极大的破坏用户体验，所以渲染主线程使用事件循环（即event_loop）的工作原理来调度任务