你在公司打开一个内部系统，页面半天不动，进度条卡在90%，同事在旁边催着要数据，你只能尴尬地刷新再等。这种情况，很可能就是JS脚本在“拖后腿”。
什么是异步加载JS脚本
浏览器加载网页时，默认会按顺序下载并执行JavaScript文件。一旦遇到一个大的JS文件，整个页面就会停下来等它加载完，这种模式叫“同步加载”。而异步加载，就是告诉浏览器：“这个脚本你先去下，别挡住页面渲染，下完了再执行”。
比如你在一个销售报表页面引入了图表库，如果用同步方式，用户得等到图表脚本完全加载才能看到表格标题和筛选条件。但换成异步加载，页面结构能立刻显示，用户可以先操作筛选，脚本在后台悄悄准备。
怎么实现异步加载
最简单的方式是在 script 标签里加上 async 或 defer 属性。
<script src="chart.js" async></script>加了 async 的脚本会异步下载，下载完成后立即执行，不保证执行顺序。适合独立功能的脚本，比如埋点统计、客服浮窗。
<script src="utils.js" defer></script>
<script src="main.js" defer></script>而 defer 也是异步下载，但会等到整个页面解析完成后再按顺序执行，适合有依赖关系的多个脚本。
实际场景对比
市场部上线了一个新活动页，最初所有JS都同步加载，移动端用户平均等待4秒才看到内容，跳出率超过70%。后来把轮播图、分享按钮这些非核心功能的脚本加上 async，首屏时间降到1.5秒以内，转化率明显提升。
不是所有脚本都适合异步。如果某个脚本负责修改页面基础样式或阻止非法访问，就得让它优先执行。但大多数情况下，特别是第三方插件、广告代码、社交组件，完全可以异步处理。
现在很多办公系统都在用React或Vue这类前端框架，它们默认就采用模块化加载，核心代码先跑，其余按需拉取。如果你还在维护老系统，手动加几个 async 或 defer，可能就是一次低成本高回报的优化。