什么是DOM?
不少朋友对 DOM 没啥概念，模糊的感觉 DOM 好像就是document，亦或是觉得 DOM 跟网页是一回事。如果前端开发只是工作的一小部分，深入了解与否无可厚非；但如果要深入研究前端，那么对 DOM 就必须要有精确的理解。
DOM（Document Object Model）是由 W3C（World Wide Web Consortium） 和 WHATWG（Web Hypertext Application Technology Working Group） 共同制定的跨平台、语言中立的 接口规范。浏览器厂商（如 Google、Mozilla、Apple）则根据上述标准，在各自的渲染引擎中实现 DOM API。如谷歌的 Blink 引擎通过 C++ 实现 DOM，并通过 V8 引擎暴露 JS 可调用的接口。使开发者可以通过 JavaScript 动态操作网页的内容、结构和样式。
通俗来讲，DOM 是浏览器提供的一种编程接口（API），将 HTML 或 XML 文档表示为树形结构的对象模型，使开发者可以通过 JavaScript 动态操作网页的内容、结构和样式。
<html>
<head>
<title>网页标题</title>
</head>
<body>
<h1>Hello DOM!</h1>
<p>这是一个段落。</p>
</body>
</html>
以上html文档对应的 DOM 如下：
document (根节点)
├─ <html>
│ ├─ <head>
│ │ └─ <title> ("网页标题")
│ └─ <body>
│ ├─ <h1> ("Hello DOM!")
│ └─ <p> ("这是一个段落。")
DOM的功用
1.查询元素
const title = document.getElementById("title");
2.修改内容 title.textContent = "新标题";
3.修改样式 title.style.color = "red";
4.添加/删除元素 const newParagraph = document.createElement("p");
newParagraph.textContent = "新增的段落";
document.body.appendChild(newParagraph); 5.绑定事件 title.addEventListener("click", () => {
alert("标题被点击了！");
});
每次js对DOM的操作，基本上都会触发浏览器的重排（Reflow）和重绘（Repaint），尤其是在循环中修改 DOM 频率过高，就会导致页面卡顿。为了解决直接操作 DOM 的性能问题，React、Vue 等现代前端框架引入了 虚拟 DOM（Virtual DOM）的概念，OWL 也同样如此。
浏览器渲染html页面的核心步骤
1️⃣解析 HTML → 构建 DOM 树
2️⃣解析 CSS → 构建 CSSOM 树
3️⃣合并 DOM + CSSOM → 生成渲染树（Render Tree）
4️⃣布局（Layout/Reflow） → 重排发生在这里！
5️⃣绘制（Paint） → 重绘发生在这里！
6️⃣合成（Composite）→GPU 加速层合并
虚拟DOM是什么?
相对于真实 DOM 来说，虚拟 DOM（Virtual DOM）是一种优化技术。通过在内存中维护一个轻量级的 JavaScript 对象树（即虚拟 DOM），以便来高效地更新真实 DOM。
OWL 的虚拟 DOM 是 snabbdom 的一个分支， snabbdom 的核心是 patch(oldVNode, newVNode)函数，当数据变更时，负责对比新旧虚拟节点，通过 Diff 算法计算出最小 DOM 操作，如 createElement、removeChild、updateAttribute。最后批量操作 DOM，避免触发浏览器的反复重排和重绘。
OWL组件生命周期中的两个回调方法 mounted 和 patched 完成之前的操作，本质上就是就是通过 javascript 操作 DOM。
了解 DOM 和虚拟 DOM 的概念和运作机制，可以更好的运用 OWL 组件生命周期中的方法，大大减少在云里雾里穿梭中的试错。
