js延迟（异步）加载的6种方式

为什么要延迟加载js呢？

对于js的优化（关于js的延迟加载）的好处是有助于提高页面加载速度，js延迟加载就是等页面加载完成之后在加载js文件。

之所以要优化是因为HTML元素是按其在页面中出现的次序调用的，如果用javascript来管理页面上的元素（使用文档对象模型dom），并且js加载于欲操作的HTML元素之前，则代码将出错。也就是说，我们写了js语句来获取DOM对象，但由于DOM结构还没有加载完成，因此获取到的是空对象。

举个栗子吧~

• 111
• 222
• 333

你平时好像就是这么写的，但是你会发现控制台会报错：Uncaught TypeError :Cannot read property 'getElementByTagName' of undefined at...

这就是因为js加载执行于DOM结构之前，所以获取不到。简单的解决办法是把

//脚本2

//脚本3

​

上述代码添加 defer 属性，脚本将按照在页面中出现的顺序加载，因此可确保脚本1必定加载于脚本2和 脚本3之前，同时脚本2必定加载于脚本3之前。（补充：最近在看《高级程序设计》里面说，实际上延迟脚本并不一定会按照顺序执行，也不一定会在DOMContenterLoaded事件触发前执行，因此最好只包含一个延迟脚本）

示例2：

在上面的例子中，虽然把

//脚本2

//脚本3

​

上述代码添加async 属性，这三者的调用顺序是不确定的，脚本1可以在脚本2和脚本3之前会之后调用，这是完全不确定的。如果脚本2和脚本3需要依赖脚本1中的函数，那么不确定的调用顺序会导致错误。（补充：异步脚本一定会在页面的load事件前执行，但可能会在DOMContenterLoaded事件触发之前或之后执行）

所以，当页面的不同脚本之间彼此独立，且不依赖于本页面的其他任何脚本时，async是最理想的选择。

总结：defer和async的异同点

相同：

加载文件时不会阻塞页面渲染

对于内部的js不起作用

使用这两个属性的脚本中不能调用document.write方法

区别：

如果脚本无需等待页面解析，且无依赖独立运行，那么应使用 async。也就是每一个async属性的脚本都在它下载结束之后立即执行，同时会在window的load事件之前执行。

如果脚本需要等待解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。

三、动态创建DOM方式

//这些代码应被放置在标签前(接近HTML文件底部)

四、使用jquery的getScript方法

getScript() 方法通过 HTTP GET 请求载入并执行 JavaScript 文件。

语法：jQuery.getScript(url,success(response,status))

url（必写）：将要请求的 URL 字符串 success(response,status)（可选）：规定请求成功后执行的回调函数。 其中的参数 response - 包含来自请求的结果数据 status - 包含请求的状态（"success", "notmodified", "error", "timeout" 或 "parsererror"）

//加载并执行 test.js：

$.getScript("test.js");

//加载并执行 test.js ，成功后显示信息

$.getScript("test.js", function(){

alert("Script loaded and executed.");

});

五、使用setTimeout延迟方法

六、让js最后加载

将脚本元素放在文档体的底端（标签前面），这样脚本就可以在HTML解析完毕后加载了。但此方案的问题是，只有在所有HTML DOM加载完成后才开始脚本的加载/解析过程。对于有大量js代码的大型网站，可能会带来显著的性能损耗。