提问人：Astro Bear 提问时间：11/15/2023 最后编辑：ReynoAstro Bear 更新时间：11/15/2023 访问量：70
表情符号在浏览器中呈现的速度真的很慢
Emojis really slow to render in browser
问：
我正在尝试将一堆表情符号作为表情符号选择器的一部分呈现出来，但浏览器在渲染它们时速度真的很慢，通常会挂起几百毫秒。
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分析器的屏幕截图。
答：
1赞
Destroyer369
11/15/2023
#1
由于每个表情符号的渲染复杂性，在 DOM 中渲染大量表情符号确实会导致性能问题。一种可能的优化可能是使用单个 DOM 元素一次呈现多个表情符号。
const emojis = "🐵🐒🦍🦧🐶🐕🦮🐕🦺🐩🐺🦊🦝🐱🐈🐈⬛🦁🐯🐅🐆🐴🫎🫏🐎" +
"🦄🦓🦌🦬🐮🐂🐃🐄🐷🐖🐗🐽🐏🐑🐐🐪🐫🦙🦒🐘🦣🦏🦛🐭🐁🐀🐹🐰🐇" +
"🐿️🦫🦔🦇🐻🐻❄️🐨🐼🦥🦦🦨🦘🦡🐾🐵🐒🦍🦧🐶🐕🦮🐕🦺🐵🐒🦍🦧🐶🐕🦮";
const emojisContainer = document.createElement('div');
emojisContainer.textContent = emojis;
document.body.appendChild(emojisContainer);
此方法涉及创建单个 div 元素并将其 textContent 属性设置为整个表情符号字符串。这应该比为每个表情符号创建单独的元素更好。
或者您是否希望图标有一个选择器，以便在聊天中进行选择？
评论
1赞
Astro Bear
11/15/2023
谢谢，但正如你所说，我希望用户能够点击一个图标，让它出现在其他地方
0赞
Destroyer369
11/17/2023
您可以尝试阅读有关“DocumentFragment”的文档。Mby将帮助您 developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
评论