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

Creating BIG stable web apps with BIG dynamic DOM Tree

本文关键字：BIG 应用程序 Web 创建 动态 DOM 使用      更新时间：2023-09-26

这个项目的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 树和数据到应用程序数据的数据，突然间文本行将读取

+aValue+

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

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

与其使用所有这些额外的调用来构建 DOM，不如研究 jQuery。它使动态创建和操作 DOM 数据变得非常容易，并且应该独立于浏览器。

这篇文章讨论了创建新元素：使用 jQuery 创建新元素的首选方法

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

我认为我的问题是，随着内存越来越重，它会在mem<==>file_sys数据交换中暴露某种错误。假设我有 8 MB 内存，当 Web 应用程序使用 6 mb 时，底层 c+（浏览器）代码应该将其余数据添加到某个临时文件中。我在其中暴露了一个错误。所以jquery或其他东西仍然会弹出，我想。而且它在多个浏览器中弹出，它强化了这种思路。

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

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

本地应用程序 JS<==ajax==>local node js <==local io ==> 本地应用程序数据

因此，应用数据是本地化和分块（尽可能多）异步的。

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

不确定你脑海中有多少"许多 Megs"，但 devtools 在他们的网站上向我展示了一个 ~35Mb 的堆。因此，值得检查他们在做什么。

相关文章：