一、概述
最近重新开始学习js，在第一章的一个小节里写到了“脚本调用策略”，书上写的这部分不多，但是发现在我之前的（笔）面试中，问到的频率还是比较高的。自己一直习惯于直接把所有js文件写在head里，后来了解到优化后，会把js放在最底部，但并不太懂这样做的好处，而且其他的一些处理方式，自己也并未有过实际的操作。
在面试中对这部分的考察，主要考察的是程序的性能方面。程序的性能是一个项目不断地追求的，通常也是项目完成后需要长期做的一件事情，为了让用户的体验更好。性能优化的核心思想就是快，可以预先准备数据（如缓存的使用），可以按需获取，可以分段、异步获取等都是常见的优化手段。
而对于js的优化（关于js的延迟加载）的好处是有助于提高页面加载速度，js延迟加载就是等页面加载完成之后在加载js文件。
之所以要优化是因为HTML元素是按其在页面中出现的次序调用的，如果用javascript来管理页面上的元素（使用文档对象模型dom），并且js加载于欲操作的HTML元素之前，则代码将出错。也就是说，我们写了js语句来获取DOM对象，但由于DOM结构还没有加载完成，因此获取到的是空对象。
示例：
<head> <script type="text/javascript"> var ul = document.getElementsByTagName('ul')[0]; //获取ul var list = ul.getElementsByTagName('li'); for(var i =0;i<list.length;i++){ ul.appendChild(document.createElement('li')); } </script> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </body> </html>
上面的代码猛一看好像没啥问题，因为我们总是很习惯这样做，但是运行后发现控制台报错。
这就是因为js加载执行于DOM结构之前，所以获取不到。简单的解决办法是把<script>放在<body>后面。
二、js的同步加载和异步加载
同步加载，又称阻塞模式，是我们平时使用最多的方式，也就是直接将<script>写在<head>里。这种方式会阻止浏览器的后续处理，停止后续的解析，直到当前的加载完成。一般来说，同步加载是安全的，但如果我们js里设计到document内容输出、获取或修改DOM结构等行为，就会产生页面阻塞代码出错。所以一般就会建议把<script>写在页面最底部,以减少页面阻塞。(这种方式可能也是我们刚开始接触到js优化，最常使用的一种方式。)
异步加载，又称为非阻塞加载，在浏览器下载执行js的同时，还会继续后续页面的处理。这里也是一般面试会问到的一点，即js延迟加载的方式有哪些？
三、js延迟（异步）加载的六种方式
一般有六种方式；defer属性、async属性、动态创建dom方式、使用jquery的getScript方法、使用setTimeout延迟方法、让js最后加载。
写的是六种方式，实际上自己在项目中真实用到的也就是让js最后加载。所以对这所谓的六种方式，可能仅作为一种知识储备，当以后的项目有这种问题需求了，可以有不同的解决思路。
（一）defer属性
HTML 4.01为 <script>标签定义了defer属性（延迟脚本的执行）。
其用途是：表明脚本在执行时不会影响页面的构造，浏览器会立即下载，但延迟执行，即脚本会被延迟到整个页面都解析完毕之后再执行。
defer属性只适用于外部脚本文件，只有 Internet Explorer 支持 defer 属性。
并且defer属性解决了async引起的脚本顺序问题（见async的缺点），使用defer属性，脚本将按照在页面中出现的顺序加载和运行。
示例1：
//脚本1 <script defer src="js/vendor/jquery.js"></script> //脚本2 <script defer src="js/script2.js"></script> //脚本3 <script defer src="js/script3.js"></script>
上述代码添加 defer 属性，脚本将按照在页面中出现的顺序加载，因此可确保脚本1必定加载于脚本2和 脚本3之前，同时脚本2必定加载于脚本3之前。（补充：最近在看《高级程序设计》里面说，实际上延迟脚本并不一定会按照顺序执行，也不一定会在DOMContenterLoaded事件触发前执行，因此最好只包含一个延迟脚本）
示例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>defer练习</title>
</head>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
<body>
<!--这里是内容-->
</body>
</html>
在上面的例子中，虽然把<script>放在里<head>里，但是包含的脚本会延迟到整个页面之后，即延迟到浏览器遇到</html>标签后再执行。同时，在XHTML文档中，要把defer属性设置为defer="defer"
（二）async属性
HTML 5为 <script>标签定义了async属性。添加此属性后，脚本和HTML将一并加载（异步），代码将顺利运行。
浏览器遇到async脚本时不会阻塞页面渲染，而是直接下载然后运行。但这样的问题是，不同脚本运行次序就无法控制，只是脚本不会阻止剩余页面的显示。
async属性只适用于外部脚本文件。
示例：
//脚本1 <script async src="js/vendor/jquery.js"></script> //脚本2 <script async src="js/script2.js"></script> //脚本3 <script async src="js/script3.js"></script>
上述代码添加async 属性，这三者的调用顺序是不确定的，脚本1可以在脚本2和脚本3之前会之后调用，这是完全不确定的。如果脚本2和脚本3需要依赖脚本1中的函数，那么不确定的调用顺序会导致错误。（补充：异步脚本一定会在页面的load事件前执行，但可能会在DOMContenterLoaded事件触发之前或之后执行）
所以，当页面的不同脚本之间彼此独立，且不依赖于本页面的其他任何脚本时，async是最理想的选择。
总结：defer和async的异同点
相同：
- 加载文件时不会阻塞页面渲染
- 对于内部的js不起作用
- 使用这两个属性的脚本中不能调用document.write方法
区别：
- 如果脚本无需等待页面解析，且无依赖独立运行，那么应使用
async。也就是每一个async属性的脚本都在它下载结束之后立即执行，同时会在window的load事件之前执行。 - 如果脚本需要等待解析，且依赖于其它脚本，调用这些脚本时应使用
defer，将关联的脚本按所需顺序置于 HTML 中。
（三）动态创建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>
补充知识点：addEventListener与attachEvent
（四）使用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代码，给网页加载留出时间
<script type="text/javascript"> function A(){ $.post("/lord/login",{name:username,pwd:password},function(){ alert("Hello World!"); }) } $(function (){ setTimeout("A()",1000); //延迟1秒 }) </script>
（六）让js最后加载
将脚本元素放在文档体的低端，这样脚本就可以在HTML解析完毕后加载了。但此方案的问题是，只有在所有HTML DOM加载完成后才开始脚本的加载/解析过程。对于有大量js代码的大型网站，可能会带来显著的性能损耗。