script标签中defer和aysnc的区别

May 11, 2023#零碎知识点 #js833

AI-generated summary

The "async" attribute is used to indicate whether a browser should load a script asynchronously. When set to "async", the script will be executed asynchronously while being downloaded, without blocking the page's parsing and rendering. This allows scripts to be downloaded in the background without affecting the page's performance. However, scripts with the "async" attribute may not execute in the order they appear on the page, which can lead to unpredictable behavior if multiple scripts depend on each other. In such cases, it is recommended to use the "defer" attribute instead, which also loads scripts asynchronously but executes them in the order they appear on the page.

async#

一个用于<script>标签的布尔属性，用于指示浏览器是否应该异步加载脚本。当设置为 async 时，脚本将在下载时异步执行，不会阻止页面的解析和渲染。这使得脚本可以在后台下载，而不会影响页面的性能。

当设置为 async 时，脚本不会按照它们在页面中出现的顺序执行，而是在它们下载完成后尽快执行。这意味着，如果页面中有多个脚本依赖于彼此，使用 async 属性可能会导致一些不可预测的行为，因为这些脚本可能不按照正确的顺序执行。

defer#

因此，如果有多个脚本依赖于彼此，最好使用 defer 属性代替 async 属性。defer 属性也可以异步加载脚本，但会按照它们在页面中出现的顺序执行。