针对SVG的性能优化

       SVG是一种富客户端技术，是一种实时的解析并且渲染的XML，所以在交互性能上不是非常令人满意的，其实这也是富客户端技术的通病，本身效果和性能就不可兼得，这就需要我们做出一种平衡。

 

      对于SVG的性能也是有一些方法优化的，其实对于SVG的优化可能从两方面入手来解决，一是SVG本身的优化，另一方面是针对js的优化，那么关于js的优化其实网络上很多方法，这里不过多介绍，下面主要是从SVG自身优化的角度进行介绍。

 

       1. 将属性“Pointer-event”设置为None。

       其实如果一个元素如果要是不需要产生任何事件的话，最好吧这个属性设置成none。其实每个元素都有很多事情，一次鼠标移动就可以让有用没有用的事件被激活，即便是没有事件处理函数，SVG解析器也是要处理这些事件消息的。所以为了减少解析器的工作负担，就直接屏蔽掉最好。

       2. 重复标签定义在defs中

       Defs标签的作用就是为了复用，其实在软件开发过程中复用的思想是不可或缺的，在svg技术中也是如此。Defs和g标签是容器元素，但是在defs元素的子元素在解析的时候不会渲染，只有在use的时候才会渲染，所以这就是一次解析，到处渲染。

       3. Filter属性百分比

       在filter元素中的属性x、y、width、height最好用百分比，能够将计算路径效果的区域减少到最小，加快图形的显示速度。

       4. 减少透明度使用

       对于opacity透明度来说，使用透明度确实能够增加美观度，但是却牺牲了很大的性能，如果有可能的话尽量使用fill-opacity或者stroke-opacity这两个开销小些的属性。

       5. 重绘区域尽可能小

       读者可以自己写一个SVG的移动的DEMO，一个将重绘区域即移动的位移大一些，一个小一些，再来观察CPU的占用率，会发现重绘区域是非常消耗性能的，所以需要将重绘区域尽可能小。

       6. 减少色彩渐变和滤镜

       这两个效果也都是性能的消耗大户，需要尽量少使用。

       7. 减少stroke属性使用

       Stroke属性也是非常消耗性能，主要是内部计算的开销会比较大，所以如果能用fill的地方就不要用stroke属性。

       8. 另外一种就是从服务器端生成SVG发送到客户端

       这种方法主要目的就是让客户端的事情更加单一些，主要负责图形的渲染，从而降低性能开销。

 

       当然还有很多针对SVG本身的优化方案，需要进一步的去研究发现，到时候如果有还会继续分享出来，另外对JS的优化也是非常重要的一部分的，这对svg渲染消耗性能也是有帮助，望读者有时间可以去研究一下关于JS的优化。