脚本标签同步和延迟

在前端开发中，我们通常会使用 <script> 标签来引入 JavaScript 文件。这些文件可以是外部文件，也可以是内联脚本。

在引入脚本时，有两个重要的属性：async 和 defer。这两个属性可以帮助我们控制脚本的加载方式，以提高页面性能和用户体验。下面将详细介绍这两个属性的作用、区别和使用方法。

同步方式

默认情况下，脚本是同步加载的。这意味着当浏览器遇到 <script> 标签时，它会暂停 HTML 解析，并立即下载和执行脚本。只有在脚本完成执行后，浏览器才会继续解析 HTML。

这种同步方式对于小型网站可能没有太大影响，但对于较大的网站或包含大量脚本的页面，它会导致页面加载速度变慢，用户等待时间加长。

异步方式

为了解决同步加载会降低页面性能和用户体验的问题，HTML5 引入了 async 和 defer 属性。这两个属性可以使脚本以异步方式加载，而不会阻塞 HTML 解析。

异步加载的脚本可以在页面继续解析 HTML 的同时开始下载。当脚本下载完成后，它会在 HTML 解析完毕之前执行。这意味着异步脚本可能不会按照你期望的顺序执行，因为它们的加载时间可能不同。

async 属性

使用 async 属性可以使脚本以异步方式加载，并在下载完成后立即执行。这种方式适用于那些不需要等待页面全部加载完毕就可以运行的脚本。例如，Google Analytics 的跟踪代码就可以使用 async 属性加载：

<script async src="https://www.google-analytics.com/analytics.js"></script>

defer 属性

与 async 不同，使用 defer 属性可以使脚本以异步方式加载，并在页面解析完毕之后执行。这种方式适用于那些需要等待页面全部加载完毕才能运行的脚本。

例如，在下面的例子中，我们将 jQuery 库和自定义脚本都使用 defer 属性加载：

<script defer src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script defer src="myscript.js"></script>

在页面加载时，jQuery 和自定义脚本都会异步下载。但是，它们都将在 HTML 解析完毕之后按照顺序执行。

注意事项

在使用 async 和 defer 属性时，需要注意以下几点：

1. 异步脚本不保证按照你所期望的顺序执行。如果你需要确保某个脚本在其他脚本之前执行，那么最好将它放在其他脚本之前或使用同步方式加载。

2. async 和 defer 属性只适用于外部脚本。对于内联脚本，它们始终是同步加载的。

3. 不要滥用 async 和 defer 属性。在某些情况下，同步加载可能比异步加载更合适。例如，在页面加载时必须执行的脚本应该使用同步方式加载。

总结

通过使用 async 和 defer 属性，我们可以控制脚本的加载方式，以提高页面性能和用户体验。然而，我们需要注意一些细节，以确保正确地使用

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9182