JavaScript异步加载的三种方式

1. defer —— 以前适用于 IE，现在适用于所有主流浏览器

defer 属性规定是否对脚本进行延迟执行；

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。如果缺少 src 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。对动态嵌入的脚本使用 async=false 来达到类似的效果。

defer 属性的值只有 defer 一个，即 defer = ‘defer’，可直接写 defer

用法：在 script 标签里加入 defer 属性即可，适用于所有 script 脚本

1	<script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js" defer></script>

添加 defer 属性后，js 脚本在所有元素加载完成后执行，而且是按照 js 脚本声明的顺序执行

2. async —— h5 新属性

async 是否在允许的情况下异步执行该脚本。

async 的用法和 defer 一样，但 async 只适用于外部引用的脚本，即 script 有 src 属性时才可使用

1	<script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js" async></script>

不同的是，添加 async 属性后，js 脚本是乱序执行的，不管你声明的顺序如何，只要某个 js 脚本加载完就立即执行

3. 动态生成 script 标签

在 js 里创建 script 标签，插入 DOM 中，加载完成后 callback

function loadScript(url, callback) {
  var s = document.createElement("script");
  s.type = "text/javascript";
  if (s.readyState) {
    s.onreadystatechange = function() {
      //兼容IE
      if (s.readyState == "complete" || s.readyState == "loaded") {
        callback();
      }
    };
  } else {
    s.onload = function() {
      //safari chrome opera firefox
      callback();
    };
  }

  s.src = url;
  document.head.appendChild(s);
}

这样所有的 js 脚本都会在 onload 事件后才加载，onload 事件会在所有文件内容（包括文本、图片、CSS 文件等）加载完成后才开始执行，极大的优化了网页的加载速度，提高了用户体验