流程圖控件GoJS教程：GoJS圖表的感知性能注意事項

---

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新版

性能考量

當圖表僅限于數百個節點和鏈接時，尤其是在桌面上，則為圖表獲得良好的性能并不需要您付出任何努力。但是，當您的應用程序可能處理成千上萬個節點和鏈接時，您可能需要調整實現以避免昂貴的功能。

圖表的感知性能取決于許多不同的因素。

• 在相同的硬件平臺上，JavaScript代碼通常比Java或.NET代碼慢幾倍至幾倍。
• 不同瀏覽器和瀏覽器版本之間的JavaScript代碼性能有所不同。
• 內存限制（特別是在移動設備上）會影響性能。
• 不同平臺上的繪圖性能可能會有很大差異。
• 繪圖和動畫效果占用資源。
• 復雜的節點或鏈接比簡單的節點或鏈接更慢地構建，更新和繪制。
• 有些布局本來就比其他布局慢。

效果和外觀

繪制陰影相對昂貴，因此請考慮不要將Part.isShadowed設置為true。漸變畫筆比純色的繪制速度慢。復雜形狀 幾何圖形比簡單形狀幾何圖形繪制速度慢，并且在計算交點時需要更多的計算。

動畫占用資源；考慮將AnimationManager.isEnabled設置為false。

構造節點并調整其大小

保持節點和鏈接盡可能簡單。限制模板中使用的GraphObject數量。在可行的情況下使用更簡單的面板類型-“表格”面板功能最強大，但是也許您可以只使用“水平”面板，“垂直”面板，“ Spot”面板或“自動”面板。面板中應包含兩個或多個元素（盡管可能會有例外）。如果面板中沒有元素，請刪除該面板。如果面板中只有一個元素，請考慮卸下面板并將該元素合并到面板的包含面板中。

不包括不可見的對象。限制多少數據綁定使用，并避免綁定s的無源屬性名稱或者是Binding.ofObject。

如果您有圖片，并且事先知道其預期大小，則最好設置其GraphObject.desiredSize （或GraphObject.width和GraphObject.height），以便在圖像加載后不必重新測量。當節點更改大小時，可能需要再次執行“布局”，因此具有固定大小的節點有助于減少圖的布局。通常，在節點的元素上設置GraphObject.desiredSize，尤其是Picture，將加快GoJS測量和排列構成節點或鏈接的Panel的速度。

鏈接

在非常大的圖中 ，Link.routing屬性值Link.AvoidsNodes可能會變慢。考慮不要在注重性能的大型圖形中使用它，或者不打算在初始布局完成后設置它（使用“ InitialLayoutCompleted” Diagram事件偵聽器），或者最好在那時僅在選擇鏈接上設置它。

使用Link.curve值為Link.JumpOver或Link.JumpGap的速度比不必計算此類鏈接交叉并繪制小弧或繪制間隙的所有點要慢得多。

版面

GridLayout和TreeLayout很快。LayeredDigraphLayout很慢。

虛擬化

對于具有許多節點和鏈接的圖表，這些節點和鏈接一次只顯示其中的一小部分，您可以實施某種形式的虛擬化來優化您的圖表。“虛擬樹”示例總共包含123,456個節點，但由于它僅構造與視口相交的節點和鏈接，因此加載和渲染的速度相當快。

但這確實使圖的實現復雜化，因為您需要使用與Diagram.model不同的模型，并在視口更改時管理添加和刪除節點和鏈接。此外，布局更復雜，因為它需要在LayoutVertex和LayoutEdge上工作，而不是在Node和Link上工作。

其他虛擬化示例在示例索引中列出。

其他注意事項

如果要取消圖表與HTML Div元素的關聯，請將Diagram.div設置為null。如果刪除HTML DOM的一部分，其中包含帶有圖的Div，則需要將Diagram.div設置為null，以使頁面能夠垃圾回收內存。

根據您的應用程序，當存在較慢的環境（例如在移動設備上）時，有選擇地關閉某些功能（例如陰影和動畫）或完全使用更簡單的模板可能是值得的。

您可以使用多個模板，具體取決于您的縮放級別。如果縮小得足夠遠（因此屏幕上有很多節點），則可以切換到簡化模板，以便更快地渲染（在平移，拖動等時）。但是，切換模板的過程會降低性能，因為零件必須自行重建。

如果您認為可以從其他圖形優化中受益，那么會遇到獨特或節點數量多的圖表情況，請。

---

想要購買GoJS正版授權，或了解更多產品信息請點擊