移动端网页脚本阻塞解析时如何通过 async 属性优化
脚本标签未设置 async 属性会暂停 HTML 解析，通过添加该属性可让浏览器在后台下载脚本并继续解析页面。
脚本阻塞解析的原因
浏览器在构建 DOM 树时，遇到 script 标签会暂停 HTML 解析，等待脚本下载、解析和执行完毕后才能继续。特别是没有 async 或 defer 属性的脚本，会阻塞渲染并暂停解析。虽然预加载扫描器会提前请求资源，但过多的脚本仍会导致主线程阻塞，影响页面加载速度。
在移动端网络环境下，脚本阻塞会延长首屏渲染时间。浏览器在解析 HTML 时，遇到非阻塞资源如图片会立即请求并继续解析，但 script 元素会强制中断这一过程。预加载扫描器虽然能在后台请求 CSS、JavaScript 和字体等高优先级资源，但无法完全消除脚本对解析的阻塞影响。
async 属性的作用机制
async 属性告诉浏览器异步下载脚本，下载完成后立即执行，且不会阻塞 HTML 解析。浏览器会在解析 HTML 的同时下载脚本，下载完成后在空闲时执行，从而允许页面继续渲染。这能有效减少脚本对页面加载的阻塞时间。
添加 async 属性后，脚本下载与 HTML 解析并行进行。浏览器在解析 HTML 时，预加载扫描器会发现脚本并开始下载，此时解析继续。当脚本下载完成，浏览器会在主线程空闲时执行它，不会暂停 HTML 解析。这种方式特别适合独立的第三方脚本，如分析工具或广告代码。
具体排查与验证步骤
打开浏览器开发者工具，切换到 Network（网络）面板，勾选 Disable cache（禁用缓存）。刷新页面，观察脚本文件的加载状态。如果脚本文件显示为红色或黄色，且在页面加载期间一直处于 Pending（等待）状态，说明脚本可能阻塞了解析。检查脚本标签是否缺少 async 或 defer 属性。
在开发者工具的 Performance（性能）面板中录制页面加载过程，查看 Main（主线程）活动。如果解析 HTML 的过程被脚本执行打断，且长时间处于忙碌状态，说明存在阻塞。添加 async 属性后重新录制，观察脚本下载是否变为绿色（完成），且解析过程是否更加连续，从而判断优化效果。
判断优化结果的方法
对比优化前后的页面加载时间。在 Network 面板中，查看脚本文件的“Time to First Byte”（首字节时间）和“Total Time”（总时间）。优化后，脚本下载时间应显著减少，且页面加载总时间应缩短。同时，观察页面是否更早显示内容，首屏渲染时间是否提前。
使用 Chrome DevTools 的 Lighthouse（灯塔）工具进行性能评分。优化前，脚本阻塞可能导致 Lighthouse 的 Performance（性能）评分较低。添加 async 属性后，重新运行 Lighthouse，查看 Performance 评分是否提升，以及“Time to Interactive”（可交互时间）是否缩短。如果评分提高且交互时间减少，说明 async 属性有效缓解了阻塞问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。