流程圖控件GoJS教程：GoJS圖表的感知性能注意事項(xiàng)

---

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

點(diǎn)擊下載GoJS最新版

性能考量

當(dāng)圖表僅限于數(shù)百個節(jié)點(diǎn)和鏈接時，尤其是在桌面上，則為圖表獲得良好的性能并不需要您付出任何努力。但是，當(dāng)您的應(yīng)用程序可能處理成千上萬個節(jié)點(diǎn)和鏈接時，您可能需要調(diào)整實(shí)現(xiàn)以避免昂貴的功能。

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

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

效果和外觀

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

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

構(gòu)造節(jié)點(diǎn)并調(diào)整其大小

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

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

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

鏈接

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

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

版面

GridLayout和TreeLayout很快。LayeredDigraphLayout很慢。

虛擬化

對于具有許多節(jié)點(diǎn)和鏈接的圖表，這些節(jié)點(diǎn)和鏈接一次只顯示其中的一小部分，您可以實(shí)施某種形式的虛擬化來優(yōu)化您的圖表?！疤摂M樹”示例總共包含123,456個節(jié)點(diǎn)，但由于它僅構(gòu)造與視口相交的節(jié)點(diǎn)和鏈接，因此加載和渲染的速度相當(dāng)快。

但這確實(shí)使圖的實(shí)現(xiàn)復(fù)雜化，因?yàn)槟枰褂门cDiagram.model不同的模型，并在視口更改時管理添加和刪除節(jié)點(diǎn)和鏈接。此外，布局更復(fù)雜，因?yàn)樗枰贚ayoutVertex和LayoutEdge上工作，而不是在Node和Link上工作。

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

其他注意事項(xiàng)

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

根據(jù)您的應(yīng)用程序，當(dāng)存在較慢的環(huán)境（例如在移動設(shè)備上）時，有選擇地關(guān)閉某些功能（例如陰影和動畫）或完全使用更簡單的模板可能是值得的。

您可以使用多個模板，具體取決于您的縮放級別。如果縮小得足夠遠(yuǎn)（因此屏幕上有很多節(jié)點(diǎn)），則可以切換到簡化模板，以便更快地渲染（在平移，拖動等時）。但是，切換模板的過程會降低性能，因?yàn)榱慵仨氉孕兄亟ā?/span>

如果您認(rèn)為可以從其他圖形優(yōu)化中受益，那么會遇到獨(dú)特或節(jié)點(diǎn)數(shù)量多的圖表情況，請聯(lián)系客服。

---

想要購買GoJS正版授權(quán)，或了解更多產(chǎn)品信息請點(diǎn)擊【咨詢在線客服】