在这种情况下，使用片段比 html 字符串有什么优势吗？

Question

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

现在，我处理消息缓存的方式是：

1. 用户点击对话

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

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

如果用户已经获取了大量消息，则带有消息 "chunks" 的数组将如下所示：

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 字符串，当我想使用 localStorage 时使用我的片段系统，我必须将每个 HTML 字符串转换回文档片段。

使用片段似乎更自然，但现在我想回去保留 HTML 字符串。不过，这有点麻烦，因为我没有旧代码了。

在这种情况下使用片段比 HTML 字符串有什么优势吗？

谢谢。

Answer 1

1. 将成批消息保存为 HTML 字符串块比保存文档片段块更快（参见 jsperf），但是
2. 读取 块文档片段以显示消息比读取（和解析）HTML 字符串 快显示（参见 jsperf）

可以这样建议：​​

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

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