feat(stages): 添加性能测试和虚拟DOM实现阶段

添加stage04-perf用于真实DOM操作性能对比，包含三个不同的更新策略： - innerHTML全量更新 - createElement全量重建 - 精确单节点更新添加stage04用于模拟异步接口数据获取后的渲染演示添加stage05实现虚拟DOM基础功能，提供VNode对象描述DOM树结构和递归渲染函数
2026-05-02 12:36:53 +08:00
parent fc87cf4622
commit 845789cd60
7 changed files with 483 additions and 0 deletions
--- a/stage04-perf/index.html
+++ b/stage04-perf/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stage 04-perf - 真实 DOM 操作代价</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <h2>真实 DOM 更新性能对比（控制台查看详细耗时）</h2>
+    <div>
+      <label for="rangeN">数据量 N：<span id="nValue">10000</span></label>
+      <br>
+      <input type="range" id="rangeN" min="100" max="200000" step="100" value="10000" />
+      <button id="btnApplyN">应用此数量</button>
+    </div>
+    <div class="stats" id="stats">点击按钮对比耗时</div>
+    <div id="compareDisplay" style="margin: 8px 0; font-family: monospace;"></div>
+    <div>
+      <button id="btnFullInnerHTML">全量 innerHTML 更新</button>
+      <button id="btnFullCreate">全量 createElement 更新</button>
+      <button id="btnExact">精确单节点更新</button>
+      <button id="btnReset">重置列表</button>
+    </div>
+    <ul id="list"></ul>
+    <script src="./index.js"></script>
+  </body>
+</html>