<script>标签 async与defer详解

首先，我们要知道浏览器的渲染过程，在网页渲染过程中，如果遇到<script> 标签是立即下载的，会阻塞页面的解析，显而易见的效果就是，你会发现页面有一段时间是空白的，因为浏览器只有等待js下载执行完毕后才会继续渲染。这样的用户体验是很差的，也是大多数开发者会把 <script> 放在</body>之前的原因。

延迟脚本

HTML4.01为<script> 标签增加了defer属性，这个属性是告诉浏览器脚本会立即被下载，但是等待页面解析之后再运行。
HTME5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会优于第二个执行。但是现实中，它们执行的先后顺序并不一定。(JaveScript高级程序设计)，因此把延迟脚本最好只有一个，并放在页面底部仍是最佳选择

异步脚本

HTML5定义了<script> 标签的async属性，与defer属性一样，仅适用于外部脚本，它告诉浏览器立即下载，但async并不保证执行的顺序，如果有两个异步脚本，那么请确保它们之间没有依赖关系，因为第二个可能先于第一个执行。在下载期间，页面解析会继续，异步脚本一定会在页面onload事件之前执行。