异步加载js的三种方式及优点

什么是js的异步加载？

javascript 从执行机制来说是一个单线程加事件队列的语言，即代码会一行一行自上而下往下执行。js中执行有两种方式，即 同步 和 异步。
这里简单介绍下 同步 和 异步 ：

同步：从上到下执行，如果上件事情没有完成，就继续做上件事情，直到等上件事情完成后才会去做下一件事情js的大部分编程都是同步的。

异步：如果一个任务出现一个或者多个回调函数(callback)，则上一个任务执行完成后，不是立刻执行下一个任务，而是执行回调函数。后一个任务也不是等前一个任务结束就立马执行。所以程序的执行顺序与任务的排列顺序是不一致的（这叫做异步）。说到这就得介绍下异步的执行机制。

异步执行的机制：
1.所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2.主线程之外，还存在一个"任务队列"（task queue）。只要执行过程中碰到了异步任务，
  就会把异步任务添加到"任务队列"中。
3.一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。
那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

为什么要异步加载？

1.上面说了因为js单线程，同一时间只能做一件事。
2.一旦执行过程中遇到等待的任务（如网络请求、定时任务）就会卡住，这时页面出现空白，
  这种等待让用户体验很差。
3.但是异步不会阻塞代码执行，页面就不会卡住，所以使用异步，异步采用回调callback的形式。

异步加载js的三种方式？

1.defer 异步加载

1.1 特点 ：只有IE适用，需等到dom文档全部解析完（dom树生成完，才会被执行）

<script type = 'text/javascript' src = 1.js' defer = 'defer'></script>

2.async 异步加载

2.1 特点：加载完就执行，async 只能加载外部脚本，不能把js代码写在script标签里

<script type = 'text/javascript' src = 'tools.js' defer></script>

3.动态创建script标签

IE浏览器 上有一个状态码，script.readyState，功能与 ***script.onload***相似
script.readyState = ‘loading’ 最开始的值
script.readyState = ‘complete’ || ‘loaded’–>
监听这个方法的事件： onreadystatechange