javascript的同步异步加载

2018-04-02 本文已影响105人 avery1

我们知道的javascript基本是同步加载的，也就是阻塞式加载，即上面地没有完成下面的会等待上面的执行完才回继续执行，因为这样我们很多时候习惯把javascript标签放到页面的底部，这样能实现不阻塞页面的加载。

实际上我们还有些方法实现javascript的异步加载

1、定时器

setTimeOut和setInterval其实都是异步执行的例子，定时器的作用就是等待到合适的时间点在执行相应的代码。不然定时器同步的话那我们只能等待定时器执行完在执行其他的了。

当然用这个加载一些外部javascript是不现实的，因为我们没法确定这个time。

2、动态往页面添加script

这种方式实现的也是异步的加载，不会阻塞后面的代码的实行，但是直接往页面添加script也是有风险的，一般在一些方法内的调用是可以的。

直接写到script内然后在直接往页面添加的话，有些页面的初始化还是会被阻塞的。所以比较好的使用这种方法就是在方法内比如页面早已经加载完成点击某些按钮的时候执行。还有就是在window.onload方法里在执行。

3、defer

defer属性的作用是实现javascript的异步加载

4、async

async的左右也是javascript的异步加载

关于defer和async的区别，网上有很多说明。我们看下上图

图一表示正常的javascript加载执行的时候html的解析停止了也就是同步的。

图二表示async的javascript的加载的时候是异步的但是加载完成了马上就开始执行了

图三表示defer的javascript的加载也是异步但是他的执行是等到html加载完了在执行的。

参考文档