如何检测已引入 js 文件是否没有异步处理？

<script> 标签通常用于引入外部 JavaScript 文件。如果文件没有以异步方式加载，则会在页面加载过程中阻塞 DOM 的构建和渲染。</script>

如何检查 JS 文件是否没有异步处理？

通过审查源代码可以检查 JS 文件的加载方式。以下步骤可以帮助您检查：

1. 打开浏览器的开发工具（例如，Chrome 的“检查”）。
2. 导航到“来源”面板。
3. 选择“脚本”选项卡。

4. 查看<script> 标签中是否包含以下属性：</script>

   • defer：这表示脚本将在 DOM 构建后异步加载。
   • async：这表示脚本将在 DOM 构建后立即异步加载，并且不阻塞渲染。

没有异步处理的识别标志

如果 <script> 标签中没有 defer 或 async 属性，则表示该文件没有异步处理。您还可能会注意到以下标志：</script>

• 浏览器控制台中的“加载阻止”警告。
• 页面加载速度变慢。
• 渲染过程出现延迟。

后果

没有异步处理的 JS 文件会对页面性能产生如下影响：

• 浏览体验不佳
• 页面加载时间延长
• 内存占用增加
• 用户交互延迟