将DOM对象保存在内存中Vs将HTML字符串保存在内存中以便重复使用

Keeping DOM Object in Memory Vs String HTML in Memory for repeated use

本文关键字：内存 存在 保存 Vs DOM 对象 HTML 字符串      更新时间：2023-09-26

我正在创建一个即插即用聊天模块，它加载(通过ajax)一个chatbox html作为字符串。这个html字符串有一些元素是隐藏的(display:none)，并且会被重复使用。如:

<div class="chatboxmain">
 <div class="incomingmsg" style="display:none;">
 <div>
  <span class="msgtext"></span>
  <span class="msgtime"></span>
 </div>
 </div>
 <div class="outgoingmsg" style="display:none;">
 <div>
 <span class="msgtext"></span>
 <span class="msgtime"></span>
 </div>
 </div></div>
<!-- .....So on 5 types of messages contact,video,image -->
<div class="incomingcontactmsg"></div>
<div class="outgoingcontactmsg"></div>
</div>

因为我可以有多个聊天框，所以我只加载模板一次并将其保存在javascript字符串对象中。

template.chatbox=chatboxstring;

我必须从chatbox模板中提取消息模板，并将它们保存在内存中，以便我不会一次又一次地查询我的dom。

template.incomingmsg="";
template.outgoingmsg="";

为了实现上述目标，我做了以下操作:

var a=createElement("div");
a.innerHTML=template.chatbox;
template.incomingmsg=a.querySelector('.incomingmsg').innerHTML;
template.outgoingmsg=a.querySelector('.outgoingmsg').innerHTML;

问题1:以上是唯一的方法吗?

问题2:我为传入和传出消息保存字符串，并在每次消息到来时将它们包装在div中。哪个更好?a.将DOM节点保存在javascript对象的生命周期中，或者b.保存一个字符串(用于innerhtml)，并在每次接收和发送消息时一次又一次地解析它。我提出了这个问题，因为内存中的NODE对象比字符串对象消耗更多的内存，而附加字符串作为InnerHtml，我将再次重复解析相同的字符串。

1)对于处理XML(HTML)在js也许我不会使用纯HTML dom访问，会使用一些框架，例如jQuery(有更多的框架与不同的性能):

https://api.jquery.com/jQuery.parseXML/

它比使用html DOM和innerHTML更具可读性。记住，可读性是非常重要的。如果你几个月后再看你自己的代码，你就不知道发生了什么。

在客户端(浏览器)你只处理一个客户端，这是很好的认识。因此，即使有20,000个用户使用您的应用程序，如果您在客户端使用一种或另一种方式，这也不是一个大问题。您的性能重点应该放在服务器端。

我会使用的解决方案，我使用更多的内存，不需要解析每次(a)。

相关文章：