如何使具有较大cytoscape.js网络的网页更具响应性

Question

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

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

我们使用cytoscape.js在自定义HTML页面（每页一个网络）中可视化网络。界面允许用户为节点选择不同的预定义着色选项（主要功能） - 颜色是从一组数字节点属性中的一个计算的。附件功能包括节点qtips，查找节点并以其为中心（通过select2下拉列表），并根据节点对预定义组的分配突出显示节点（通过另一个select2 drowpdown）。

我们面临的问题是，无论何时启动颜色更改，页面（以及整个浏览器）都会无响应至少5秒，我们正在寻找解决此问题的策略。以下是我们尝试过或正在考虑的一些事情：

1. 将节点属性移植到通过XHR按需获取的单独文件（已完成，但性能影响不明）。
2. 将cytoscape.js卸载给Web worker（产生错误 - 可能是由于工作者DOM限制 - 或者没有提高性能）。
3. 使用lodash's memoize()或类似（待定）缓存颜色色调计算结果。
4. 将每个彩色网络导出为图像，并将一些固定位置的HTML元素（或画布？）放在图像堆栈的顶部以用于节点qtips等。因此，我们将基本上用静态图像和自定义JavaScript替换cytoscape.js。

我感谢任何关于提高绩效的替代或补充策略的建议，以及对我们迄今为止的尝试的评论。谢谢！

Answer 1

更改1000个节点和2000个边缘的样式需要大约150毫秒我正在使用的机器。因此，问题很可能出在您自己的代码中。

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

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

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

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

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

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