用 async 实现脚本懒加载：为什么做、怎么做、做到位的要点

在页面加载的长河里，脚本往往像不请自来的小插曲，拖慢速度、打断体验。用 async 异步加载脚本，就像给脚本装上“延迟入场”的入场券，让它在不影响主页面渲染的前提下完成加载，既不卡顿也不失必要资源的浪费。

为什么选择 async

现代网页中脚本用途各异：有的用于样式覆盖、有的负责行为绑定、还有的做性能优化。把所有脚本依次同步加载，会让主内容迟迟出不来，用户等待的耐心会被一点点消耗。使用 async，可以让关键资源先加载，非关键资源后加载，关键在“非关键”。

基本用法与关键点

在 HTML 中直接使用 script 标签的 async 属性即可：

<script src="/path/to/script.js" async></script>

默认情况下，浏览器会并行下载多个资源，但对某些资源的执行是串行的。使用 async，脚本会在下载完成后立即执行，但不会阻塞后续资源的加载。

高级场景：动态引入与延迟加载

有时候需要在特定条件或用户交互后才引入脚本，这时可以结合 JavaScript 动态创建 script 元素并设置 async：

function loadScript(src) {
  const script = document.createElement('script');
  script.src = src;
  script.async = true;
  document.head.appendChild(script);
}

这在做模块化开发或按需加载时非常有用，比如在用户点击导航或出现特定 DOM 时才加载对应的功能脚本。

避坑指南：常见误区与解决

• 误区一：将所有脚本都设置为 async，会导致“下载完成即执行”的并行策略在关键资源上也生效，关键资源仍可能打断主内容渲染。 解决：区分关键与非关键脚本，优先保证主内容和核心样式/脚本的同步加载。
• 误区二：在 script 标签中写逻辑，依赖 async 仍会在下载完成时执行，可能导致执行时机不当。 解决：将逻辑放到模块或 defer 风格的加载中，或使用 IIFE（立即执行函数表达式）并控制执行时机。
• 误区三：依赖 onreadystatechange 或 load 事件来判断执行完成，可能无法准确捕获异步加载的执行点。 解决：使用 import() 动态导入或模块的 onreadystatechange、或者 window.addEventListener('load', ...) 来关注整个页面加载完成事件。

性能与 SEO 的平衡

使用 async 并不会影响 SEO 的核心收录机制，搜索引擎更关注的是页面内容与结构的可用性。但需要注意，使用 async 异步加载脚本时，不要影响页面内容的呈现与可访问性。对搜索来说，确保内容可被检索到、结构清晰、可点击是更关键的。

结尾

用 async 异步加载脚本，本质是给页面加载与执行流程做“轻量级的分流”。在保证主内容与关键资源优先加载的前提下，让非关键脚本“适时入场”，既能提升页面的加载速度与体验，又能控制资源消耗。这不只是一种技术手段，更是一种以用户为中心的页面优化思路。