【无标题】

课程目标

掌握promises/A+ 规范详解
实现一个简易版本的 promise 函数
ES6/SEMext 中的 generator  /  async await  简介

知识要点

一、计算机原理

进程和线程

1. 进程是CPU资源分配的最小单位： 独立的资源
2. 线程是CPU调度的最小单位， 资源是可以共享的
   

映射到前端

浏览器Chrome新开一个窗口，Tab页是线程还是进程？
答： 进程， 两个Tab页是独立的，不会共享资源。
从区别 、概念上出发
如果A页面死循环，B页面肯定可以正常运行。 因为不再同一个进程内。
多进程的有点： 当一个进程发生意外时，另一个进程可以作为备份使用。

发散

方向一： 窗口（进程间）通信？ 浏览器的存储 - storage 、 cookie => 多种存储的区别
方向二： 浏览器原理（中高级岗位提问居多） — 各种引擎

二、浏览器原理

1. GUI渲染引擎（单线程）

    1) 解析HTML、CSS，构建DOM树  => 布局 => 绘制（render的过程）
    2) 与JS引擎互斥，当执行JS引擎线程时，GUI会pending，当任务队列空闲时，才会继续执行GUI（单线程原理，专门设计的）
    3) JS阻塞（白屏）, 会卡在吗Js线程，不会重绘
   

2. JS引擎线程

    1) 处理JS，解析执行脚本
    2) 分配、处理、执行带执行的事件
    3) JS阻塞（白屏）, 会卡在吗Js线程，不会重绘
   

3. 定时器触发引擎

    1）异步定时器处理与执行 -- setTimeout && setInterval
    2)  接收Js引擎分配的定时器任务
    3）处理完成后交由事件触发线程触发
   

4. 异步HTTP请求线程

    1）异步执行请求类处理：Promise / ajax 等
    2）接收Js引擎分配异步HTTP请求
    3）监听回调， 交给事件触发线程触发
   

5. 事件触发引擎

    1）接收来源： 定时器、异步、用户操作
    2）将回调过来的事件依次接入到任务队列的队尾，还给Js引擎执行
   

三、JS执行原理

（线程触发的原理 ---- 高级工程师面试会问）

Event Loop

Js单线程语言， 单步执行

function run() {
    func1()
})
function func1() {
    func2()
}
function func2() {
    throw new Error('plz check ur call stack')
}
run()

eg2. Js堆栈的执行顺序与堆栈溢出试题 ===> 性能优化

// 爆栈 --- 递归引发
function func(){
    func()
}
func()
// 一直在入栈，没有释放的过程， 有时也可能是存储的东西太多了

eg3. 执行顺序题

setTimeout( () => {
    console.log('Time out') // 异步 macro宏任务   
})
Promise.resolve(1).then( () =>{
    console.log('promise')  // micro微任务  --同步执行完执行微任务 
})
console.log('hi')  // 同步 宏任务 macro
打印顺序： hi  promise  Time out

四、 任务

微任务、宏任务（有微则微，无微则宏—横向比较）

首先执行宏任务，当此宏任务执行完成，并且有可执行的微任务，则执行微任务，没有则执行下一个宏任务

宏任务 优先级 > 微任务

微任务是同步任务执行完之后被塞进了主线程中

宏任务： script setTimeout setInterval I/O
微任务: new Promise{}.then()

补：

• 有的一些新API还是微任务
• 宏任务、微任务用来干嘛？
• 微任务不只是promise.then,只能说chrome环境里的微任务是这个

同步任务、异步任务（纵向比较）

补充知识点

Event Loop
主线程从任务队列循环不断读取任务的这个过程我们称之为Event Loop 循环，即事件循环