最近做一个H5项目，一套代码跑在多个app webview，这个地方涉及到很多js文件的引入和加载，做了一个js加载逻辑

怎么异步加载script

async vs defer attributes
这个两个属性在script标签上，已经开始支持了

script 属性

defer 属性是一个布尔属性。
defer 属性规定当页面已完成加载后，才会执行脚本。
注意：defer 属性仅适用于外部脚本（只有在使用 src 属性时）。
注意：有多种执行外部脚本的方法：
如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本

html加载过程

图例

图例

<script>

如果script标签没有任何属性，页面加载顺序如下

浏览器加载时间序列

<script async>

异步下载,可以和html解析同时进行，但是执行时会阻塞html的解析

浏览器加载时间序列

<script defer>

设置成defer属性，js的执行，会放到页面解析完成后才执行

浏览器加载时间序列

使用情况

使用这个两个属性有如下规则

1. 如果一个并不依赖其他模块化的js文件，可以使用async属性
2. 如果一个js文件，依赖其他js库和文件，建议使用defer属性
3. 如果一个脚本本身很小，并且被脚本依赖，建议直接放到头部加载

支持情况

ie9 及以下，不支持defer属性，ie9以下不建议使用defer属性，
async 是HTML5的属性，这个是异步加载

参考

参考文档
github