动态网页的html解析无法虚拟化，所谓“虚拟列表”等效果实为js主动调控dom构建节奏；真正可控的是脚本加载策略、解析时机与dom操作粒度，html解析阶段不可跳过或禁用。
动态网页的 HTML 文档结构本身无法“虚拟化”——DOM 是浏览器解析 HTML 后生成的内存树，不是可被“虚拟”的抽象层；所谓“虚拟列表”“零阻塞”等效果，本质是通过 JavaScript 主动干预 DOM 构建和更新节奏来规避浏览器默认行为。真正能控制阻塞的，只有脚本加载策略、解析时机和 DOM 操作粒度。
HTML 解析阶段根本没法跳过，但可以分流
浏览器拿到 HTML 字节流后，HTML Parser 会立即开始词法分析和 DOM 构建，这个过程无法禁用或“虚拟化”。你写的 <div></div> 一定会变成一个 Node 对象，哪怕它还没渲染出来。
- 所谓“虚拟结构”，实际是指不把全部数据一次性写进 HTML 源码，而是留空容器（如
<div id="list"></div>），靠 JS 后续按需注入 - 服务端返回的初始 HTML 必须合法、最小化，避免冗余标签拖慢
Tokenization阶段 - 如果用了 SSR/SSG，预渲染的 HTML 仍会触发完整解析流程——只是 DOM 树更早可用，不是“绕过”解析
defer 和 async 不是万能解药，得看执行时序
加了 defer 的脚本确实不阻塞 HTML 解析，但它会在 DOMContentLoaded 前执行，此时 DOM 已就绪但 CSSOM 可能还没完成，样式未 applied 就操作元素，容易触发强制同步布局（Layout Thrashing）。
-
<script defer src="init.js"></script>：适合初始化逻辑，但别在里头调getBoundingClientRect()或读取offsetHeight -
<script async src="analytics.js"></script>：只适合完全独立、无 DOM 依赖的代码，比如埋点上报 - 内联脚本哪怕只有一行
console.log(1)，也会立刻中断解析——除非写成<script defer>...</script>
真正的“零阻塞”只发生在 JS 层，靠 requestIdleCallback + IntersectionObserver
浏览器主线程空闲时才批量创建 DOM 节点，滚动时只更新视口内区域——这才是“虚拟化”的落地点，和 HTML 结构无关，纯靠 JS 控制节奏。
- 用
requestIdleCallback把节点插入拆成微任务块，避免单次操作超过 5ms -
IntersectionObserver监听元素进入视口，而不是监听scroll事件（后者高频触发、易卡顿） - 容器高度必须用
padding-top / padding-bottom或伪元素撑开，否则滚动条会消失——这是最容易漏掉的视觉断层
最常被忽略的是：HTML 解析器本身没有“虚拟模式”，所有优化都建立在承认并顺应它的前提下。想绕开解析流程，等于想让浏览器不干活——不可能。能做的，只是让 JS 别在错误的时间、错误的粒度上打扰它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
