加载

defer属性

HTML4.01为<script>标签定义了defer属性 等于告诉浏览器： 立即后台下载此脚本，但延迟执行，把线程让给页面的解析，等遇到</html>即渲染完毕后再按顺序依次执行 只适用于“外部脚本”文件，因此支持 HTML5的实现会忽略给“嵌入脚本”设置的defer属性

注意：并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行， 因此最好只包含一个延迟脚本。

async属性

HTML5为<script>标签定义了async属性，会覆盖 等于告诉浏览器： 立即后台下载此脚本，但不让页面等待此脚本执行，归为异步操作，把带宽让给其他资源，等加载完成后再立即执行，但不能保证各个脚本的执行顺序（所以互不依赖很重要），一定会在onload事件之前完成 也只是用于外部脚本文件

注意：在XHTML文档中，要严格把defer或async属性设置为defer="defer",async="async" 注意：同时有async和defer属性时，执行效果和async一致

动态创建<script>的DOM（用的最多，推荐，无警告）

把下面代码放到前面，其中.src代表要延迟加载的js脚本

<script type="text/javascript">
  function downloadJSAtOnload() {
    varelement = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

使用JQuery的getScript()方法

$.getScript("outer.js", function () {
  //回调函数，成功获取文件后执行的函数
  console.log("脚本加载完成");
});

使用setTimeout()方法（可能会收到google延迟警告）

<script type="text/javascript">
  function A() {
    $.post("/lord/login", { name: username, pwd: password }, function () {
      alert("Hello World!");
    });
  }
  $(function () {
    setTimeout("A()", 1000); //延迟1秒
  });
</script>

把<script>写到页面底部（可能会收到google延迟警告）