js 延迟加载的方式有哪些
之所以采用延迟加载的原因就是为了提高页面加载速度，因为js资源在dom之前会阻塞dom的解析与渲染。
# 1. defer 属性
HTML 4.01 为 < script >标签定义了 defer属性。
表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。
在< script > 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。
# 2. async 属性
HTML 5为 < script >标签定义了async属性。添加此属性后，脚本和HTML将一并加载（异步），代码将顺利运行。
浏览器遇到async脚本时不会阻塞页面渲染，而是直接下载然后运行。但这样的问题是，不同脚本运行次序就无法控制，只是脚本不会阻止剩余页面的显示。
async属性只适用于外部脚本文件。
# 动态创建DOM方式
//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtOnload(){
var element = 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 使用jquery的getScript方法
# 使用setTimeout延迟方法
# 让js最后加载
将脚本元素放在文档体的底端（</ body >标签前面），这样脚本就可以在HTML解析完毕后加载了。
但此方案的问题是，只有在所有HTML DOM加载完成后才开始脚本的加载/解析过程。对于有大量js代码的大型网站，可能会带来显著的性能损耗。