开发Emoji选择器时浏览器渲染大量Emoji速度缓慢求助

问题根源 #

当前代码循环创建单个<div>并逐个追加到DOM，每次appendChild都会触发浏览器的重排（Reflow），大量独立DOM元素也会增加渲染树的复杂度，这是导致卡顿的核心原因。

优化方案 #

1. 用DocumentFragment批量处理DOM

DocumentFragment是轻量级的文档容器，不会触发实时重排，先把所有Emoji元素添加到Fragment，最后一次性插入DOM，能大幅减少重排次数。

修改后的代码：

const emojis = "🐵🐒🦍🦧🐶🐕🦮🐕‍🦺🐩🐺🦊🦝🐱🐈🐈‍⬛🦁🐯🐅🐆🐴🫎🫏🐎" + 
"🦄🦓🦌🦬🐮🐂🐃🐄🐷🐖🐗🐽🐏🐑🐐🐪🐫🦙🦒🐘🦣🦏🦛🐭🐁🐀🐹🐰🐇" + 
"🐿️🦫🦔🦇🐻🐻‍❄️🐨🐼🦥🦦🦨🦘🦡🐾🐵🐒🦍🦧🐶🐕🦮🐕‍🦺🐵🐒🦍🦧🐶🐕🦮"

const body = document.querySelector('body');
const fragment = document.createDocumentFragment();

for (const emoji of Array.from(emojis)) {
  const child = document.createElement('div');
  child.textContent = emoji; // 用textContent更高效安全，无需解析HTML
  fragment.appendChild(child);
}

body.appendChild(fragment);

2. 合并成单段HTML字符串插入

把所有Emoji的<div>拼接成一个字符串，一次性插入DOM，同样能减少DOM操作次数：

const emojis = "🐵🐒🦍🦧🐶🐕🦮🐕‍🦺🐩🐺🦊🦝🐱🐈🐈‍⬛🦁🐯🐅🐆🐴🫎🫏🐎" + 
"🦄🦓🦌🦬🐮🐂🐃🐄🐷🐖🐗🐽🐏🐑🐐🐪🐫🦙🦒🐘🦣🦏🦛🐭🐁🐀🐹🐰🐇" + 
"🐿️🦫🦔🦇🐻🐻‍❄️🐨🐼🦥🦦🦨🦘🦡🐾🐵🐒🦍🦧🐶🐕🦮🐕‍🦺🐵🐒🦍🦧🐶🐕🦮"

const body = document.querySelector('body');
const emojiHtml = Array.from(emojis).map(emoji => `<div>${emoji}</div>`).join('');

// 推荐创建单独容器插入，避免影响原有DOM
const container = document.createElement('div');
container.innerHTML = emojiHtml;
body.appendChild(container);

3. 优化布局计算

给Emoji容器添加CSS布局规则，让浏览器批量计算元素位置，减少重排开销：

.emoji-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
  gap: 4px;
}

4. 虚拟滚动（极端场景）

如果Emoji数量极大（上千个以上），可以采用虚拟滚动，只渲染当前视口内的元素，滚动时动态替换内容。可使用现成库实现，或自行编写简单逻辑，完全避免渲染所有元素。

性能分析验证 #

从Firefox性能分析截图可以看到，卡顿主要来自频繁的DOM操作和重排，上述方案能大幅降低这类操作的开销，明显改善渲染速度。

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