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

时间:2015-09-05 16:38:57

标签: javascript innerhtml documentfragment

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

现在,我处理邮件缓存的方式是:

  1. 用户点击对话

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

  3. 每个块都是一个文档片段,其中附加了 n 个消息(DOM元素)。
  4. 当用户向上滚动时,更多的块(片段)会添加到阵列中,因为它们是从服务器中提取的。
  5. 当用户转到另一个会话,但随后决定加载以前加载的会话时,脚本会将所有片段附加到单个会话中,并将大片段附加到消息窗口中。
  6. 这是一个带有消息" 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字符串,当我想要使用{{1}时我必须将每个HTML字符串转换回文档片段。

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

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

    谢谢。

1 个答案:

答案 0 :(得分:0)

  1. 将批量邮件保存为HTML字符串块比保存文档片段块更快(参见jsperf),但
  2. 读取文档片段的块用于显示消息比读取(和解析)HTML字符串更快(参见jsperf
  3. 可以建议:

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

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