什么是异步加载javascript
使js文件脱离html解析的瀑布流加载，可以实现并行下载。
为什么要使用异步加载
默认方式是同步加载，一般将js写在head里，这就会导致在进行js加载的过程中，无法在其加载完成前对后续的内容进行操作，造成页面内阻塞，对用户体验很不友好。
异步加载的方式
1.defer异步加载
- 用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行
- h5的新属性，主要用来延迟脚本的执行，只支持IE浏览器
- defer只适用于外联脚本，如果script标签没有指定src属性，只是内联脚本，不要使用defer
- 如果有多个声明了defer的脚本，则会按顺序下载和执行
- defer脚本会在DOMContentLoaded和load事件之前执行
//异步加载 只能ie能用，不能在标签里写代码
<script src="./user.js" defer="defer"></script>
2.async异步加载
- HTML5新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码
- async只能加载外部脚本，不能把js写在script标签里
- 多个声明了async的脚本，其下载和执行也是异步的，不能确保彼此的先后顺序
- async会在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序
// w3c标准方法，能在标签里写代码
<script src="./user.js" aysnc="aysnc"></script>
3.创建script，插入dom中，叫做Script DOM Element：
test.js
console.log("I am test.js")
<script>
var script = document.createElement('script'); //创建
script.type = 'text/javascript'; //设置
//下载文件，当下载时它会发送请求，发请求过程中，页面已经解析完,系统解析很速度很快
var src = "test.js";
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(script, x);
// 控制台输出： I am test.js
</script>
4.onload时的异步加载
<script>
//兼容ie，因为ie的window上没有addEventListener
if(window.attachEvent){
window.attachEvent("load", asyncLoad);
}else{ //非ie
window.addEventListener("load", asyncLoad);
}
var asyncLoad = function () {
//异步操作的代码
}
</script>
DOMContentLoaded 与 OnLoad 事件
DOMContentLoaded : 页面(document)已经解析完成，页面中的dom元素已经可用。但是页面中引用的图片、subframe可能还没有加载完。
OnLoad：页面的所有资源都加载完毕（包括图片）。浏览器的载入进度在这时才停止。
这两个时间点将页面加载的timeline分成了三个阶段。
其他异步加载的方法：
- XHR Eval
- XHR Injection
- Script in Iframe
- document.write Script Tag
- setTimeout 延迟0秒
延迟加载（懒加载）
定义：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js，而是在需要的时候或稍后再通过js 的控制来异步加载。
就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片。
