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}`);
      });