如何使一個網頁，一個大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