零阻塞前端渲染需明确HTML、CSS、JS职责边界并拆分关键路径：首屏HTML不依赖JS，CSS分关键/非关键两层，JS延迟至DOMContentLoaded后按需启动，模块化避免document.write，严格分层守界。
零阻塞前端渲染不是靠删代码实现的，而是靠明确 HTML、CSS、JS 各自的职责边界，并在构建和加载阶段主动拆分关键路径。核心在于：首屏内容必须不依赖 JS 解析就能呈现，样式不能卡住 DOM 渲染，交互逻辑必须延迟到内容就绪后才介入。
HTML 模块化必须绕开 document.write 和内联脚本
模块化不是把一堆 include 丢进 HTML 就完事。很多团队用构建时模板拼接（如 EJS、Handlebars），但误在服务端或客户端用 document.write 动态注入模块——这会中断 HTML 解析，触发同步重排，直接破坏“零阻塞”前提。
- 服务端预渲染模块时，确保输出的是纯 HTML 片段，不含任何
<script></script>标签或onload等内联事件 - 客户端动态加载模块（比如点击展开侧边栏）必须用
fetch+insertAdjacentHTML，而非innerHTML或document.write - 所有模块级 JS 逻辑必须通过
data-module属性标记，由统一的初始化器在 DOMContentLoaded 后按需启动
CSS 关键路径要拆成 critical 和 non-critical 两层
浏览器遇到 <link rel="stylesheet"> 会暂停渲染，直到 CSSOM 构建完成。把整站 CSS 打包成一个文件，等于把所有页面的样式都塞进首屏阻塞队列里。
- 用工具（如
critters或penthouse）提取首屏可见区域所需的样式，内联进<head>的<style>标签中 - 剩余非关键 CSS 用
rel="preload"+as="style"预加载，再通过onload回调注入<link>，避免阻塞渲染 - 绝对不要在
<body>里放<style>或<link>，它们会触发额外的样式计算中断
JS 初始化必须等 DOMContentLoaded，且避开 defer 和 async 混用
很多人以为加了 defer 就安全了，但实际项目中常混用 async 加载分析脚本、defer 加载业务 JS，导致执行顺序不可控，DOM 引用失败或样式未就绪就操作节点。
立即学习“前端免费学习笔记（深入）”；
- 所有业务 JS 必须用单个
<script defer src="/app.js">，确保它在 DOM 解析完成后、DOMContentLoaded前执行 - 第三方脚本（如埋点、广告）一律用
async，并包裹在if ('loading' in document)检测里，防止在旧浏览器中阻塞 - 模块级初始化逻辑必须封装为函数，显式监听
DOMContentLoaded，而不是依赖defer的隐式时机
真正难的不是写对某一行代码，而是让每个模块的 HTML、CSS、JS 都严格守在自己的层里——HTML 不带行为，CSS 不管结构，JS 不碰样式。一旦某处破界（比如用 JS 控制 display 切换却没预留 CSS 过渡类），整个零阻塞链就断了。
