JavaScript渲染阻塞会中断页面加载，解决方法包括：使用async或defer异步加载脚本，defer按序执行适合依赖DOM的脚本；通过动态import()实现懒加载；拆分代码、压缩文件、移除无用代码以减小关键JS体积。
JavaScript 的性能优化中，渲染阻塞是一个常见但容易被忽视的问题。当浏览器下载和执行 JavaScript 时，可能会中断页面的渲染流程，导致用户看到白屏或内容加载缓慢。要解决这个问题，核心是减少关键路径上的阻塞资源，让页面尽快呈现内容。
理解渲染阻塞原理
浏览器在构建 DOM 和 CSSOM 后才会生成渲染树并绘制页面。默认情况下，<script> 标签会阻塞 HTML 解析，尤其是位于文档头部的外联脚本。一旦遇到 script 标签，浏览器必须停下来去下载、编译、执行脚本，才能继续解析后续内容。
这意味着如果一个大型 JS 文件在 <head> 中加载，整个页面渲染都会被延迟。
异步加载脚本：async 与 defer
使用 async 和 defer 属性可以有效避免阻塞：
立即学习“Java免费学习笔记（深入）”；
- async：脚本异步下载，下载完成后立即执行，不保证执行顺序。适合独立功能脚本（如统计代码）。
- defer：脚本异步下载，但延迟到 DOM 解析完成后、DOMContentLoaded 事件前按顺序执行。适合依赖 DOM 的主逻辑脚本。
推荐将非关键脚本加上 async 或 defer，例如：
<script src="analytics.js" async></script> <script src="main.js" defer></script>
动态导入与懒加载
对于功能模块或交互后才需要的代码，可采用动态 import() 实现懒加载：
document.getElementById('btn').addEventListener('click', () => {
import('./heavyModule.js').then(module => {
module.init();
});
});
这种方式只在需要时加载对应脚本，显著降低初始加载负担。
减少关键 JavaScript 体积
精简首屏所需代码是提升渲染速度的关键：
- 拆分打包，提取公共库，按需加载模块。
- 压缩混淆 JS 文件（如使用 Terser）。
- 移除未使用的代码（Tree Shaking），尤其在使用 ES6 模块时。
- 考虑使用代码分割（Code Splitting）配合路由或功能划分。
基本上就这些方法。通过合理使用异步属性、懒加载机制和代码优化，能大幅缓解 JavaScript 对渲染的阻塞，提升首屏加载体验。关键是识别哪些脚本必须尽早执行，哪些可以延后。不复杂但容易忽略细节。
