高频交易网页dom增量更新必须用document.createdocumentfragment，因其可将多次插入压缩为单次layout；appendchild循环会触发多次重排导致掉帧，innerhtml则丢失事件监听器、重置表单值且有xss风险。
为什么 appendChild 循环在行情刷新中会掉帧
每次对已挂载的 DOM 调用 appendChild，浏览器都可能立即执行样式计算 + 布局测量（reflow），尤其当容器有 flex、float、position: relative 或任何依赖尺寸的 CSS 时。100 条行情数据 = 100 次潜在 layout，主线程被 Layout 任务塞满，滚动卡、输入延迟、动画跳变全都会出现。
- 即使容器设了
display: none，旧版 Safari 或读取offsetHeight等操作仍会强制同步 flush - Performance 面板里能看到大量 Layout 任务堆积，持续时间常超 16ms（一帧阈值）
- DOM 已挂载 + 高频变更 + 任意布局触发器 = 必然卡顿，和 JS 执行速度无关
document.createDocumentFragment 的正确用法
它不是“更快的 appendChild”，而是一个不参与渲染管线的离线容器。关键只有一条：所有节点先塞进 fragment，最后仅一次插入真实 DOM。
- 必须每次新建：
const frag = document.createDocumentFragment()，不能复用已插入过的 fragment（插入后自动清空） - 所有节点用
frag.appendChild(node)或frag.append(node1, node2)添加，不要对 fragment 调用querySelector或设innerHTML（它不支持） - 最后只调一次
container.appendChild(frag)，此时子节点被“迁移”过去，fragment 自身变为空 - IE9+ 全兼容；若需用
append()方法，注意 IE10+ 才支持，保守写法统一用appendChild
比 innerHTML 更适合行情场景的三个理由
字符串拼接看似快，但在高频交易 UI 中是陷阱：事件监听器丢失、表单 value 重置、dataset 清零、XSS 风险暴露。fragment 不是性能银弹，是可控性刚需。
- 你已有带
data-id的行情行节点？用innerHTML就得先outerHTML再 parse，纯浪费 CPU - 每行要绑定不同 click 处理器或动态加 class？字符串无法表达逻辑分支，fragment 可逐节点设置
- 行情数据来自 WebSocket 推送？用
textContent+ fragment 天然防 XSS，不用手写escapeHtml()
批量更新时最容易漏掉的三个细节
fragment 解决的是“插入”，但高频变更还涉及“更新”和“调度”。漏掉任一环节，照样卡。
- 避免在 fragment 插入前读取任何布局信息（如
el.offsetHeight），否则会强制浏览器提前 flush 并重排——哪怕 fragment 还没挂上去 - 不要在循环中反复查询父容器（如
document.getElementById('ticker')），提前提取并缓存引用 - 如果需要复用 DOM 节点（比如行情列表项），用
domPoolFactory管理节点池，回收时必须清空textContent和innerHTML，否则残留内容会意外显示
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
