拒绝白屏焦虑：HTML Script 标签加载优化的那些“潜规则”

用户点开链接，期待看到的是丰富内容，结果面对的是漫长的白色等待屏幕。很多时候，这种糟糕体验的罪魁祸首并非服务器响应慢，而是JavaScript 阻塞了页面的解析与渲染。作为开发者，我们常习惯性地把 <script> 放在 </body> 前，但这仅仅是入门操作。真正的性能提升，藏在标签属性的细节与加载策略的选择里。

默认情况下，HTML 解析器遇到 <script> 标签会暂停解析，立即下载并执行脚本。如果此时网络波动或脚本体积过大，整个页面就像被冻住一样，无法呈现任何 UI。要打破这种僵局，必须理解浏览器的执行机制，并针对性地调整脚本属性。

最常被误用的两个属性是 async 和 defer。async 适合那些不需要依赖 DOM、也不需要与其他脚本交互的工具类代码，比如数据统计追踪、广告 SDK。它不会阻塞 HTML 解析，脚本下载完成后立即执行，不管 DOM 是否构建完毕。这意味着你的统计代码可能比页面标题还早运行，但这通常无所谓，因为数据上报本身就不影响视觉展示。

而业务核心逻辑则应该交给 defer。当你希望脚本在 DOM 完全构建后执行，且保持原有的书写顺序时使用它。加上 defer 后，脚本下载异步进行，但执行会推迟到 HTML 解析结束后的 DOMContentLoaded 阶段之前。想象一下，这就像餐厅后厨提前备菜（下载），但上菜顺序严格按照菜单（DOM 结构）来，确保用户看到的内容完整无误。如果不确定业务脚本是否有严格的依赖关系，优先选用 defer 是最稳妥的方案。

现代开发中，<script type="module"> 已成为主流。值得注意的是，带有 module 类型的脚本天然等同于添加了 defer 属性，它们同样不会阻塞解析，且按顺序执行。不过这里有个隐形坑点：模块加载需要遵循同源策略，且浏览器对旧版引擎支持不佳。若项目仍需兼容 IE 或老旧移动端，传统语法依然有存在价值，或者通过 Babel 做降级处理。

对于非首屏可见的功能模块，彻底放弃一次性加载所有脚本的想法。利用动态导入（Dynamic Import）实现按需加载，能显著减小首屏体积。例如，将图表库、富文本编辑器等重量级组件，放在用户滚动到特定区域或通过按钮触发后再请求资源。这种“延迟满足”的策略，直接降低了首次内容绘制的时间指标。

别忘了检查脚本中的外部依赖。如果某个库引用了 CDN 且该 CDN 在国内访问不稳定，不妨将其内联关键代码或托管至自有服务器。有时候，一个不起眼的预加载提示 preload 就能让关键脚本更早被发现。

脚本优化不仅是技术取舍，更是对用户体验的尊重。从简单的添加 defer 属性，到精细化的按需动态加载，每一个改动都在为用户节省几秒钟的等待时间。当页面流转起来像呼吸一样自然，用户才会真正感受到产品背后的用心。别再让一行死板的标签成为性能瓶颈，灵活运用这些策略，让每一次加载都物尽其用。