现代浏览器架构

一见如故

• 程序在内存中执行，一个程序可能有多个进程，一个进程可能有多个线程
• 现代浏览器程序中有个渲染进程（内核），其中有个主线程包含了渲染引擎和js解析引擎
• 事件循环解决了同在主线程的两大引擎配合执行问题，也帮助实现了JS的异步编程

---

现代浏览器的多进程

• 主进程：浏览器主界面、交付、存储
• 网络进程：网络资源的请求和接受
• GPU进程：3D CSS、CSS3
• 插件进程
• 渲染进程（内核）：解析HTML和JS

渲染进程（内核）

• 主要包含一个主线程（包含渲染引擎和JS解析引擎的工作）和一个事件循环
• 渲染进程的工作过程：渲染引擎解析HTML，生成用于构建页面的信息，如果遇到script标签，先停止解析；JS解析引擎解析完同步代码；循环去看任务队列中有没有任务，有渲染任务就交给渲染引擎，有JS任务就交给JS解析引擎

事件循环

• 行为：循环去看任务队列中有没有任务，找到就交给主线程中对应的引擎去执行
• 作用：
  1、实现了渲染引擎和JS解析引擎的配合执行
  2、帮助实现JS的异步编程

异步编程

• 作用：减少了JS的执行时间让渲染进程的主线程不那么拥挤
• 同步代码：在主线程执行的代码
• 异步代码：不在主线程执行，而是通过任务队列通知主线程执行的代码
• 异步任务（浏览器事先定义好的）：定时器、网络请求、用户交付
• 异步代码的处理：他们会被交给其他进程或者其他线程处理，处理后会往任务队列中任务，任务队列中的任务会被事件循环获取并丢给主线程去处理

任务队列

• 任务队列中的任务分为宏任务和微任务
• 宏任务：定时器任务、网络请求任务、用户交互任务
• 微任务：promise中的回调
• 任务优先级：每次准备取出第一个宏任务执行前，都要将当前所有的微任务一个一个取出来执行

setTimeout(()=>{
    console.log(1)
    Promise.resolve('xxx').then(
        value=>{console.log(2)}
    )
},0)
 
console.log(3)
 
setTimeout(()=>{
    console.log(4)
},0)
 
Promise.resolve('xxx').then(
    value=>{console.log(5)}
)
//3,5,1,2,4