HTML5 本身没有虚拟 DOM，虚拟 DOM 是 React、Vue 等前端框架的 JS 层实现机制，非 HTML5 标准；原生中可通过 DocumentFragment、条件更新、classList 控制等手段减少重复渲染。
HTML5 本身没有虚拟 DOM；所谓“HTML5 虚拟 DOM”是常见误解——虚拟 DOM 是前端框架（如 React、Vue）的实现机制，不是 HTML5 标准的一部分。直接在原生 HTML5 中“使用虚拟 DOM”不可行，但你可以通过合理手段避免重复渲染，效果接近框架的优化逻辑。
为什么原生 HTML5 不存在 virtual DOM
HTML5 是标记语言规范，定义了语义标签、API（如 localStorage、fetch）、DOM 操作接口等，但不规定更新策略。虚拟 DOM 是 JS 层对真实 DOM 的轻量级抽象，需手动实现 diff 和 patch 逻辑，属于运行时优化方案，非浏览器内置能力。
- 浏览器只响应
document.createElement、element.innerHTML、element.appendChild等真实 DOM 操作 -
requestAnimationFrame或queueMicrotask可协调更新时机，但不等于虚拟 DOM - 所有“原生虚拟 DOM 库”（如
ivi、ultradom）都是独立 JS 库，与 HTML5 无关
如何用原生 JS 减少重复渲染（替代思路）
核心是「批量变更 + 条件更新」，绕过频繁触发重排重绘。重点控制：innerHTML、textContent、样式切换、节点增删频率。
- 用
DocumentFragment批量插入：避免每次appendChild触发 layout - 对比新旧数据再更新：例如用
JSON.stringify(oldData) !== JSON.stringify(newData)判断是否真需重写innerHTML - 用
classList.toggle替代反复设置style.display，利用 CSS 类做显隐控制 - 对列表渲染，优先复用已有
li元素（类似 key 机制），仅更新内容和属性，而非整个innerHTML
const list = document.getElementById('item-list');
const fragment = document.createDocumentFragment();
data.forEach(item => {
let el = list.querySelector(`[data-id="${item.id}"]`);
if (!el) {
el = document.createElement('li');
el.dataset.id = item.id;
fragment.appendChild(el);
}
el.textContent = item.name; // 仅更新必要字段
});
list.appendChild(fragment); // 一次插入
innerHTML vs textContent：何时该用哪个
二者性能与安全性差异显著，错误选择会引发重复解析或 XSS 风险，间接导致无效重渲染。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
立即学习“前端免费学习笔记（深入）”；
-
innerHTML：会触发 HTML 解析、构建子节点树、执行内联脚本（如有）——开销大，且若内容含用户输入，必须先转义（如用textContent中转） -
textContent：纯文本赋值，不解析 HTML，无执行风险，性能高，适合仅更新文字内容 - 高频更新场景（如计数器、日志流），始终优先用
textContent；仅当结构动态变化时才用innerHTML，且应配合防抖（setTimeout或requestIdleCallback）
容易被忽略的重渲染陷阱
很多“看似没改 DOM”的操作，实际强制浏览器同步计算样式或布局，造成隐式重排。
- 读取
offsetHeight、getComputedStyle(el).color、el.scrollTop后立刻写 DOM → 触发 layout thrashing - 循环中多次设置
el.style.color、el.style.margin→ 每次都可能触发 style recalc - 用
table布局 + 动态增删行 → 整表重绘成本极高，建议换div + CSS Grid/Flex - 监听
resize或scroll事件直接操作 DOM → 必须节流（throttle）或用IntersectionObserver替代
真正要避免的不是“渲染”，而是“不必要、不同步、不可控的渲染”。框架的虚拟 DOM 本质是把不可控变成可控——你在原生环境里，得自己守好这道边界。
