浏览器的EventLoop

js的“主线程”是单线程

是指UI渲染线程和js引擎共用同一个线程

进程

计算机调度任务时以进程为单位
浏览器是多进程的，每一个tab都是一个进程，
浏览器有一个主进程 控制用户的界面
每个tab页，都有一个渲染进程（浏览器内核）
处理请求的进程
绘图GPU进程
插件进程

线程包括4类

UI渲染线程
Js引擎（UI和js共享同一个线程，是互斥的）
事件线程click/定时器setTimeout/ajax
事件触发线程，调度以下线程：处理事件/定时器/ajax（Event loop）

异步方法分为2类：

1. 宏任务：宿主环境提供的
   setTimeout/setInterval/setImmediate(IE/node)
   Event
   Ajax
   requestAnimationFrame
   I/O(Node)
2. 微任务：语言标准提供的
   Promise.then
   MutationObserver
   Process.nextTick(Node)
   MessageChannel

JS执行顺序

1.script主代码块放入执行栈，从上到下顺序执行
2.遇到宏任务,加入宏任务队列（如果是setTimeout，则到时间后加入）
3.遇到微任务，加入微任务队列
4.主代码执行完毕后，清空微任务队列
5.执行UI渲染（并不是每次都渲染，和浏览器都优化机制有关）
6.从宏任务队列中拿出一个任务放入执行栈执行

（先欠一张图）
联系题

function func1(){
    console.log('func1 start');
    return new Promise(resole=>{
        resole('ok');
    })
}

function func2(){
    console.log('func2 start');
    return new Promise(resole=>{
        setTimeout(() => {
            resole('okk'); 
        }, 10);
    })
}
console.log(1);
setTimeout(async () => {
    console.log(2);
    await func1();
    console.log(3);
}, 20);
for(let i = 0; i < 90000000; i++);
console.log(4);

func1().then(rs => {
    console.log(5);
});
func2().then(rs => {
    console.log(6);
});

setTimeout(() => {
    console.log(7);
}, 0);

console.log(8);

答案

// 1
// 4
// func1 start
// func2 start
// 8
// 5
// 2
// func1 start
// 3
// 7
// 6