html循环优化本质是优化js批量操作dom的过程，关键在于避免循环内反复修改innerhtml或style、使用documentfragment批量插入、缓存nodelist长度、分帧处理大数据量。
HTML 本身不支持循环，所谓“HTML 循环优化”实际是优化 JavaScript 遍历数据并生成/更新 DOM 的过程。关键不在 HTML 标签怎么写，而在 JS 怎么批量、低开销地操作节点。
为什么 for 循环里直接改 innerHTML 会卡
每次赋值 element.innerHTML = ... 都会触发浏览器解析 HTML 字符串、重建子树、重排（reflow）和重绘（repaint）。100 次循环 = 100 次强制同步渲染，主线程被死死占住。
- 避免在循环体内反复设置
innerHTML或style属性 - 不要用
document.write()—— 已废弃且会清空整个页面 - 如果必须拼字符串，先用数组
.push()收集所有片段，最后.join('')一次写入
用 DocumentFragment 批量插入更高效
DocumentFragment 是一个轻量级的 DOM 容器，不直接挂载到页面，往它里面 append 元素不会触发任何渲染。等攒够了再一次性插进真实 DOM，只触发一次 layout。
- 比反复调用
appendChild到真实父节点快 3–5 倍（尤其节点数 > 50） - 示例：
const frag = document.createDocumentFragment(); users.forEach(u => { const li = document.createElement('li'); li.textContent = u.name; frag.appendChild(li); }); userListContainer.appendChild(frag); - 注意：
frag只能被 append 一次，之后变为空
遍历 NodeList 时别反复读 .length
像 list.children 或 document.querySelectorAll('.item') 返回的集合，在 IE 和旧版 Safari 中是“活”的（live），每次访问 .length 都可能重新查询 DOM；即使现代浏览器中是静态的，重复读取也是无谓开销。
- 错误写法：
for (let i = 0; i - 正确写法：
const items = list.children; for (let i = 0, len = items.length; i - 更推荐：
Array.from(items).forEach(item => { ... })，语义清晰且自动转成真数组
万级列表必须分帧执行
一次性处理 10000 个元素，哪怕只是创建 li，也会让页面卡顿超过 100ms，用户明显感知卡死。必须切片 + requestAnimationFrame 让浏览器有机会渲染和响应事件。
- 每帧处理 16–20 个元素（目标是单帧 ≤ 16ms）
- 用
requestAnimationFrame而不是setTimeout(..., 0)：前者与刷新率同步，后者调度不可控 - 示例伪代码：
function renderBatch(start, end) { /* 处理 start 到 end */ if (end renderBatch(end, end + 20)); }
真正容易被忽略的是：DOM 操作的代价远高于 JS 运算本身。哪怕你把 for 循环优化到极致，只要还在循环里读 offsetHeight、写 style.color、或频繁 querySelector，性能瓶颈就还在那里。先分离读写，再批量提交，最后才考虑分帧 —— 顺序错了，优化就白做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
