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

【问题标题】：Creating BIG stable web apps with BIG dynamic DOM Tree使用 BIG 动态 DOM 树创建 BIG 稳定的 Web 应用程序
【发布时间】：2023-03-17 22:42:01
【问题描述】：

这个项目的 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 应用程序数据（许多 Megs 的顺序）。如果是这样，您究竟使用了哪种动态 DOM 节点创建方法。任何其他有关内存管理的提示将不胜感激。

【问题讨论】：

无论做什么，都不要自己做。那里有很多很棒的工具。事实上，有太多很棒的工具了。

标签： javascript dom tree

【解决方案1】：

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

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

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

【讨论】：

你有任何性能测试来支持它吗？你能解释一下使用 jQuery 库会比使用原生 javascript 更快吗？
@AdamKonieska jQuery 是一个用 javascript 编写的库。它已成为编写客户端 javascript 的行业标准。来自维基百科文章：jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.[2] jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web.[3][4][5] jQuery is free, open-source software licensed under the MIT License.[1] 我认为您可以在这里找到问题的答案：en.wikipedia.org/wiki/JQuery
这就是重点。 jQuery 是一个 javascript 库。使用 jQuery 将在计算上更加昂贵，因为 jQuery 引入了开销。使用原生 javascript 比通过 jQuery 调用相同/相似的 javascript 更快。
@AdamKonieska 相当不寻常的响应，但如果您想为 jQuery 中的每 1 行等效代码编写 4 行“本机 javascript”，请作为我的客人。编写干净、清晰、可维护的代码应该是目标。如果您在 javascript 中执行所有计算密集型任务，那么您做错了。它是一种单线程解释语言。这将是我对这个话题的最后也是唯一的回应。
我想我过于苛刻了，但我觉得你没有查看这篇文章。广泛使用的库由浏览器预编译和缓存，而用户脚本（您所称的本机代码）是动态解释的。我没有任何分析数据，但看到它如何被数百万个站点广泛使用，它可能就在那里。本质上，当您编写脚本时，它会被解释和编译，这比使用浏览器已经缓存/编译的东西产生的成本要大得多。 Plus 浏览器专门针对 jQuery 进行了优化。

【解决方案2】：

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

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

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

本地应用 js本地节点 js 本地应用数据

因此，应用数据被本地化并分块（尽可能）异步。

【讨论】：

【解决方案3】：

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

不确定您心中有多少“多少 Meg”，但 devtools 在他们的网站上向我展示了大约 35Mb 的堆。所以值得看看他们在做什么。

【讨论】：