<script>
标签的位置对网页性能和速度有相当的影响。常见的有以下两种情况:
1.将 JS 代码放在 head 标签中
当 JS 代码放在 head 中时,浏览器在解析 HTML 文档时,遇到 JS 代码要先停下来执行 JS 代码,然后再继续解析 HTML 文档。这样会导致页面加载速度变慢,用户需要等待很长时间才能看到页面内容。
2.将 JS 代码放在 body 标签中
当 JS 代码放在 body 标签底部时,浏览器在解析 HTML 文档时,遇到 JS 代码不需要立即执行,而是会继续解析 HTML 文档,直到解析到底部的 JS 代码时才会停下来执行,这样可以加快页面加载速度,提高用户体验。
<script>
标签还有 defer
和 async
属性。
1.defer
defer
属性告诉浏览器立即下载 JS 文件,但延迟执行 JS 文件,直到 HTML 文档解析完成后才会执行。多个带有 defer
属性的文件会按照它们在文档中的顺序依次执行。
<script src="path/to/your/script.js" defer></script>
2.async
async
属性告诉浏览器当 JS 文件下载完成后立即执行 JS 文件,不必等待页面解析完成。多个带有 async
属性的文件不保证执行顺序。
<script src="path/to/require.js" data-main="path/to/main.js"></script>
需要注意的是,使用 defer
和 async
属性的 <script>
标签只能用于外部脚本文件(即 src
属性指向的文件),不能用于内嵌的脚本代码。