Cloudfront.net主线程阻塞时间疑问：Lighthouse检测结果解读

Lighthouse检测到的主线程阻塞时间增加，不是CloudFront服务本身需要调整为非渲染阻塞方式，问题出在通过CloudFront分发的你的Web应用资源（比如JS、CSS文件）上，需要针对这些具体组件做优化来降低阻塞。

具体可以从这几个方向入手：

• CSS资源优化：拆分出首屏必需的关键CSS，内联到HTML中；非关键CSS可以通过媒体查询标记（比如media="print"）让浏览器异步加载，或者使用rel="preload"配合onload事件延迟加载。
• JS资源优化：给非首屏必需的脚本添加async或defer属性，让浏览器在解析HTML时异步加载脚本，不阻塞渲染；通过代码分割拆分大体积JS文件，只加载当前页面所需的代码块；对JS文件进行压缩、混淆，减小文件体积以缩短解析执行时间。
• 资源冗余排查：检查是否通过CloudFront加载了冗余的库、重复资源，确保分发的都是经过精简的资源版本；同时确认CloudFront的缓存配置正确，避免重复加载未更新的资源。

另外需要区分：如果CloudFront的缓存或节点配置不合理，可能会增加资源的加载时间，但这属于网络加载耗时，不是Lighthouse所指的主线程阻塞——主线程阻塞是资源下载完成后，浏览器解析、执行这些资源时占用主线程导致的渲染延迟。

内容的提问来源于stack exchange，提问作者VikR