Question

这个项目的DOM树很大，必须动态创建节点。有两种方式：

1）将父元素作为字符串插入父元素，让浏览器推断孩子，即

HTML：

<div id="parent"></div>

和javascript：

str='<input type="text" id="child" size="30">';
documen.getElementById("parent").innerHTML=str;

2）让js创建孩子，即

parentElement=document.getElementById('parent');
childElement=document.createElement('input');
childElement.setAttribute('id','child');
parentElement.appendChild('childElement);

我一直在使用1，当树变大并且应用程序数据变得很大时，它开始变得非常奇怪。比如，例如

aValue="hi";
str='<input type="text" id="child" size="30" value='+aValue+'>';
documen.getElementById("parent").innerHTML=str;

结果将是包含hi的文本行输入元素，以及DOM树和数据到app数据的一些添加元素，并且突然文本行将读取

+aValue+

并说在chrome调试器下你不会看到与所述结果的因果关系。我尝试删除以前的孩子，然后插入新的孩子，它没有任何效果。此外，我在chrome，ff和opera中获得了相同的确切行为。因此，在通用核心浏览器c ++代码中，内存似乎已损坏。

所以问题是：有没有人用BIG动态DOM树（1000个节点的顺序）和BIG app数据（许多Megs的顺序）开发了一个稳定的BIG Web应用程序（订购100k行）。如果是这样，您使用了什么样的动态DOM节点创建方法。关于内存管理的任何其他提示将不胜感激。

Answer 1

您可能想要研究jQuery，而不是使用所有这些额外的调用来构建您的DOM。它使动态创建和操作DOM数据非常容易，并且应该与浏览器无关。

这篇文章讨论了创建新元素： The preferred way of creating a new element with jQuery

这是jQuery的链接：https://jquery.com/

Answer 2

我认为我的问题是，随着内存越来越多，它会在mem＆lt; ==＆gt; file_sys数据交换中暴露某种错误。假设我有8 mb ram，当时说Web应用程序使用6 mb，底层c +（浏览器）代码应该将其余数据添加到某些临时文件中。我暴露了一个错误。我认为，jquery或其他方式仍会弹出。并且它在多个浏览器中弹出，它强化了这种思路。

我现在的方法是模块化代码。我正在构建一个应用程序树，其中每个节点（一个浏览器实例）包含自己的功能，当功能完成后，数据将传递给父节点（如果需要，则传递给其他子节点）和实例关闭。这样，100,000行被分解为20个实例，每个实例有5000行。并且DOM树也发生了同样的粒化。我正在做的另一件事是根据需要动态加载.js功能（ala c + dll）。

然后仍然是应用数据。在那里，我将整个平台移动到node.js，并且我将Web应用程序作为对等体（而不是客户端服务器）运行，即所有io都像：

本地应用js＆lt; == ajax ==＆gt;本地节点js＆lt; == local io ==＆gt;本地应用数据

因此，应用程序数据已本地化并且尽可能地分块（尽可能）async。

Answer 3

这有点晚了，但你可能想调查一下facebook开发的react库。

不确定你脑子里有多少“Megs”，但是devtools在他们的网站上显示了大约35Mb的堆。所以值得查看他们正在做什么。

使用BIG动态DOM树创建BIG稳定的Web应用程序

3 个答案: