JS的异步加载的三种方法

为什么要引入异步加载JS

先来了解两个线程一个叫GUI渲染线程，一个JS引擎线程。GUI渲染线程负责负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等。JS引擎线程负责JS引擎线程负责解析Javascript脚本，运行代码。注意：GUI渲染线程与JS引擎线程是互斥的
所以当浏览器解析器遇到<script>标签时会立即加载（加载：下载，解析和执行），浏览器对其他资源和文档的加载会停止。为了提高页面的加载速度，得让JS不阻塞其他资源的加载。提高页面加载速度的最简单快速的方法就是将脚本文件放到body底部。但这并不是提高页面加载速度最优方案的方案

defer属性

defer异步加载：dom文档全部被解析完才会执行JS，只有IE能用

<script type="text/javascript" src="tool.js" defer="defer">
var a =3;
</script>

等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。也就是说defer属性的<script>就类似于将<script>放在body的效果。

async属性

async属性是HTML5新增的属性，IE10和浏览器都是支持该属性的。该属性的作用是让脚本能异步加载，也就是说当浏览器遇到async属性的<script>时浏览器加载css一样是异步加载的。一般用于外部脚本文件.当同时存在defer和async，defer的优先级更高

<script type="text/javascript" src="tool.js" async="async">
</script>

创建script标签标签插入dom中按需操作

<script>
    var script = document.createElement('script');
    script.type = 'text/javascript'
    script.src = 'demo.js';
    document.head.appendChild(script);
</script>