表情符号在浏览器中渲染速度非常慢

Question

我正在尝试渲染一堆表情符号作为表情符号选择器的一部分，但浏览器渲染它们的速度非常慢，通常会挂起数百毫秒。

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

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

for (const emoji of Array.from(emojis)) {
  const child = document.createElement('div');
  child.innerHTML = emoji;
  body.appendChild(child)
}

我尝试了不同的浏览器，所有浏览器都显示出相似的行为。我附上了 Firefox 分析器的屏幕截图。

Answer 1

由于每个表情符号的渲染复杂性，在 DOM 中渲染大量表情符号确实会导致性能问题。一种可能的优化是使用单个 DOM 元素一次渲染多个表情符号。

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

const emojisContainer = document.createElement('div');
emojisContainer.textContent = emojis;
document.body.appendChild(emojisContainer);

此方法涉及创建单个 div 元素并将其 textContent 属性设置为整个表情符号字符串。这应该比为每个表情符号创建单独的元素表现得更好。

或者您希望图标有一个选择器以便在聊天中进行选择？