【HTML】script标签asyncdefer
<script> 标签中的 defer 和 async 属性是用来控制外部脚本加载和执行时机的重要机制，它们可以帮助优化网页加载速度和用户体验。
async 属性
async 表示异步加载脚本。当 <script> 标签包含 async 属性时：
- 脚本下载和其他资源（如 HTML、CSS 和其他脚本）的下载同时进行，不会阻塞页面渲染。
- 脚本在下载完成后立即执行，不论文档解析是否完成。
- 多个带有
async的脚本之间没有执行顺序保证，哪个先加载完就先执行。 - 如果希望脚本在 DOMContentLoaded 事件之前执行，可以将
async放在<body>结束标签前。
示例
<script src="example.js" async></script>
defer 属性
defer 表示延迟加载脚本直到文档解析完毕（DOMContentLoaded）。当 <script> 标签包含 defer 属性时：
- 脚本同样异步下载，不会阻塞页面渲染。
- 所有的
defer脚本都会等到文档解析完成后，在DOMContentLoaded触发前再按它们在源代码中的顺序依次执行。（所以会阻塞DOMContentLoaded的触发） - 这意味着你可以依赖于前面的
defer脚本来执行后续的脚本，保持了执行顺序的一致性。
示例
<script src="first.js" defer></script>
<script src="second.js" defer></script>
总结
- 使用
async更适合那些不影响页面初始渲染且相互间无依赖关系的脚本。 - 使用
defer更适合那些需要按照特定顺序执行的脚本，或者脚本依赖于完整的 DOM 树。
注意事项
- 如果一个
<script>标签同时包含async和defer，大多数浏览器会忽略async并仅保留defer的效果。 - 在使用
async和defer时，确保脚本的逻辑能够处理非同步执行带来的影响，比如可能需要等待 DOM 元素可用才能操作它们。
通过合理利用这两个属性，可以显著改善网站的加载时间和用户体验。