关键在于控制JavaScript执行时机以避免阻塞HTML解析。将非首屏JS设为async或动态导入，首屏必需JS置于</body>前或加defer，禁用document.write和同步XHR，并用DevTools验证优化效果。
关键在于不让 JavaScript 打断 HTML 解析和渲染树生成。浏览器遇到同步 <script> 就会暂停构建 DOM，等脚本下载、解析、执行完才继续——首屏就卡在这儿。优化不是删 JS，而是控制它“什么时候出现、什么时候执行”。
把非首屏 JS 移出关键路径
首屏不需要的逻辑，压根不该在初始 HTML 里加载。
- 统计、埋点、分享组件等非功能必需脚本，统一用
async：独立下载执行，不阻塞解析，也不保证顺序 - 首屏后才用的模块（比如底部弹窗、详情页逻辑），改用动态导入：
import('./module.js')，按需加载 - 彻底移除内联脚本里的
document.write和同步XMLHttpRequest：它们会强制中断并重置整个 HTML 解析器
让必须执行的 JS 不拖慢解析
有些脚本得在首屏前运行（比如路由初始化、主题检测），但可以不阻塞 DOM 构建。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 放在
</body>前：DOM 已完整，不会打断解析，适合大多数业务 JS - 必须写在
<head>的，加defer：下载与 HTML 解析并行，执行排队在 DOM 构建完成后 - 避免
type="module"脚本未配defer：ES 模块默认是 deferred，但显式写上更稳妥
验证它是否真不阻塞了
别靠猜测，用 Chrome DevTools 看真实行为。
立即学习“Java免费学习笔记（深入）”；
- Performance 面板录制加载，观察 Parse HTML 是否被长任务打断；若后面紧跟着 Evaluate Script，说明 JS 在解析中途执行了
- Network 面板筛选 JS 文件，看 Initiated by 列是不是
parser：是就代表它被同步拉取，属于关键阻塞点 - 对比指标：优化后 FCP（首次内容绘制） 应 ≤1.8s（移动端），且 DOMContentLoaded 与 FCP 时间差应明显缩小
不复杂但容易忽略：JS 阻塞的从来不是体积，而是执行时机。控制好位置和属性，浏览器就能边解析边画，首屏自然快一步。
