javascript 在浏览器中渲染js真的很慢

b1payxdu 于 2023-11-15 发布在 Java

关注(0)|答案(1)|浏览(164)

我试图渲染一堆表情符号作为表情符号选择器的一部分，但浏览器在渲染它们时真的很慢，通常会挂起几百毫秒。

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分析器的截图。

的数据

JavaScript

来源：https://stackoverflow.com/questions/77485881/emojis-really-slow-to-render-in-browser

1条答案

按热度按时间

ee7vknir1#

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

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

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

字符串
这种方法需要创建一个单独的div元素，并将其textContent属性设置为整个表情符号字符串。这应该比为每个表情符号创建单独的元素效果更好。
或者你想让图标有一个选择器在聊天中选择？

赞(0）回复(0）举报 2023-11-15

我来回答

javascript 在浏览器中渲染js真的很慢

1条答案

相关问题

热门标签

最新问答