JavaScript执行机制以及异步解决方案的发展历程

作者: A郑家庆 | 来源:发表于2019-03-21 16:42 被阅读0次

JavaScript执行机制以及异步解决方案的发展历程
Javascript异步解决方案的发展历程
从回调函数到 async await，理清异步编程解决方案
web前端面试3
初步讲解JS中的callback回调原理
异步
JavaScript 异步编程的几个方法
JS notebook goods
js的事件循环
JS 异步解决方案的发展历程以及优缺点

浏览器是多进程也是多线程的

每打开一个浏览器页面就相当于创建了一个独立的浏览器进程。浏览器的线程包括：

1.GUI渲染线程

负责渲染浏览器界面，解析HTML、CSS，构建DOM树和RenderObject树，布局和绘制等。当界面需要回流、重绘时，该线程就会执行。注意：GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起。

2.JS引擎线程

也称为JS内核，负责处理JavaScript脚本程序(例如V8引擎)，同样注意，GUI渲染线程与JS引擎线程是互斥的，如果JS执行时间过长，就会造成页面渲染阻塞，这也是为什么JS脚本写在HTML、CSS下面的原因。

3.事件触发线程

用于将鼠标点击事件等添加到任务队列中，运行并返回结果，等待JS引擎处理。

4.定时器触发线程

用于将定时器任务添加到任务队列中，运行并返回结果，等待JS引擎处理。

5.异步http请求线程

用于将异步请求添加到任务队列中，运行并返回结果，等待JS引擎处理。
总结：js引擎线程就是主线程，3、4、5线程是子线程，HTML5支持的Web Worker就是处理任务队列中的程序，也属于子线程。

load事件与DOMContentLoaded事件的先后

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式、图片。当onload事件触发时，页面上所有的DOM、样式、图片、脚本都已经加载完成。

CSS加载是否会阻塞DOM树渲染

css是由单独的下载线程异步下载的，不会阻塞dom树解析，所以放在头部引入，不过会阻塞render树渲染，因为渲染需要等css加载完毕。

JavaScript执行机制

JavaScript语言的一大特点就是单线程，也就是说，一个时间段内只能做一件事情。为什么JavaScript不能有多个线程呢？这样能提高效率。假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这两个线程就会冲突？所以为了避免这个问题，从一诞生，JavaScript就是单线程。这已经成了这门语言的核心特征，将来也不会变。
单线程意味着所有任务都需要排队，前一个任务结束才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不等待，(造成IO设备很慢(比如AJAX请求)，那么CPU不得不等着结果出来再往下执行，)导致页面渲染阻塞，用户体验不好。于是，所有任务可以分成两种，一种是同步任务，另一种是异步任务。同步任务指的是，在主线程上排队执行的任务，前一个任务执行完毕，就会执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"的任务，等到主线程空了，就会读取"任务队列"，有运行结果的异步任务就会被推入到主线程中执行，主线程会不断重复这个过程。这就是JavaScript的运行机制，又称为Event Loop(事件循环)。

JS 异步解决方案的发展历程以及优缺点。

回调函数（callback）

setTimeout(() => {
   // callback 函数体
}, 1000)

缺点：回调地狱，不能用 try catch 捕获错误，不能 return
回调地狱的根本问题在于：
缺乏顺序性：回调地狱导致的调试困难，和大脑的思维方式不符；
嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身，即（控制反转）；
嵌套函数过多的多话，很难处理错误。

ajax('XXX1', () => {
   // callback 函数体
   ajax('XXX2', () => {
       // callback 函数体
       ajax('XXX3', () => {
           // callback 函数体
       })
   })
})

优点：解决了同步的问题（只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行）。

Promise
Promise 就是为了解决 callback 的问题而产生的。
Promise 实现了链式调用，也就是说每次 then 后返回的都是一个全新 Promise，如果我们在 then 中 return ，return 的结果会被 Promise.resolve() 包装。
优点：解决了回调地狱的问题。

ajax('XXX1')
 .then(res => {
     // 操作逻辑
     return ajax('XXX2')
 }).then(res => {
     // 操作逻辑
     return ajax('XXX3')
 }).then(res => {
     // 操作逻辑
 })

缺点：无法取消 Promise ，错误需要通过回调函数来捕获。

Generator
优点：可以控制异步的开始和暂停。
缺点：必须配合 co 自执行器使用。

function *fetch() {
   yield ajax('XXX1', () => {})
   yield ajax('XXX2', () => {})
   yield ajax('XXX3', () => {})
}
let it = fetch()
let result1 = it.next()
let result2 = it.next()
let result3 = it.next()

Async/await
async、await 是异步的终极解决方案。
优点是：代码清晰，不用像 Promise 写一大堆 then 链，处理了回调地狱的问题；
缺点：await 将异步代码改造成同步代码，如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。

async function test() {
 // 以下代码没有依赖性的话，完全可以使用 Promise.all 的方式
 // 如果有依赖性的话，其实就是解决回调地狱的例子了
 await fetch('XXX1')
 await fetch('XXX2')
 await fetch('XXX3')
}

下面来看一个使用 await 的例子：

let a = 0
let b = async () => {
 a = a + await 10
 console.log('2', a) // -> '2' 10
}
b()
a++
console.log('1', a) // -> '1' 1

对于以上代码你可能会有疑惑，让我来解释下原因：

首先函数 b 先执行，在执行到 await 10 之前变量 a 还是 0，因为 await 内部实现了generator ，generator 会保留堆栈中东西，所以这时候 a = 0 被保存了下来；

因为 await 是异步操作，后来的表达式不返回 Promise 的话，就会包装成Promise.reslove(返回值)，然后会去执行函数外的同步代码；

同步代码执行完毕后开始执行异步代码，将保存下来的值拿出来使用，这时候 a = 0 + 10。
上述解释中提到了 await 内部实现了 generator，其实 await 就是 generator 加上Promise的语法糖，且内部实现了自动执行 generator。如果你熟悉 co 的话，其实自己就可以实现这样的语法糖。
本题链接：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/11

try...catch

try...catch是被设计成捕获当前执行环境的异常，意思是只能捕获同步代码里面的异常，异步调用里面的异常无法捕获。
第一种方式：异常出现在异步调用里面，try..catch无法捕获。
第二重方式：try..catch是写在异步代码里面，相对于try里面的所有执行都是同步代码，所以能捕获。

定时器

除了放置异步任务的事件，"任务队列"还可以放置定时器，它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。

回调函数的使用场合

资源加载：动态加载js文件后执行回调，加载 iframe后执行回调，ajax操作回调，图片加载完成执行回调。

事件循环进阶：macrotask与microtask

macrotask(task)：宏任务，可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行)，包括主代码块(同步)、setTimeout、setInterval等。
microtask(jobs)：微任务，在task执行结束后立即执行的任务，包括promise的then、process.nextTick(微任务队列，优先级更高)等

优先级：同步 > 微任务(异步) > 宏任务(异步)
优先级：process.nextTick > promise
执行过程：macrotask > microtask > 渲染 > (下一轮)macrotask > microtask > 渲染...
注释：1.线程可以理解为做事，一个线程表示一个时间段只能做一件事，多个线程表示一个时间段可以同时做多件事。
2.CPU：中央处理器是一块超大规模的集成电路，是一台计算机的运算核心和控制核心。它的功能主要是解释计算机指令以及处理计算机软件中的数据。
3.I/O设备是指输入/输出设备接口。

https://www.jianshu.com/p/334287bdbdd0

参考网址：
http://www.ruanyifeng.com/blog/2014/10/event-loop.html(js执行机制)
https://www.cnblogs.com/cangqinglang/p/8963557.html(js执行机制)
https://zhuanlan.zhihu.com/p/43282197(css加载会造成阻塞吗)
https://blog.csdn.net/liwenfei123/article/details/80670330(宏任务和微任务)