大型HTML文档不能一次性加载，因为浏览器主线程会卡死：innerHTML赋值触发同步阻塞的DOM构建、布局与绘制，导致数十秒白屏；根本原因是重排次数爆炸式增长，而非网络带宽不足。
大型HTML文档为什么不能一次性加载
因为浏览器主线程会卡死。6万行表格或10MB纯HTML文档，innerHTML 一赋值，DOM构建+布局+绘制全挤在单次调用里，用户看到的就是长达几十秒的白屏或无响应——这不是“慢”，是渲染引擎主动放弃响应。
根本问题不在网络带宽，而在单次 DOM 操作触发的重排（reflow）次数爆炸式增长。现代浏览器对 document.createElement + appendChild 的批量插入有优化，但对整段 HTML 字符串解析仍走老路径。
- 服务端返回完整 HTML → 客户端
innerHTML = htmlString→ 主线程阻塞，无法响应滚动、点击 - 即使用了
async或defer，脚本加载时机也救不了 DOM 构建本身 -
display: none或visibility: hidden不解决问题：DOM 依然被构建、CSSOM 依然计算、内存占用照旧
分块加载必须配合 requestIdleCallback 或 setTimeout
不能靠 fetch + then 直接追加，否则仍是同步阻塞。必须把 DOM 插入拆成微任务，并让出主线程控制权。
推荐节奏：每次插入 200–500 行（视节点复杂度调整），间隔用 requestIdleCallback；若兼容性要求高，退化为 setTimeout(..., 0)。
立即学习“前端免费学习笔记（深入）”；
-
requestIdleCallback在浏览器空闲时执行，天然防卡顿，但 IE 和部分旧版 Safari 不支持 - 用
setTimeout时别写setTimeout(() => {...}, 1)—— 浏览器最小间隔约 4ms，写 1 毫秒反而触发节流 - 每批插入后检查
performance.now()，若单批耗时 >16ms（即掉帧阈值），自动减半批次大小
非首屏内容该用 而不是 div + display:none
<template></template> 标签的内容不会被解析、不参与 DOM 构建、不触发 CSSOM 计算——这才是真正的“未加载”。而 display: none 的区块，从 HTML 解析阶段就已进入 DOM 树，只是不绘制。
典型误用：<div id="comments" style="display:none">...</div>。页面含 5000 行评论 HTML 时，这玩意儿照样拖慢 DOMContentLoaded 时间。
- 把非首屏 HTML 片段包进
<template id="section-comments"></template> - 用
IntersectionObserver监听元素是否进入视口，再克隆content并 append 到真实容器 - 注意：克隆后需手动绑定事件（
addEventListener不会继承），或改用事件委托
动态插入脚本要手动监听 onload 和 onerror
当分块加载后需要运行某段逻辑（比如初始化表格排序），用 JS 动态插入脚本是唯一选择。但 script.onload 不是默认保障——不显式监听，失败就静默，连 console 都没输出。
尤其要注意跨域脚本：CORS 失败时 onerror 会触发，但错误信息为空字符串，只能靠超时兜底。
- 必须同时设置
script.onload和script.onerror，否则调试成本翻倍 - 插入前设
script.async = false，避免它在 DOM 还没准备好时执行 - 不要依赖
document.write，它在DOMContentLoaded后调用会清空整个页面
<template></template> 当成语义占位符随便放，忘了它不参与渲染流程，也就没法用 CSS 选中其内部元素——这些细节不处理，分包就只是把大卡顿拆成小卡顿。 
