当HTML页面解析到以下标签时：

  • <script>，HTML解析会中断，脚本会被立即下载并开始执行，执行结束后，HTML解析继续。
  • <script async>，脚本的下载、执行过程与HTML解析过程并行，脚本执行完毕可能是在HTML解析完毕之前。当该脚本与页面其它脚本独立时，可以使用async，比如用作页面统计分析时。

  • <script defer>，脚本仅在下载的过程与HTML解析过程并行，脚本的执行将在HTML解析完毕之后进行。如有多个含有defer的脚本，则脚本的执行顺序将按照document中出现的位置，从上到下依次顺序执行。

    注意，在没有src属性的情况下，async和defer属性会被忽略。

延伸问题，为何把CSS<link>标签放在<head></head>之间，把JS<script>标签放在</body>之前？

  • 把<link>标签放在<head></head>之间

    把<link>标签放在<head></head>之间是规范要求如此。另外，这种写法可以让页面有序的逐步呈现，提高了用户体验。如果将样式文件放在文档底部，会造成HTML的样式渲染延后，用户可能会看到空白页或者一堆没有样式的页面。

  • 把<script>标签恰好放在</body>之前

    脚本在下载和执行期间会阻止HTML的解析。把<script>标签放在底部，能保证HTML首先完成解析，将页面内容尽早呈现给用户。

    但是，当脚本里包含document.write()时，不应放在底部，但是现在规范要求不使用document.write()。同时，将<script>标签放在底部时，在整个文档（document）被解析之前，浏览器不会开始下载脚本。也许，一个比较好的方法是，在<script>添加defer属性，然后将其放在<head>标签中。