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 风险，间接导致无效重渲染。
立即学习“前端免费学习笔记（深入）”；
-
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 本质是把不可控变成可控——你在原生环境里，得自己守好这道边界。
