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

  • <script>,HTML解析会中断,脚本会被立即下载并开始执行,执行结束后,HTML解析继续。
  • <script async>,脚本的下载、执行过程与HTML解析过程并行,脚本执行完毕可能是在HTML解析完毕之前。当该脚本与页面其它脚本独立时,可以使用async,比如用作页面统计分析时。
  • <script defer>,脚本仅在下载的过程与HTML解析过程并行,脚本的执行将在HTML解析完毕之后进行。如有多个含有defer的脚本,则脚本的执行顺序将按照document中出现的位置,从上到下依次顺序执行。

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

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

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

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

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

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