浏览器事件环

本节目标：理解“浏览器事件环”的核心思路，并能把它用于实际开发或面试表达。

五

.
# 1.

浏览器的进程

每一个页卡都是进程 (互不影响)
浏览器也有一个主进程 (用户界面)
渲染进程每个页卡里都有一个渲染进程 (浏览器内核)
网络进程（处理请求）
GPU进程 3d绘制
第三方插件的进程

# #
2.

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

GUI渲染线程（渲染页面的）
js引擎线程他和页面渲染时互斥
事件触发线程独立的线程 EventLoop
事件 click、setTimeout、ajax也是一个独立线程

微任务队列每次都会创建一个全新的队列、事件队列仅有一个

事件队列、消息队列：存放定时器到达时间的回调函数、ajax回调成功的函数等
事件循环：不断检测调用栈是否为空，如果为空则从事件对列中取出一个来执行

# 3.

宏任务,微任务

宏任务script ui 渲染、setTimeout、setInterval、postMessage、MessageChannel、SetImmediate
微任务promise mutationObserver、process.nextTick

每循环一次会执行一个宏任务，并清空对应的微任务队列，每次事件循环完毕后会判断页面是否需要重新渲染（大约16.6ms会渲染一次）

# 4.

微任务和GUI渲染

<script>        document.body.style.background ='red';console.log(1)Promise.resolve().then(()=>{console.log(2)document.body.style.background ='yellow';})console.log(3);</script>
# 5.

事件任务

<script>        button.addEventListener('click',()=>{console.log('listener1');Promise.resolve().then(()=>console.log('micro task1'))})button.addEventListener('click',()=>{console.log('listener2');Promise.resolve().then(()=>console.log('micro task2'))})button.click();// click1() click2()</script>
# 6.

定时器任务

<script>        Promise.resolve().then(()=>{console.log('Promise1')setTimeout(()=>{console.log('setTimeout2')},0);})setTimeout(()=>{console.log('setTimeout1');Promise.resolve().then(()=>{console.log('Promise2')})},0);</script>
# 7.

任务执行面试题console.log(1);asyncfunctionasync(){console.log(2);awaitconsole.log(3);console.log(4)}setTimeout(()=\>{console.log(5);},0);constpromise =newPromise((resolve,reject)=\>{console.log(6);resolve(7)})promise.then(res=\>{console.log(res)})async();console.log(8); 掌握Vue中nextTick原理 ← 从零开始，手写完整的Promise原理 > 来自

 <http://zhufengpeixun.com/advance/node/async-2.html>

浏览器事件环 ​

浏览器事件环