前端-异步操作-合集

1.js延迟加载的方式有哪些

    defer 属性
    async 属性
    动态创建DOM方式
    使用jQuery的getScript方法
    使用setTimeout延迟方法

让JS最后加载

2.关于异步处理：Generator async promise 的区别

Generator async promise这三个api都是es6新增api，也都可以理解为异步的解决方案，
但是他们的适用场景不一样

 先说Generator：

简单点可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。

执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，
还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的
每一个状态。

形式上，Generator 函数是一个普通函数，但是有两个特征。
一是，function关键字与函数名之间有一个星号；
二是，函数体内部使用yield表达式，定义不同的内部状态

而Generator在适用场景上我们可以把它理解为任务的挂起，
在js中我们使用没有任务挂起这个概念的，直到Generator的出现，
在Generator的使用上我们通过yield定义不同的状态，执行的时候需要使用next进行
不同状态的调用，但是他是从上到下的，也就是只要需要yield就会停止执行后面的语句，
调用next后继续执行后面的语句，在实际项目开发中，我经常会遇到这样的需求，
填写用户信息的时候一般都是分成几步，这时候我们就可以利用Generator的任务挂起特性进行
不同步骤的数据存储。

 

然后就是promise

promise解决了传统异步操作回调函数更加合理强大，有了promise就可以将异步操作
以同步操作的流程表达出来，避免了层层嵌套的回调函数。
此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

例如我常见的一个需求

有两个接口A,B, 他们之间有依赖关系，B接口必须等到A接口的值返回成功后，
拿到A接口里面的一个属性才能请求，如果利用之前的回调函数形势的话就得是层层嵌套，
代码维护比较麻烦，如果利用promise的话我们可以用链式调用的形势直观的表示出这种关系

 


而Async是Generator函数的语法糖，Async的出现主要是为了解决另外一个问题，
刚刚说了Generator是解决任务的挂起，promise是解决异步回调问题，
而async就是吧异步的操作，变成队列模式，

因为async中使用await做状态的定义，调用的时候不需要next（），自动执行，
并且会讲每个await中promise中resolve结果赋值给await的变量上以供后面的步骤使用，
每一个await都会等到promise返回结果后才会继续自动往下执行，
这样就实现了我在日常生活中排队执行的概念，将所有的异步任务以同步的方式定义，
不需要担心那个快那个慢，因为她是一个一个自动向下的