站在速度与兼容的角度，看浏览器对 defer 与 async 的优化利器

defer 与 async 属性的诞生

在现代网页开发中，JavaScript 已成为不可或缺的一部分。然而，JavaScript 脚本的加载和执行可能会对页面加载速度产生负面影响，尤其是在脚本体积较大或脚本之间存在依赖关系时。

为了解决这个问题，HTML5 引入了 defer 和 async 属性，这两种属性可以帮助浏览器更智能地加载和执行 JavaScript 脚本，从而优化页面加载速度。

defer 与 async 的工作原理

defer 属性

defer 属性的作用是延迟脚本的执行，直到页面中所有 HTML 元素都加载完毕。浏览器会在解析 HTML 文档时遇到 defer 脚本，但不会立即执行它，而是将其放在一个队列中。当所有 HTML 元素加载完毕后，浏览器再按顺序执行 defer 脚本。

async 属性

async 属性的作用是允许脚本并行加载和执行，而不必等到 HTML 元素加载完毕。浏览器会在解析 HTML 文档时遇到 async 脚本，立即将其加载，并在加载完成后立即执行。这意味着 async 脚本可以在 HTML 元素加载之前或之后执行，具体取决于脚本的执行时间和浏览器环境。

defer 与 async 的区别

加载时机

defer 脚本会在 HTML 元素加载完毕后执行，而 async 脚本可以在 HTML 元素加载之前或之后执行。

执行顺序

defer 脚本会按照出现的顺序执行，而 async 脚本则没有执行顺序的保证。

对页面渲染的影响

defer 脚本不会阻塞页面渲染，而 async 脚本可能会阻塞页面渲染。

defer 与 async 的使用技巧

defer 脚本

defer 脚本适用于不依赖于 HTML 元素的脚本，例如统计脚本、分析脚本等。这些脚本可以延迟执行，而不会影响页面的渲染和交互。

async 脚本

async 脚本适用于需要立即执行的脚本，例如页面初始化脚本、交互脚本等。这些脚本需要在页面加载完成后立即执行，以确保页面能够正常运行和交互。

defer 与 async 的注意事项

兼容性

defer 和 async 属性都是 HTML5 的新特性，在较旧的浏览器中可能不支持。因此，在使用这些属性时，需要考虑浏览器的兼容性。

脚本依赖关系

如果脚本之间存在依赖关系，则需要按照依赖关系的顺序加载和执行脚本。否则，可能会导致脚本执行错误或页面功能异常。

脚本执行时间

如果脚本执行时间过长，可能会阻塞页面渲染或影响页面交互。因此，需要尽量优化脚本的执行效率，避免长时间阻塞页面。

结语

defer 和 async 属性是优化页面加载速度的利器，可以帮助浏览器更智能地加载和执行 JavaScript 脚本。通过合理使用 defer 和 async 属性，可以提高页面的加载速度和响应速度，从而提升用户体验。