云隐 - Promise 规范及应用
课程目标
掌握promises/A+ 规范详解
实现一个简易版本的 promise 函数
ES6/SEMext 中的 generator / async await 简介
知识要点
一、计算机原理
进程和线程
- 进程是CPU资源分配的最小单位: 独立的资源
- 线程是CPU调度的最小单位, 资源是可以共享的
映射到前端
浏览器Chrome新开一个窗口,Tab页是线程还是进程?
答: 进程, 两个Tab页是独立的,不会共享资源。
从区别 、概念上出发
如果A页面死循环,B页面肯定可以正常运行。 因为不再同一个进程内。
多进程的有点: 当一个进程发生意外时,另一个进程可以作为备份使用。
发散
方向一: 窗口(进程间)通信? 浏览器的存储 - storage 、 cookie => 多种存储的区别
方向二: 浏览器原理(中高级岗位提问居多) — 各种引擎
二、浏览器原理
-
GUI渲染引擎(单线程)
1) 解析HTML、CSS,构建DOM树 => 布局 => 绘制(render的过程) 2) 与JS引擎互斥,当执行JS引擎线程时,GUI会pending,当任务队列空闲时,才会继续执行GUI(单线程原理,专门设计的) 3) JS阻塞(白屏), 会卡在吗Js线程,不会重绘
-
JS引擎线程
1) 处理JS,解析执行脚本 2) 分配、处理、执行带执行的事件 3) JS阻塞(白屏), 会卡在吗Js线程,不会重绘
-
定时器触发引擎
1)异步定时器处理与执行 -- setTimeout && setInterval 2) 接收Js引擎分配的定时器任务 3)处理完成后交由事件触发线程触发
-
异步HTTP请求线程
1)异步执行请求类处理:Promise / ajax 等 2)接收Js引擎分配异步HTTP请求 3)监听回调, 交给事件触发线程触发
-
事件触发引擎
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 循环,即事件循环