HTML 标签 <script>、<script async> 和 <script defer> 的区别?

7 min read

HTML 标签 <script>、<script async> 和 <script defer> 都是用于在 HTML 页面中引入 JavaScript 文件的标签，但它们的实现方式和效果略有不同：

  1. <script> 标签

<script> 标签是最常见的引入 JavaScript 文件的方式。当浏览器遇到 <script> 标签时，它会立即停止解析文档，去下载并执行脚本文件。因此，如果 JavaScript 文件很大或者加载速度较慢，就会影响页面的加载速度。

  1. <script async> 标签

<script async> 标签用于异步加载 JavaScript 文件。它告诉浏览器在下载 JavaScript 文件的同时继续解析 HTML 页面，不必等 JavaScript 文件下载完成再执行。这样可以提高页面的加载速度。但是，异步加载的 JavaScript 文件不能保证按照引入顺序执行。如果需要按照引入顺序执行代码，请使用 <script> 标签或者其他方法。

  1. <script defer> 标签

<script defer> 标签也用于异步加载 JavaScript 文件，但是它保证按照引入顺序执行代码。和 <script async> 不同，<script defer> 在 HTML 文档解析完成后再执行 JavaScript 文件。因此，页面可以在不阻塞 JavaScript 文件下载的情况下更快地加载完毕。但是，如果 JavaScript 文件非常大或者下载速度较慢，也会造成页面加载较慢。

综上所述， <script> 标签是最常见的引入 JavaScript 文件的方式，但是如果需要提高页面加载速度，可以考虑使用 <script async> 或者 <script defer> 标签。需要注意的是，异步加载的 JavaScript 文件要注意同步执行的顺序问题。