浏览器的事件轮询（消息轮询）

浏览器进程：主要负责界⾯显示、⽤户交互、⼦进程管理等。浏览器进程内部会启动多个线程处理不同的任务。
⽹络进程：负责加载⽹络资源。⽹络进程内部会启动多个线程来处理不同的⽹络任务。
渲染进程：（本文重点讲解的进程）渲染进程启动后，会开启⼀个渲染主线程，主线程负责执⾏ HTML、CSS、JS 代码。默认情况下，浏览器会为每个标签⻚开启⼀个新的渲染进程，以保证不同的标签⻚之间不相互影响。

渲染主线程是如何⼯作的？

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

解析 HTML
解析 CSS
计算样式
布局
处理图层
每秒把⻚⾯画 60 次
执⾏全局 JS 代码
执⾏事件处理函数
执⾏计时器的回调函数
......

要处理这么多的任务，主线程遇到了一个避不开的难题：如何调度任务？

例如：

我正在执⾏⼀个 JS 函数，执⾏到⼀半的时候⽤户点击了按钮，我该⽴即去执⾏点击事件的处理函数吗？
我正在执⾏⼀个 JS 函数，执⾏到⼀半的时候某个计时器到达了时间，我该⽴即去执⾏它的回调吗？
浏览器进程通知我“⽤户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪⼀个呢？
......

渲染主线程的解决方案：排队

1. 在最开始的时候，渲染主线程会进⼊⼀个⽆限循环

2. 每⼀次循环会检查消息队列中是否有任务存在。如果有，就取出第⼀个任务执⾏，执⾏完⼀个后进⼊下⼀次循环；如果没有，则进⼊休眠状态。

3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务

这样一个往复轮询的过程被称之为： 事件循环（消息循环）

何谓异步

代码在执⾏过程中，会遇到⼀些⽆法⽴即处理的任务，⽐如：

计时完成后需要执⾏的任务 —— setTimeout 、 setInterval
⽹络通信完成后需要执⾏的任务 -- XHR 、 Fetch
⽤户操作后需要执⾏的任务 -- addEventListener

如果让渲染主线程等待这些任务的执行时机达到，就会导致主线程⻓期处于「阻塞」的状态，从⽽导致浏览器「卡死」

渲染主线程承担着极其重要的⼯作，⽆论如何都不能阻塞！比如用户操作了页面，但是相应的渲染任务却被阻塞，就会在用户眼里造成卡死的假象。因此，浏览器选择异步来解决这个问题。

JS为什么会阻塞渲染

首先浏览器拿到一个HTML文件到渲染成页面会经过HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画、这几个流程的处理。

主线程在HTML 解析的过程中有一个细节，就是如果遇到 script 标签会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。

渲染任务后期会交给合成线程处理，合成线程处理好后会将其处理结果包装成任务丢到任务队列中排队

主线程在执行当前任务后才会去完成任务队列的任务。

总结：JS执行和渲染都是任务，主线程在执行JS的时候渲染任务在任务队列中排队，JS的执行事件即排队时间即阻塞时间

JS 中的计时器为什么无法精确计时？

本质上跟上一个问题是一样的，定时任务由定时触发器线程异步触发后将异步任务的回调包装成任务丢入到异步任务队列，而异步任务队列中任务的执行时间直接受主线程当前正在执行任务的执行时间影响

任务队列与优先级

过去把消息队列简单分为宏队列和微队列，这种说法⽬前已⽆法满⾜复杂的浏览器环境，取⽽代之的是⼀种更加灵活多变的处理⽅式。

根据 W3C 官⽅的解释，现在的做法是给每个任务加上任务类型标记。

同类型的任务必须在同⼀个队列，不同的任务可以属于不同的队列（青菜、萝卜可以分别放两个框里，也可以放一个框里，但是把青菜或萝卜放在多个框里不行）。

规范只声明了浏览器必须有⼀个微队列，微队列的任务⼀定具有最⾼的优先级，必须优先调度执⾏。其他任务队列的数量和顺序由浏览器厂商自主实现，所以不同浏览器可能存在差异。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

浏览器

javascript