HTML5高性能拓撲圖 - 十萬圖元渲染

本文的話題是：性能，HTML五、JS、Qunee組件的性能和效率問題

歷史回顧

以往提到Javascript，聯想到的是緩慢的、容易出錯的小東西，一種腳本語言，如今瀏覽器的發展，js引擎的優化，js已經今非昔比，不管在瀏覽器端仍是服務器端，都有一席之地，結合HTML5開發企業級應用變得切合實際，以往要在瀏覽器中實現豐富的圖形效果，一般會選擇flex富客服端解決方案，也有些Web2.0時代的組件，好比Extjs，以及各類圖表組件，但性能上並不理想，隨着HTML5的普及，Web組件有了新的思路，拋棄老IE瀏覽器，了卻後顧之憂，實現真正的高性能，這一點Qunee圖形組件已經將Flex遠遠拋到腦後，實現上萬圖元，流暢操做

靜態拓撲圖性能

首先是常規的性能參數，拓撲圖加載時間，經過對連線的簡化，使用Qunee開發版本，能夠兩秒內渲染一萬圖元，並且平移縮放，節點移動，框選都很是流暢，甚至咱們測試過十萬數量級，五年前的老機器上測試，能夠在二十多秒渲染，並且依然能夠操做，導出2億像素的超大圖也沒問題，詳情可參看後面的視頻效果

Qunee拓撲圖加載時間報表

動態拓撲圖性能

還有一種動態圖的狀況，經過動畫或者不停的更改圖元樣式，或者增減操做，拓撲圖頻繁刷新，咱們選擇一個彈簧佈局來測試這種場景下qunee組件的表現，結果是兩千數量級時表現流暢，六千數量級時依舊可用，詳情參看視頻後半段

大數據量下彈簧佈局

Qunee性能測試

十萬級圖元拓撲圖的考驗，oschina不支持HTML5視頻，沒辦法只能貼上youku的flash，原文使用HTML5 video: 

http://blog.qunee.com/?p=4676