离屏渲染是延迟提交至真实DOM的内存中渲染过程。它通过虚拟DOM在JS层完成节点创建、Diff比对与补丁计算，避免触发浏览器Layout/Paint，仅在最后批量操作真实DOM，实现高效更新。

“离屏渲染”不是把内容画到屏幕外，而是指不立即挂载、不触发真实DOM布局与绘制的渲染过程。它发生在内存中——节点树被创建、比对、补丁计算完成，但尚未插入document或影响浏览器渲染流水线（如Layout、Paint）。虚拟DOM正是实现离屏渲染的核心载体：它用轻量JS对象描述UI，在真实DOM之外完成整套更新逻辑。

离屏渲染的本质是“延迟提交”

浏览器每帧渲染需经历 DOM → CSSOM → Render Tree → Layout → Paint → Composite 流程。一旦新节点被appendChild或innerHTML写入文档，就立刻触发重排重绘。而虚拟DOM把这一步卡在最后：

• 状态变更时，只生成新的VNode树（纯内存操作）
• Diff算法在JS层完成差异计算，不访问真实DOM
• Patch阶段才批量、精准地操作真实DOM，且尽可能避免layout触发（如用transform替代top/left）

实战：用虚拟DOM预构建复杂表单树

假设一个含50个动态字段、嵌套校验规则、条件显隐逻辑的表单。若直接用原生DOM逐个createElement并插入，首次渲染会卡顿，且每次字段联动都引发多次重排。

改用虚拟DOM预构建策略：

• 定义表单结构为纯数据（如fields: [{type:'select', key:'region', deps:['country']}, ...]）
• 编写h()函数生成VNode树（含key、props、children），不调用任何DOM API
• 首次挂载前，先执行完整diff（对比空树 vs 表单树），生成最小patch指令集
• 最终仅一次container.appendChild(fragment)或分块insertBefore，跳过中间无效渲染

这样，整个表单的结构生成、条件判断、属性绑定全部在离屏状态下完成，用户看到的是“瞬间出现”的完整表单，而非逐项加载的闪烁过程。

关键优化点：让离屏真正“离得干净”

不是用了VNode就自动离屏——错误实践仍会提前泄漏到真实DOM：

• 避免在render函数中读取offsetHeight、getComputedStyle：这些强制同步Layout，破坏离屏性
• 不要在VNode生成阶段调用document.createElement：VNode必须是纯描述，不产生副作用
• 长列表场景下，用IntersectionObserver配合虚拟滚动，只让视窗内节点进入真实DOM，其余保持为内存VNode
• 服务端渲染（SSR）本质也是离屏渲染：在Node.js环境生成VNode → 序列化为HTML字符串 → 传输后由客户端hydrate，全程无浏览器Layout