SVG性能改善

如果你是用EChart, HighChart這些第三方組件的話，以下內容可以略過了。

因為項目原因，我們的SVG插件需要定制，沒有第三方插件適合我們，所以一切得靠自己DIY。

 

進入正題。

 

當SVG處理大數據時頁面渲染速度會很慢，這里先記錄一下這段時間的性能改進心得，等稍后時間充裕了再來完善。

性能改進方法：

1. 以降低坐標精度為代價提高性能。
   • 保留1位小數的坐標不會對整體圖形有特別大的影響。
   • 保留0位小數可以較明顯提高性能，但圖形精度受影響明顯
2. 減少頁面SVG元素。
   1. 去掉SVG元素冗余屬性。
   2. 盡量用path畫圖。舉個柱狀圖的例子：如果需要畫5000個矩形數據，用rect來畫就需要5000個SVG對象，但用path來畫只需要1個SVG對象，性能結果顯而易見。注意，此時需要用mousemove事件來響應當前選中的數據。
   3. 基於第2點，如果path數據太大，也會影響性能，此時可以把path對象替換成靜態圖片（需要后台預先生成靜態圖像），同樣還是用mousemove來響應數據。
   4. mousemove的代碼（SVG內的相對位置需要自行處理）

      var svg = $('svg');
      svg.mousemove(function(evt) {
          console.log(`X: ${evt.clientX} Y: ${evt.clientY}`);
          console.log(`OffsetX: ${evt.OffsetX} OffsetY: ${evt.OffsetY}`);
      });