在这种情况下，使用片段而不是html字符串有什么好处吗？

Question

我正在编写聊天应用程序，它变得有点复杂，因为我希望它具有交付确认，消息缓存等功能。

现在，我处理邮件缓存的方式是：

1. 用户点击对话

2. 从服务器获取的第一批消息存储在数组内的＆＃34; chunk＆＃34;中。

3. 每个块都是一个文档片段，其中附加了 n 个消息（DOM元素）。
4. 当用户向上滚动时，更多的块（片段）会添加到阵列中，因为它们是从服务器中提取的。
5. 当用户转到另一个会话，但随后决定加载以前加载的会话时，脚本会将所有片段附加到单个会话中，并将大片段附加到消息窗口中。

这是一个带有消息＆＃34; chunks＆＃34;的数组。看起来好像用户已经收到了大量的消息：

conversation[2].chunks = [
    #document-fragment,
    #document-fragment,
    #document-fragment
];

每个片段内附有大约10条消息。

在使用片段之前，我通过获取每条消息的HTML表示来使用字符串。像这样：

conversation[2].chunks = [
    '<span class="msg">Hey</span><span class="msg">Hey</span>...',
    '<span class="msg">Bla</span><span class="msg">bla</span>...'
];

我决定使用片段，因为我发现更容易操作每个消息（通过像fragment.getElementById这样做），而不必使用innerHTML来解析字符串并操纵元素。

但是，我现在质疑它是否是正确的选择，因为我不知道在数组中保留片段是否实际上是内存密集型的，或者至少比字符串更多的内存密集型。 另一个缺点是，现在，如果我想将片段存储在localStorage中，我必须将每个片段的内容转换为HTML字符串，当我想要使用{{1}时我必须将每个HTML字符串转换回文档片段。

使用片段似乎更自然，但现在我想回到保留HTML字符串。不过，这是一项工作，因为我不再使用旧代码。

在这种情况下，使用片段而不是HTML字符串是否有任何优势？

谢谢。

Answer 1

1. 将批量邮件保存为HTML字符串块比保存文档片段块更快（参见jsperf），但
2. 读取文档片段的块用于显示消息远比读取（和解析）HTML字符串更快（参见jsperf）

可以建议：

为了在从服务器接收消息时更快地缓存消息，消息应缓存为HTML字符串。

为了在缓存消息后更快地显示消息，消息应缓存为文档片段。