我们知道，JavaScript的解析执行过程是同步的。因此，当我们在文档的<head>元素中包含JavaScript文件时，意味着必须等到全部JavaScript代码都被下载解析执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。
为了避免这个问题，我们可以把JavaScript引用放在<body>元素中页面内容的后面。这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
除此之外，<script>标签还定义了async和defer属性来异步延迟脚本的执行。
延迟脚本
defer: 表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。看下面的例子：
<head>
<title>defer</title>
<script defer="defer" src="example1.js"></script>
<script defer="defer" src="example2.js"></script>
</head>
在这个例子中，虽然我们把<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行。但在现实中，延迟脚本并不一定会按照顺序执行。因此最好只包含一个延迟脚本。
异步脚本
async:表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。看下面的例子：
<head>
<title>async</title>
<script async src="example1.js"></script>
<script async src="example2.js"></script>
</head>
标记为async的脚本并不保证按照指定它们的先后顺序执行。在以上代码中，第二个脚本文件可能会在第一个脚本文件之前执行。因此，确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。
两者的区别
- async是异步脚本执行与页面加载，即可以在页面加载的过程中解析执行脚本；而defer则需要等到页面解析显示完毕之后再执行。
- 规范要求设置了defer属性的脚本按照顺序执行，而异步脚本无法保证它们的执行顺序。
