构建 javascript 对象而不冻结

Question

我目前正在开发一个管理面板，用于在图中添加和删除顶点。 我有三个大型“网络”图，每个图大约有 500 个节点，我可以毫无问题地加载和构建它们。 现在，只有一个在 HTML5 中以图形方式显示。为图表创建所有 HTML5 对象非常耗时（大约 5 秒左右）。图表可能会在未来增长，而这次可能会增加。在构建图形 UI 时，网站没有响应，我正在尝试解决这个问题。 我使用了“setTimeout”，但没有达到预期的结果。

我想知道是否可以在一个外部文件中构建一个 javascript-Object，然后可以用 ajax 调用它？请注意，我要构建的对象来自 javascript 函数和基于 HTML5！

谢谢。

Answer 1

您可以使用 nodejs 在服务器上运行处理器密集型代码，并通过简单的 ajax 调用仅返回 JSON 结果。

在没有看到任何代码的情况下，很难详细说明您将如何实现这一点。但是如果对象已经在 J​​S 中构建，那么卸载到节点应该不难。

也许看看这个答案，了解如何使用节点创建简单的服务器响应： Basic Ajax send/receive with node.js

Answer 2

我对这个问题的假设是： 1）你得到的数据没有任何问题 2) 导致速度变慢的是 HTML 的呈现。

DOM 并不是世界上响应速度最快的东西。这听起来很奇怪，但实际上构建一个巨大的 HTML 字符串非常快，然后通过调用 div.innerHTML 或 $('#graph').html() 一次性设置它。

原因是一旦字符串构建完成，复杂的字符串处理和 DOM 操作就发生在用高度优化的 C 或 C++ 编写的浏览器中，而不是 JavaScript 引擎。

另一种选择是将渲染拆分为多个部分，并尝试使用 setTimeout “让步”给其他事件。

有了这个，你可以一次迭代你的 500 个节点 50 并调用 setTimeout(next, 0) 来继续接下来的 50 个节点。这将允许在做太多工作之前处理其他事件。

一个副作用可能是图表分阶段显示，因为 setTimeout 将允许 DOM 在继续之前渲染该部分。