Benchmarking HighCharts，D3和Canvas繪圖

我們正在嘗試爲我們的應用程序選擇SVG（HighCharts，D3）或Canvas。繪圖效率對我們至關重要。所以我在rect圖上做了一個非常簡單的基準測試。請檢查：Benchmarking HighCharts，D3和Canvas繪圖

事實證明，highcharts花周圍900毫秒繪製，D3花周圍50毫秒〜70ms的，而帆布花費〜1ms的繪製（檢查console.log）。

我預計SVG可能比Canvas慢。但我從來沒有預料到差距如此之大。更糟糕的是，如果我將迭代次數更改爲10000，Canvas將在10ms內完成，而SVG將在28s左右完成！我們的應用程序不會有太多的對象，但如果我們想要擴展，這種性能是不可接受的。

我做錯了什麼？如何爲SVG編寫更高效的代碼？ SVG導出功能對我們也很重要。

來源

2014-02-27 Joy

什麼連接不繪製10000矩形元素繪製一個繪圖（你會做一個單一的路徑元素）？ –

在性能方面，我們還發現圖表中的所有SVG元素都可以在包含圖表的頁面上進行DOM操作（迴流/重繪），速度非常緩慢，特別是在結合了許多不同圖表的儀表板頁面上。而帆布是每個圖表的一個元素，無論渲染多麼複雜，而且畫布內的更改甚至不會觸發瀏覽器重排操作。使用SVG顯然還有其他優勢，但我們發現，如果問題是初始情節之後的規模和整體UX性能，畫布顯然是可取的，至少要一個數量級。 – XML

您應該比較渲染相同的對象，而不是初始化完整的圖表並使用渲染器。在這種情況下，你應該使用此解決方案：

http://jsfiddle.net/jxpSk/2/

$(function() { 

     var startTime = $.now(); 
     var ren = new Highcharts.Renderer($('#container')[0],600,1000); 

     for (var i = 0; i < 1000; i++) { 
      ren.rect(i, i, 100, 100, 0).attr({ 
       fill: '#FF0000' 
      }).add(); 
     } 

     var endTime = $.now(); 
     console.log('Time: ' + (endTime - startTime)); 
    });

話會更客觀。

來源

2014-02-27 09:29:40

@Bochan，謝謝。但我需要'圖表'對象來添加工具提示。爲什麼它更快？但是時間加速到〜350ms，仍然比D3差得多。是什麼原因？ – Joy

你可以擺脫jQuery，並嘗試使用standlaone包裝http://www.highcharts.com/component/content/article/2-news/58-highcharts-standalone-framework –

我需要jQuery ... – Joy

Benchmarking HighCharts，D3和Canvas繪圖

回答

相關問題