如何使一个网页，一个大cytoscape.js网络响应速度更快

Question

我的机构是处理几个相当大的网络：

• 各地1000个节点和2000条边（所以小于this one）
• 固定节点位置，
• 每个元素可能有几十个属性，
• 和一个1MB及以上的缩小的网络文件大小。

我们用cytoscape.js可视化定制的HTML页面（每页一个网络）中的网络。界面允许用户为节点选择不同的预定义着色选项（主要功能） - 颜色是从一组数值节点属性中的一个中计算出来的。辅助功能包括节点qtips，查找节点并以此为中心（通过select2下拉菜单），并根据节点分配给预定义组（通过另一个select2下拉菜单）突出显示节点。

我们面临的问题是，当启动颜色变化时，页面（以及必然整个浏览器）至少5秒钟无响应，我们正在寻找解决方法。下面是一些我们已经尝试过或正在考虑的事情：

1. 移植节点属性分开是经由XHR时需求获取的文件（已完成，但性能影响不清楚）。
2. 将cytoscape.js卸载到Web工作人员（产生错误 - 可能是由于工作人员的DOM限制 - 或没有提高性能）。
3. 高速缓存颜色色调计算结果为lodash's memoize()或类似（未决）。
4. 将每个着色网络导出为图像，并将一些固定位置的HTML元素（或画布？）放置在图像堆栈顶部以便节点qtips等。所以我们会用静态图像和自定义JavaScript bascially取代cytoscape.js。

我很欣赏任何有关提高性能的替代或补充策略的建议，以及迄今为止对我们尝试的评论。谢谢！

Answer 1

更改1000个节点和2000个边的样式需要约150ms我现在使用的机器。由此可见，这个问题很可能出现在你自己的代码中。

您还没有发布您当前编写的示例或示例，因此我无法说出代码中的性能问题。

您已经暗示您正在使用小部件，如<select>。我怀疑你是从DOM中读取的（例如widget状态）。 DOM操作（甚至读取）很慢。

无论您的性能问题是什么，您都已决定使用自定义函数进行造型。文档记录了几次，但我会在此重申：自定义函数可能很昂贵。使用自定义功能就像没有自动驾驶仪的飞机一样。你可以做到，但现在你必须自己注意所有的小细节。如果您坚持内置的样式表功能，可以快速自动处理样式应用程序（如自动驾驶）。

如果您想继续使用昂贵的自定义函数，则必须使用缓存。 Lodash使这很简单。即使您放弃使用映射器设置.data()的自定义函数，仍可能发现Lodash的缓存对您的计算有用。

您可能会发现这些材料有用：

• Chrome JS profiling
• Firefox performance profiling
• Cytoscape.js performance hints