Javascript 如何在不冻结浏览器的情况下在web浏览器中列出数千个/大列表的表情符号？

我看了几个问题，但似乎没有一个能解决我的问题。 项目需要在一个div（modal）中打开一个emojis列表。因此，当用户按下表情按钮时，会出现带有表情符号的模式。如果我们列出数百个表情符号，那么这几乎可以立即完成。如果我们放置数千个表情符号，那么加载模态需要几秒钟

我提供了一个emojis演示数组的片段。 尝试了经典的方法和createDocumentFragment（灵感来源于），两者都具有相同的效果

正在寻找一种可以一次呈现一个表情的解决方案，就像在队列中一样。我知道我可以将DOM元素推送到队列中，当它被加载时，我可以切换到下一个元素。唯一的问题是我不知道什么时候显示

content.appendChild（按钮）

或

fragment.appendChild（按钮）

。我已经读到，您可以使用

setTimeout

函数，但我不知道该设置什么时间，或者在这种情况下是否建议设置时间

谢谢大家!

函数showmojis（）{
让符号=[
"☺", "☻", " 这似乎是浏览器/操作系统窗口管理器与emojis（Unicode）斗争时出现的问题

一个解决方法是照片，就像（）
问题是您正在运行并在Show emojis button的click事件上创建按钮这会在用户每次单击emogi按钮时执行相同的代码
优化这一点的一些方法是

在window.Load中运行此方法
在异步方法中运行此命令，以便在回传中加载此命令
隐藏文档片段并仅在用户单击按钮时显示
另外，不为每个按钮设置onclick侦听器，而是执行类似的操作会更容易

<button id='button'> emoji</button>
<button id='button'> emoji2</button>

您可以创建一个帮助器，该帮助器接受一个片段并将其子对象以块的形式附加到容器中。通过在
setTimeout
中包装每个调用以添加块，其他javascript内容有机会在两者之间运行。例如，如果用户按下表情符号或UI的其他部分，它将只等待写入一个块，然后再响应

您可能希望调查单个写入所造成的开销，并检查最佳块大小。首先为每个块创建片段，然后只对DOM执行一次写入，这可能是有意义的。这将由您或其他回答者来确定：）


函数appendInChunks（片段、容器、chunkSize=5）{
函数writeChunk（）{
for（设c=0；c"☺", "☻“，”这可能是因为当默认字体不支持字符时，字体引擎必须对每个字符使用其回退机制。请尝试显式指定一种已知可覆盖表情符号范围并可在各种平台上使用的字体。或提供webfont。
document.addEventListener('click', (event) => {
if (event.target.id === 'button') {
    console.log(event.target.innerHtml)
}