JavaScript 异步加载详解

JavaScript 异步加载

1.什么是异步加载js
使js文件脱离html解析的瀑布流加载，从而使js可以并行下载。
2.为什么要异步加载
首先来说页面渲染的过程：

1. 根据HTML生成 DOM Tree;
2. 根据css生成 CSSOM
3. 根据 DOM Tree和 CSSOM生成 RenderTree
4. 根据RenderTree开始渲染和展示
5. 遇到js 会执行和阻塞渲染

因为js可以操作dom，所以当渲染树建立后，如果动态操作了dom，导致页面重新渲染，也就是重排reflow,这个时候就需要异步加载了
3.如何异步加载
下面就说说javascript异步加载的三种方案
(1) defer IE专用（IE9）整个页面解析完执行代码

<script defer src="srcipt.js"></script> 
//这里的js文件是我自己引入的

(2) async 加载完成之后立刻执行，只能加载外部脚本w3c标准

<script defer src="srcipt.js"></script>
//这里的js文件是我自己引入的

(3)创建一个script标签，插入到DOM中，加载完毕后callback 兼容性最好的

var script = document.createElement("script");
script.type = 'text/javascript';
script.src = 'dome.js';//异步下载demo.js文件
document.head.appendChild(script);//把标签添加到页面才会执行

var script = document.createElement("script");
script.type = 'text/javascript';
script.src = 'dome.js';//异步下载demo.js文件
document.head.appendChild(script);//把标签添