如何利用HTML自定义元素优化长列表渲染性能-html教程-PHP中文网

自定义元素中禁用 innerhtml 渲染列表，因其触发 dom 重建、丢失事件与焦点、引发 xss 且性能线性下降；应使用 template.content.clonenode(true) 克隆节点，处理 id 冲突、注入 shadow dom 样式，并配合 requestanimationframe 节流滚动与虚拟化。

如何利用html自定义元素优化长列表渲染性能

自定义元素里为什么不能直接用 innerHTML 渲染列表

直接在自定义元素的 connectedCallback 里拼字符串再赋值给 innerHTML，会触发完整 DOM 重建、丢失事件绑定、破坏焦点状态，且未转义内容极易引发 XSS。更关键的是：每次滚动或更新都要重新解析 HTML 字符串，性能随数据量线性下降——1000 条就明显卡顿，1 万条基本不可交互。

根本问题不在“怎么写”，而在于“谁来负责生命周期”。innerHTML = '' 会清空整个子树，所有已绑定的事件监听器、contenteditable 状态、selection 位置全丢，编辑器场景下光标直接消失。

必须用 template.content.cloneNode(true)，不是 template.innerHTML（后者返回空字符串）
克隆后立即绑定事件，别依赖事件委托——Shadow DOM 会隔离冒泡路径
若用 Shadow DOM，务必在 constructor 或 connectedCallback 中调用 this.attachShadow({ mode: 'open' })，否则后续插入失败

如何安全复用节点池并避免 ID 冲突

模板克隆出的节点默认保留原始 id 属性，多个实例会导致全局 ID 重复，破坏 label[for] 关联、getElementById 查找，甚至影响 ARIA 属性可访问性。

简单场景可用 clone.querySelectorAll('[id]').forEach(el => el.id += '-'+Date.now())，但时间戳在快速重渲染时可能碰撞；更健壮的做法是模板中用占位符，如 id="item-title-{id}"，克隆后正则替换：

const id = items[i].id;
clone.innerHTML = clone.innerHTML.replace(/{id}/g, id);

样式必须进 Shadow DOM 或通过 adoptedStyleSheets 注入，禁止在 <template></template> 里写 <style></style> 标签并插入 light DOM——否则样式全局泄漏，不同实例互相干扰。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

滚动监听与虚拟化必须配合 requestAnimationFrame 节流

原生 scroll 事件在 Chrome 中每秒可触发上百次，不加节流会直接拖垮主线程。即使用了 template 和节点池，没节流照样卡。

正确做法是在 connectedCallback 中注册监听，并用 requestAnimationFrame 批处理可视区域计算：

this._rafId = null;
this.container.addEventListener('scroll', () => {
  if (this._rafId) cancelAnimationFrame(this._rafId);
  this._rafId = requestAnimationFrame(() => this._updateVisibleRange());
});

{ passive: true } 必须加，否则 Chrome 强制同步执行 handler，帧率崩盘
_updateVisibleRange() 里只做索引计算和节点属性更新，不操作 DOM；DOM 更新统一在 rAF 回调末尾批量执行
起始索引用 Math.floor(scrollTop / itemHeight)，结束索引用 Math.min(startIndex + visibleCount, totalItems - 1) 防越界

data-* 属性在虚拟列表中只能当“快照载体”，不能当索引代理

很多人误以为给每个 <li> 加 data-index 就能快速定位数据，但虚拟列表里这些节点随时被复用或卸载——dataset.index 值可能还是上一帧的旧数据，querySelectorAll('[data-index="999"]') 更是 O(n) 全局扫描，完全违背虚拟化初衷。

真正该做的，是在节点复用时，仅更新当前帧所需的业务字段：

const node = this._nodePool[i];
node.textContent = items[startIndex + i].name;
node.dataset.userId = items[startIndex + i].id;
node.dataset.rowKey = items[startIndex + i].key;