单页面百万节点崩溃主因是HTML结构缺陷而非JS性能：嵌套超6层致DOM截断、未defer的script阻塞解析、关键CSS位置错误或体积超标、非首屏内容未分片注入。
单页面百万节点不是“加个虚拟滚动就能跑”，而是浏览器解析阶段就可能崩溃——DOM 构建中断、内存溢出、首屏空白超 10 秒，根本不是 JS 性能问题，是 HTML 结构本身触发了解析器熔断。
嵌套超 6 层直接导致 DOM 截断
浏览器流式解析 HTML，每层嵌套都要创建节点、计算样式、触发布局检查。移动端或弱网下，嵌套超过 6 层（尤其 <td> 内再套 <code><div>）极易触发内存压力保护或超时机制，后续标签直接被丢弃。
<ul>
<li>用 Chrome DevTools → Elements 面板右键任意节点 → <code>Show DOM properties 查 childNodes.length 和嵌套深度，超过 6 必须拆解
<div><div><div><table><tr><td><div></div></td></tr></table></div></div></div> 这类结构，<td> 内嵌套会加剧重排风险
<li>用 <code><section></section>、<article></article> 替代纯 <div> 堆叠，不减少行数但能压低实际 DOM 节点数
<h3>script 放在 head 里没加 defer 就等于宣判首屏死刑</h3>
<p>未加 <code>defer 或 async 的 <script></script> 在 - 同步脚本（无
defer/async）必须移出，放到前是最兜底做法 - 业务主逻辑 JS 优先用
defer：下载不阻塞，执行在 DOM 解析完成后、DOMContentLoaded前，且按书写顺序执行 - 绝对禁用
document.write()：现代浏览器已废弃，执行即清空文档流，本地环境尤其敏感
关键 CSS 内联位置错一位，FCP 就倒退 300ms
<style></style> 必须是 中第一个非 <meta charset> 的标签。它被放在任何 <link rel="stylesheet"> 之后，哪怕只隔一个 <title></title>，浏览器就会先暂停渲染去加载那个外部 CSS。
立即学习“前端免费学习笔记（深入）”；
- 顺序应为：
<meta charset="utf-8">→<style></style>→ 其他 - 禁止在
<style></style>内部使用@import，它会触发同步网络请求，等价于新增一个阻塞点 - 内联体积必须 ≤1KB：实测从 1KB 涨到 5KB，在 3G 弱网下会使 HTML 主文档传输延迟增加 400ms 以上
百万节点不能靠“一次性渲染”，得靠结构级分片注入
HTML 不是数据容器，是解析指令流。把百万条 <tr> 直接写进模板，等于让浏览器反复执行“创建节点→计算样式→触发重排”循环百万次，必然 OOM 或卡死。
<ul>
<li>非首屏内容必须延迟注入，而非用 <code>display: none 堆在初始 HTML 里——隐藏节点仍参与样式计算和布局
<template></template> 标签包裹非首屏区块，配合 IntersectionObserver 动态克隆插入，避免初始解析负担真正卡住百万节点网页的，从来不是 JS 执行慢，而是浏览器在第 1 毫秒就开始解析 HTML 时，就遇到了不该出现的嵌套、不该放的位置、不该存在的阻塞资源——这些决策点没有报错，却让整个页面在用户看到之前，就已经在解析器里崩掉了。
