含大量Web Component的HTML表格致Chrome/Edge崩溃求助

1. 拆分批次异步渲染组件 #

Chrome/Edge的Shadow DOM在高频同步DOM操作下易出现性能瓶颈，可将组件创建与挂载拆分为异步批次处理：

• 先在内存中创建所有自定义元素，不立即挂载到DOM
• 借助requestIdleCallback或分段setTimeout（每批处理5-10个组件）完成挂载，让浏览器有空闲时间处理渲染
• 示例代码：

const cells = document.querySelectorAll('td');
const batchSize = 8;
let currentIndex = 0;

function processBatch() {
  const endIndex = Math.min(currentIndex + batchSize, cells.length);
  for (; currentIndex < endIndex; currentIndex++) {
    const component = document.createElement('custom-number');
    component.setAttribute('format', 'currency');
    component.textContent = '123.45';
    cells[currentIndex].appendChild(component);
  }
  if (currentIndex < cells.length) {
    requestIdleCallback(processBatch);
  }
}

requestIdleCallback(processBatch);

2. 延迟Shadow DOM初始化到动画帧周期 #

避免在connectedCallback中同步执行Shadow DOM初始化，将逻辑延迟到requestAnimationFrame中，减少同步阻塞：

class CustomNumber extends HTMLElement {
  connectedCallback() {
    requestAnimationFrame(() => {
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = `<span>${this.formatValue()}</span>`;
    });
  }

  formatValue() {
    return new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(this.textContent);
  }
}
customElements.define('custom-number', CustomNumber);

3. 简化Shadow DOM内的样式逻辑 #

避免在Shadow DOM中使用复杂的::slotted选择器、动态生成样式或全局样式穿透，这类操作会触发Chrome频繁重排重绘：

• 采用静态内联样式或预定义的CSS文本，减少样式计算开销
• 示例：

const staticStyle = document.createElement('style');
staticStyle.textContent = `
  span { color: #333; font-size: 14px; line-height: 1.5; }
`;
this.shadowRoot.appendChild(staticStyle);

4. 尝试使用closed模式的Shadow DOM #

部分Chrome版本中，closed模式的Shadow DOM初始化开销低于open模式，可临时测试该方案：

this.attachShadow({ mode: 'closed' });

5. 异步等待自定义元素定义完成 #

确保自定义元素注册完成后再创建实例，避免同步定义阻塞DOM渲染：

async function initTable() {
  await customElements.whenDefined('custom-number');
  // 此处开始创建并挂载组件
}
initTable();

内容的提问来源于stack exchange，提问作者AndrewX