G6 3.3 性能戰鬥機

本文做者：十吾

🌈G6 3.3 正式版今日正式發佈。

AntV G6 是一款開源的圖可視化引擎，專一於圖可視化及圖分析領域。
歡迎關注和 star 咱們的 GitHub：https://github.com/antvis/G6
官網：https://g6.antv.vision/zh/

圖——實體與關係的集合，每每具備龐大的數據量。最多見的圖可視化將關係數據繪製爲大量節點和邊元素，而每個元素也可能由多種圖形複合而成，例如最爲常見的帶文本節點。圖元素的樣式變化萬千，渲染、交互性能一直是關係數據可視化中最爲棘手問題之一。特別是在前端計算資源有限的狀況下，如何提高圖可視化的性能，成爲 G6 一大難題。

2020 年伊始，咱們終於向着這一難題跨出了第一步 —— 性能卓越的 G6 3.3 正式發佈。讓咱們一睹性能戰鬥機的究竟吧！

戰鬥機之引擎

G6 本次性能升級主要歸功於底層渲染引擎的全面升級。因爲用戶在對圖進行交互時，每每是對局部元素進行操做，例如：更新樣式、拖拽…。而頻繁的渲染是 G6 性能較低的主要因素。所以，咱們使用「局部渲染」機制替代了以往的全局渲染。 什麼是局部渲染？如上圖所示，咱們但願更新圖 a 中的星形的填充色爲綠色：

• 全局渲染：將會如圖 b 所示從新繪製由紅色邊框標識的整個畫布；

• 局部渲染：首先計算須要更新的圖形的最小包圍盒，即圖 c 所示的紅色邊框標識區域，並僅從新繪製該包圍盒範圍內的畫布。

相似地，拖拽元素時也涉及到畫布的頻繁刷新。如上圖，在拖拽星形過程當中，局部渲染將只涉及到星形自己以及被它遮蓋到的其它圖形。

因爲前端 Canvas 渲染效率低下，這種局部渲染機制大大提升了效率，特別是在圖上元素數目龐大、更新頻繁的狀況中。但咱們也要認可局部渲染須要額外進行包圍盒計算的開銷。

戰鬥演習

瞭解了戰鬥機引擎構造後，如今讓咱們進入性能戰鬥機演習階段。

演習一：小試牛刀

數據 Net-Science 有 1589 個節點，2742 條邊。描述了科研工做中論文做者之間的合做關係。節點表明論文做者，若兩個做者之間存在合做，則兩個節點間存在一條邊。

概覽

使用 G6 繪製該數據，節點大小映射了其度數大小。咱們能夠發現有不少離散節點，表明了這些學者或許是「極客獨行俠」。另外，圖上有一些有趣的局部結構，例如綠色線框中度數較高的節點，表明了該學者與許多學者有合做；紅色線框標註的全鏈接子圖（clique），表明這一羣學者合做關係十分緊密，兩兩之間都存在過合做。

用戶但願經過交互瞭解這些特殊的結構，如拖拽單個節點以瞭解該節點的鏈接狀況、拖拽子圖將其放置在其餘位置、標註節點的名稱等。

實驗

爲了更好地展現每一個節點的具體信息，每每須要爲節點添加文本。文本是 Canvas 渲染中的性能消耗大鱷，且節點上的文本可能很長。若每一個節點帶有一個文本標籤，則該圖有 1,589 * 2 + 2,742 = 4331 個圖元。

如今，咱們測試 G6 拖拽單個節點與一羣節點的性能。因爲該數據量不算巨大，使用 G6 3.2 及以前的版本對單個節點拖拽的交互體驗仍能接受，但仔細觀察會發現被拖拽的節點並不能很好地跟隨鼠標，幀率較低。而 G6 3.3 在有複雜文本的狀況下仍能保證順滑的拖拽效果。

演習二：披荊斬棘

數據 Eva 有 8,343 個節點，6,726 條邊，描述了美國一些公司之間的從屬關係。一個節點表明一個公司，若公司 A 爲公司 B 的擁有者，則兩個節點之間存在一條邊。

概覽

一樣，節點大小映射了其度數大小。除了有諸多離散在外圈的單個節點外，圖中有許多度數很高的節點，其鄰居節點放射狀分佈在其周圍。用戶可能但願經過拖拽從新規劃某些節點、某羣節點的位置，從而可以更清晰地觀察詳細結構。

實驗

在這個實驗中，每一個節點帶有一個文本標籤，即該圖有 8,343 * 2 + 6,726 = 23,412 個圖元。如今咱們測試拖拽一羣節點到新到位置時，從鼠標開始拖動到完成響應所耗時長。咱們發如今 G6 3.2 及以前的版本中，因爲響應速度太慢，致使幾回拖拽都沒有成功，最後一次在鼠標移動很是緩慢時才勉強被拖動，交互體驗極差。而 G6 3.3 中拖拽很是順暢。

如今，咱們測試在鼠標移動過程當中節點經過樣式變化響應鼠標的 hover，能夠看到 G6 3.3 中的響應速度更快、幀率更高：

演習三：衝雲破霧

數據 「模擬大規模系統調用樹」 爲樹圖，具備 440 個節點，439 條邊。每一個節點上具備豐富的信息。一個節點表明了系統中的一個模塊，兩個模塊之間若存在調用關係，則兩節點之間存在一條邊。

概覽

該數據的每一個節點上具備豐富的信息，所以一個節點是 9 種圖形的組合；每條邊也由 3 個圖形組合而成。這意味着圖上有 440 * 9 + 439 * 3 = 5277 個圖元，其中，有約 42% 爲極耗性能的文本圖形。邊被表達成貝塞爾曲線，這意味着在更新每一條邊時，要比直線更多的計算量。且一條貝塞爾曲線的包圍盒較之於一條直線要更大，所以局部渲染須要重繪的範圍也更大。換句話說，使用非直線的邊將會更加消耗性能。

從下圖能夠發現，圖的範圍極大，一屏徹底沒法展現。用戶必須經過交互進行探索。當鼠標進入邊或節點時，相應的圖形經過樣式的變化進行響應。而非葉子節點能夠進行展開、收縮操做。

實驗

首先，咱們對比在鼠標進入/離開邊或節點時，圖形作出響應的幀率。

• 邊的 hover 響應：能夠發如今 G6 3.2 及以前的版本中，邊的響應很是慢，甚至在鼠標滑過的速度過快時，沒有作出響應，其幀率約 5.5～8.6fps；而在 G6 3.3 中，邊響應速度較快，幀率約 12.9～22.6 fps。這是因爲 G6 3.3 的引擎不只作到了局部渲染，還優化了非直線路徑的拾取效率。

• 節點的 hover 響應：G6 3.2 及以前的版本幀率約爲 7.1～10.3 fps，有明顯卡頓感；而 G6 3.3 的幀率約爲 23.4～32.5fps，很是順滑。

接下來，咱們對比在該大規模樹上進行子樹的摺疊/擴展效率。G6 3.2 及以前的版本中，摺疊/擴展動畫有明顯的卡頓感，幀率約 6.2～9.4fps。而 G6 3.3 的摺疊/擴展動畫順滑，幀率爲 20.1～34.4 fps。

戰鬥機——「折翼的天使」

如今，G6 的性能還只能算是「折翼天使」。雖然有了強大的引擎，但在上層還有很大的優化空間。例如減小沒必要要的深複製、優化邊的重計算等。這將是性能戰鬥機真正可以高速翱翔的強健機翼，咱們將會持續打造更強悍的圖可視化戰鬥機。

夾帶私貨

G6 3.3 除了性能顯著提高外，咱們還有如下新特性：

• 全面擁抱 TypeScript；

• 處理拖拽節點/畫布超出畫布的狀況；

• 更自由的元素與佈局配置；

• 更豐富的構建產物。

G6 3.3 初步解決了困擾咱們已久的性能問題，對 TS 開發者更加友好。同時，處理了交互上的多種複雜狀況。G6 社區正在逐步擴大，它將更加開放、自由地迎接來自社區的共建。歡迎您的加入！

G6 從 2017 年發展至今，從 1.0.0 迭代到 3.3.0，這過程當中有哪些經歷和思考，請參考 AntV 架構演進-G6 篇。

AntV G6 是一款開源的圖可視化引擎，專一於圖可視化及圖分析領域。 歡迎關注和 star 咱們的 GitHub：https://github.com/antvis/G6 官網：https://g6.antv.vision/zh/