在 script 标签中使用 async 和 defer 属性：提升网站性能的最佳实践

2023-10-10 21:13:26

script 标签的加载行为

在 HTML 中，script 标签用于加载 JavaScript 脚本。当浏览器解析到一个 script 标签时，它会暂停解析 HTML 文档，并向服务器发送请求以获取脚本代码。获取到脚本代码后，浏览器会执行脚本代码，然后恢复解析 HTML 文档。

这种默认的加载行为会阻塞浏览器对 HTML 文档的解析，进而影响网站的加载速度。为了解决这个问题，HTML5 引入了 async 和 defer 属性，允许浏览器以非阻塞的方式加载和执行 JavaScript 脚本。

async 属性

async 属性允许浏览器在解析 HTML 文档时同时加载和执行 JavaScript 脚本。这意味着浏览器不会等待脚本加载完毕再继续解析 HTML 文档，而是会继续解析 HTML 文档，同时在后台加载和执行脚本代码。

使用 async 属性的优点是它可以提高网站的加载速度，因为浏览器可以在加载 HTML 文档的同时加载和执行 JavaScript 脚本，从而避免了脚本加载阻塞 HTML 解析的情况。但是，使用 async 属性也有一定的缺点，那就是脚本代码可能会在 HTML 文档解析完成之前执行，这可能会导致脚本代码无法访问到 HTML 文档中的元素。

defer 属性

defer 属性允许浏览器在解析 HTML 文档完成后再加载和执行 JavaScript 脚本。这意味着浏览器会先解析 HTML 文档，并在 HTML 文档解析完成后再加载和执行脚本代码。

使用 defer 属性的优点是它可以确保脚本代码在 HTML 文档解析完成之后执行，从而避免了脚本代码无法访问到 HTML 文档中的元素的情况。但是，使用 defer 属性也有一定的缺点，那就是它可能会延迟脚本代码的执行，从而影响网站的加载速度。

如何选择合适的属性

在选择 async 和 defer 属性时，需要考虑以下几点：

脚本代码是否需要在 HTML 文档解析完成后执行？
脚本代码是否需要访问 HTML 文档中的元素？
网站的加载速度是否重要？

如果脚本代码需要在 HTML 文档解析完成后执行，或者需要访问 HTML 文档中的元素，那么应该使用 defer 属性。如果脚本代码不需要在 HTML 文档解析完成后执行，并且不需要访问 HTML 文档中的元素，那么可以使用 async 属性。如果网站的加载速度非常重要，那么可以使用 async 属性。