1

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

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

谢谢你。

4

2 回答 2

1

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

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

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

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

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

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

于 2012-06-15T10:37:13.167 回答
0

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

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

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

于 2012-06-14T17:17:39.123 回答