web理论学习（三）（异步相关的都在这一篇整理）

1、同步和异步

同步：

• 指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务；
• 调用一旦开始，必须这个调用返回结果之后才能继续往后执行，程序的执行顺序和任务排列顺序是一致的。

异步

• 异步任务是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，此任务才会进入主线程；
• 每一个任务有一个或多个回调函数，前一个任务结束后，不是执行后一个任务，而是先执行回调函数，后一个任务则是不等前一个任务结束就执行；
• 程序的执行顺序和任务的排列顺序是不一致的，这就是异步；
• 我们常用的setTimeout和setInterval函数，Ajax都是异步操作

2、promise和async await的区别

• 概念

promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理更强大，简单来说可以理解promise为一个容器，用来存放一些未来才会执行完毕（异步）的事件的结果，这些结果是一旦生成就无法改变的

async await也是一种异步编程的解决方案，它遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象

（注：Generator 函数是一个状态机，会返回一个遍历器对象，这个遍历器对象可以依次遍历Generator中的每一个状态）

• 两者的区别

1）Promise的出现解决了传统callback函数导致的“ 回调地狱 ”问题，但是它的语法导致它纵向发展形成了一个回调链，遇到复杂的业务场景时，语法上不是很美观；而async await代买看起来会简洁一些，使异步代码看起来像同步代码，await的本质是可以提供等同于“ 同步效果 ”的等待异步返回的语法糖，只有这一句代码执行完，才会执行下一句

2）async await与Promise一样，都是非阻塞的

3）async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数

3、defer和async的区别

区别主要在于执行时间，defer会在文档解析完之后执行，并且多个defer会按顺序执行，而async则是在js加载好之后就会执行，且哪个加载好就执行哪个，并非按顺序

解析：

在没有defer或async的情况下：会立即执行脚本，故通常建议把script放在body的最后

<script src="script.js"></script>

有async时：加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步），但是多个js文件的加载顺序不会按照书写顺序进行

<script async src="script.js"></script>

有defer时：加载后续文档元素的过程将和script.js的加载并行进行（异步），但是script.js的执行要在所有元素解析完成之后、DOMContentLoaded 事件触发之前完成，并且多个defer会按顺序进行加载

<script defer src="script.js"></script>

4、实现异步的方法

回调函数（Callback）、事件监听、发布订阅、Promise/A+、生成器Generators/yield、async/await

1. js异步编程进化史：callback  => promise => generator => async + await
2. async/await 函数的实现，就是将Generator函数和自动执行器包装在一个函数中
3. async/await可以说是异步终极解决方案了

        1）async/await函数相对于Promise，优势体现在：

• 处理then的调用链，能更清晰准确的写出代码
• 能优雅地解决回调地狱问题

        当然async/await函数也存在一些缺点，因为await将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了await，会导致性能的降低，代码没有依赖性的话，完全可以使用Promise.all的方式处理

        2）async/await函数对Generator函数的改进体现在以下三点：

• 内置执行器。Generator函数的执行必须依靠执行器，所以才有了co函数库，而async函数自带执行器，也就是说，async函数的执行与普通函数一模一样，只要一行；
• 更广的适用性。co函数库约定yield命令后面只能是Thunk函数或Promise对象，而async函数的await命令后面可以跟Promise对象和原始类型的值（数值、字符串和布尔值，但是这是等同于异步操作）
• 更好的语义。async和await比起星号和yield语义更清楚了，async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。