以为自己了解 Async、Defer 和Module？这 5 个误解会让你大吃一惊

文章预览

作者 | dev 来源 | 大迁世界 在2024年的今天，JavaScript的高效加载仍然是优化网页性能的关键。然而，许多开发者对脚本加载属性（尤其是 async 、 defer 和 module ）的细节理解还不够深入。本文将探讨这些属性的常见误解，分析它们各自的优缺点，并阐明如何有效使用它们。 误区一：async 和 defer 是一样的 实际上， async 和 defer 虽然都用于加载外部脚本而不阻塞HTML解析，但它们的工作方式有所不同： async ：脚本异步加载，一旦可用就立即执行。这意味着脚本可能在HTML解析完成之前或之后运行。 defer ：脚本与HTML解析并行加载，但只在整个文档解析完成后执行。 优缺点 Async 优点适用于不依赖于完全解析 DOM 的脚本，如分析。 缺点不能保证执行顺序。如果有多个异步脚本，它们的执行顺序可能会被打乱。 Defer 优点保持执行顺序。脚本在文档解析后运行， ………………………………