浏览器事件循环机制——浏览器事件环

一、浏览器事件环

进程是浏览器调度的基本单位, 进程包含线程。

1 浏览器的进程

• 每个浏览器页面都是一个进程，其互不影响。
• 浏览器有一个主进程（用户界面）
• 渲染进程，每个页卡里都有一个渲染进程（浏览器内核）

2 渲染进程（包含多个线程）

• GUI渲染线程（UI线程 渲染页面）
• j s引擎线程，j s引擎线程和GUI渲染线程互斥，不能在一边渲染一边加载js，防止死锁。
• 事件触发线程 EventLoop
• 事件click、setTimeout、ajax等都是独立的线程

3 宏任务、微任务

• 宏任务：宿主环境提供的异步方法都是宏任务。 如：script脚本、ui渲染、定时器
• 微任务：语言提供的promie、mutationObserver

eventLoop.jpg

1）js先执行，在执行时会把微任务和宏任务放到对应的队列等待执行。
2）当js执行完毕，会把微任务队列拿来执行，执行时可能会再次遇到宏任务和微任务，将遇到的微任务加入到此时微任务的末尾，在此次清空微任务队列，宏任务加入到宏任务队列。
3）而后GUI线程渲染页面
4）从宏任务队列取出最先到达等待时间的一个执行
5）此任务代码执行时同样可能会再次遇到宏任务和微任务，遇到时再次将他们加入到对应的任务队列
6）此任务执行完毕后再次取出微任务队列执行，再次清空微任务。
7）然后再次从宏任务队列中取出一个宏任务执行，如此往复知道任务队列都被清空。

js=>全部微任务=>ui渲染=>一个宏任务=>全部微任务=>ui渲染=>第二个宏任务=>全部微任务=>ui渲染......最后一个宏任务=>全部微任务=>ui渲染=>结束

例一

例二