zzy
845789cd60
添加stage04-perf用于真实DOM操作性能对比，包含三个不同的更新策略： - innerHTML全量更新 - createElement全量重建 - 精确单节点更新 添加stage04用于模拟异步接口数据获取后的渲染演示 添加stage05实现虚拟DOM基础功能，提供VNode对象描述DOM树结构和递 归渲染函数
29 lines
1.1 KiB
HTML
29 lines
1.1 KiB
HTML
<!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>
|