版权声明：该博文为博主原创文章，转载时请注明出处。
一、标签的位置
一般情况下，当我们在HTML代码中想要引入JavaScript代码时，都是通过<script>标签将外部的JavaScript文件引入，且将它们都放在页面的<head>元素中，举个栗子：
<!DOCTYPE html>
<html>
<head>
<title>js外部文件的引入</title>
<script type="text/javascript" src="example1.js"></script>\
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
</body>
</html>
这样做的目的就是为了将所有的外部文件放置在相同的位置，这种将所有的外部JavaScript文件引入到<head>元素中的做法，就意味着必须等到全部的JavaScript代码都被下载、解析和执行完成之后，才能开始呈现页面的内容（因为浏览器在遇到body标签时才开始呈现内容）。
这种引入方式在项目比较小的情况下使用对用户的体验也是很友好的，但是当我们的项目中外部的JavaScript文件数量巨大的时候，对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现延迟，而延迟期间的浏览器的窗口将会是一片空白。为了避免这一问题，现代web应用程序一般都把全部JavaScript引用放在<body>元素中页面内容的后面，例如：
<!DOCTYPE html>
<html>
<head>
<title>js外部文件的引入</title>
</head>
<body>
<!--这里放内容-->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
在web应用开发中，人们一般倡导将JavaScript代码当作外部文件引入，因为这样做的好处有:
1、可维护性：遍及不同HTML页面的JavaScript会造成维护问题。但把所有JavaScript文件都放在一个文件中，维护起来就轻松多了。而且开发人员因此也能够在不触及HTML标记的情况下集中精力编辑JavaScript代码；
2、可缓存：浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需要被下载一次。因此，最终结果就是能够使得页面加载变的快速；
3、适应未来：通过外部文件来包含JavaScript无需使用前面提到XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的。
二、延迟脚本
HTML4.01版本中，为<script>定义了defer属性，该属性表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。ie7及更早版本对嵌入脚本也支持这个属性。
而且，这个属性的用途是表明脚本在执行时不会影响页面的构造，所以在<script>标签中设置defer属性，就相当于告诉浏览器立即下载脚本代码，但是延迟执行，举个栗子：
<!DOCTYPE html>
<html>
<head>
<title>js外部文件的引入</title>
<script type="text/javascript" defer = "defer" src="example1.js"></script>
<script type="text/javascript" defer = "defer" src="example2.js"></script>
</head>
<body>
</body>
</html>
在这个栗子中，我们虽然把<script>元素放在文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实中，延迟脚本不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。
牢记，defer属性只适用于外部脚本文件，这一点在HTML5中已经明确规定，因此支持HTML5的实现会忽略给嵌入脚本设置的defer属性。ie4-ie7还支持对嵌入脚本的defer属性，但是ie8及之后的版本则完全支持HTML5规定的行为。
因为除了ie4，fire fix3.5，safari5和chrome浏览器支持defer属性外，还有别的浏览器不支持该属性，会直接选择忽略该属性，所以将延迟脚本放在页面底部仍然是最佳的选择！
三、异步脚本
HTML5为<script>元素定义了async属性。这个属性与defer属性类似，都用于改变处理脚本的行为。同样与defer类似，async也只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。举个栗子：
<!DOCTYPE html> <html> <head> <title>js外部文件的引入</title> <script type="text/javascript" async="async" src="example1.js"></script> <script type="text/javascript" async="async" src="example2.js"></script> </head> <body> </body> </html>
在以上的代码中，第二个脚本可能会在第一个脚本文件之前执行。因此，确保两者互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。
异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行，支持异步脚本的浏览器有Firefox3.6，safari5和chrome。
最近浏览
