图标插件性能对比报告

这是我在公司实习期间，要求做一份常用图标插件的报告，花了接近2周的工作日来做的。怎么办，感觉自己效率好低。

本作品采用知识共享署名-非商业性使用-相同方式共享 2.5 中国大陆许可协议进行许可。

一、简单介绍

1.HighCharts

官网：英文 中文

特点：

• 收费的、也有免费的
• 功能强大，图表类型比较多，可自定义的范围比较大
• 支持2D、3D
• 体积比较大
• 支持IE8或以下
• 245KB+232KB（3D）
• SVG格式的
• 支持原生JavaScript、JQuery

2.ECharts

官网：中文

特点：

• 开源，使用原生JavaScript
• 百度的，对中文的支持比较好，容易维护
• 体积相对小，支持模块化处理
• 支持模块化引入，可以根据需要扩展模块
• 不支持IE8或以下的
• Canvas格式

3.D3.js

官网：英文 中文教程

特点：

• 图表类型丰富、表现酷炫
• 使用SVG格式
• 仅支持现代浏览器，对IE9或以下版本支持不是很好
• 独立库
• 322KB
• 函数编程，不像其他插件那样直接用JavaScript对象，学习难度大
• 自定义的参数比较多
• 比较多人用

4.Chart.js

官网：中文

特点：

• 有中文文档
• 基于MIT开源，使用原生JavaScript
• 支持所有现代浏览器和大部分手机浏览器都支持canvas，IE8或以下，另外引js包
  

上面是我用了一周的时间做的，下面是我用另外一周做的，因为这个原因，第四个Chart.js变成了JsChart，我测试的时候一直在奇怪怎么有个这个垃圾的插件，而且还收费。

二、测试项目及结果

在本章节中，将从内存、兼容性以及移动端的使用体验三个方面，对以上四个插件进行测试。

1.内存

1.1 加载内存

测试内容：查看简单的图表，检测页面启动10秒内，内存消耗及运行情况。

测试环境：64位PC版Chrome 42。

（1） ECharts 

消耗内存：9.5MB

图1 ECharts 显示的图表

图2 ECharts内存消耗情况

（2） D3.js

消耗内存：3.8MB

图3 D3.js显示的柱状图

图4 D3.js内存消耗情况

（3） HighCharts

消耗内存：7.3MB

图5 HighCharts显示的柱状图

图6 HighCharts内存显示情况

（4） JSCharts

消耗内存：5.0MB

图7 JSCharts显示的图表

图8 JSCharts消耗内存的情况

本测试项目测评结果：

排名

名称

内存消耗

评分

1

D3.js

3.7MB

100

2

charts.js

5.0MB

74

3

HightCharts

7.3MB

50.68

4

ECharts

9.3MB

39.78

1.2长时间内存变化情况

测试内容：以15个柱状图为例，禁用动画效果，每50ms测试更新数据一次，1小时内查看内存的及CPU的变化情况。

每50ms刷新一次数据，数据是由随机数产生。

生成柱状图数据代码：        function setData() {            dataset.splice(0, dataset.length);//清理上次数据内存            for (var i = 0; i < 15; i++) {                dataset.push(Math.ceil(Math.random() * 200));            }//添加数据        }

测试环境：Windows 8.1下的IE 11和Chrome 42。

（1）ECharts

更新数据难易度：容易，直接调用API，插入数据即可
ECharts在更新数据时，表现卡顿，浏览器陷入卡顿状态。

图9 ECharts在IE11下的截图

图10 ECharts在Chrome下运行1小时后内存的情况

测试结果

浏览器

流畅度

开始时间

结束时间

开始内存

峰值内存

结束内存

内存损耗

IE11

比较流畅

15:15

16:15

39.4

68.8MB

58.4MB

 

Chrome

卡顿

14:35

15:35

-

 

-

13.9MB

（2）D3.js

更新数据难易度：比较难，需要自己编写API，调用自己编写的API插入数据。

图11 D3.js在IE11下的截图

图12 D3.js在Chrome下运行1小时后内存的情况

测试结果

浏览器

流畅度

开始时间

结束时间

开始内存

峰值内存

结束内存

内存损耗

IE11

流畅

14:12

15:12

47.6MB

78.8MB

60.8MB

-

Chrome

流畅

14:00

15:00

-

7.6MB

-

6.0MB

（3）HighCharts

更新数据难易度：容易，使用插件提供的API，按照格式插入数据即可。

图13 HighCharts在IE11下的截图

图14 HighCharts在Chrome下运行1小时后内存的情况

测试结果

浏览器

流畅度

开始时间

结束时间

开始内存

峰值内存

结束内存

内存损耗

IE11

流畅

16:16

17:16

35.6MB

80.9MB

80.8MB

-

Chrome

比较流畅

15:41

16:41

-

-

-

10.6MB

（4）JSCharts

更新数据难易度：简单，更换绑定数据即可。

使用IE11测试时，开始的时候非常流畅，使用6分钟后，IE开始不稳定，拖动IE延时非常明显。

图15 JSCharts在IE11下的截图

在使用Chrome测试时，最后几分钟，图表更新速度缓慢，几秒才更新一次。

图16 JSCharts在Chrome下运行1小时后内存的情况

测试结果

浏览器

流畅度

开始时间

结束时间

开始内存

峰值内存

结束内存

内存损耗

IE11

流畅变卡顿

17：17

18：17

55.8MB

168.7MB

162.8MB

-

Chrome

卡顿变停滞

16:29

17:29

-

-

-

9.5MB

本测试项目测评结果：

总体来说，除了charts.js之外，其他插件在测试期间的表现比较稳定，虽然内存都无一例外地升高。各个在程序切换过程中，会出现不同程度的延迟，但charts.js表现最为明显。

下面的成绩均取最优结果：

名称

ECharts

D3.js

HighCharts

charts.js

是否支持动态更新 (40%)

是

是

是

是

更新数据格式(5%)

XML、JSON、CSV

XML、JSON、CSV

JSON

JSON

更新数据难易度(15%)

容易

比较难

容易

简单

更新数据流畅度(20%)

比较流畅

流畅

流畅

卡顿

内存(MB)^*(20%)

13.9

6.0

10.6

9.5

分数

79.88

88.75

87.57

72.63

排名

3

1

2

4

* 内存指的是插件在Chrome下使用的内存

2.兼容性

测试内容：测试各个浏览器下的兼容性情况

测试环境：

浏览器

系统

IE8

基于Windows XP sp3

IE9

基于Windows Phone 7.8

IE11

基于Windows 8.1

Chrome 移动版

基于Android 4.4.2

（1） ECharts

表1 ECharts兼容性

浏览器

动画效果

显示情况

IE 8

无

正常

IE 9

有

正常

IE11

有

正常

Chrome 移动版

略有卡顿

正常

（2） D3.js

表2 D3.js兼容性

浏览器

动画效果

显示情况

IE 8

-

无显示

IE 9

有

正常

IE11

有

正常

Chrome 移动版

略有卡顿

正常

（3） HighCharts

表3 HightCharts兼容性

浏览器

动画效果

显示情况

IE 8

无

正常

IE 9

有

正常

IE11

有

正常

Chrome 移动版

略有卡顿

正常

（4） JSCharts

表4 JSCharts兼容性

浏览器

动画效果

显示情况

IE 8

略有卡顿

正常

IE 9

-

无显示

IE11

有

正常

Chrome 移动版

有

模糊

本测试项目测评结果：

排名

名称

兼容性

评分

1

ECharts

在各个浏览器上均能正常显示，但在IE8中没有动画效果，在移动版中动画略显卡顿

91.75

1

HighCharts

在各个浏览器上均能正常显示，但在IE8中没有动画效果，在移动版中动画略显卡顿

91.75

3

D3.js

除了在IE8中无法显示之外，移动版中动画略显卡顿，在其他版本均能正常显示

67

4

charts.js

在IE9中无法正常显示，在移动版中显示模糊

62.75

3.移动端

测试内容：使用图表插件官网上的图表示例，查看包括手机及平板下的使用效果
测试环境：Chrome模拟器下的iPhone 6、Windows Phone 7.8、三星平板

（1） ECharts

图17 Echarts在平板下的浏览效果

在平板浏览中，除了显示动画效果中有点卡顿之外，在使用中还是比较流畅的。在旋转屏幕时，图表还会根据屏幕大小发生变化。点击元素时，还会显示该元素代表的数据，整体感觉还是不错。在浏览期间，浏览器的内存在80~90MB之间。
在手机浏览中，显示动画同样出现卡顿现象，但感觉比平板使用更加流畅。但是，在放大图标时，出现锯齿现象，在较小屏幕中，有些元素没有显示完整。

表5 ECharts移动设备使用情况

设备

平板

手机

动画

卡顿

卡顿

流畅度

比较流畅

流畅

视觉体验

华丽

华丽

屏幕旋转

大小自适应

屏幕小时，显示不完整

点击元素

显示元素数据

显示元素数据

内存使用情况（MB）

80~90

-

缩放

正常显示

出现锯齿

（2） D3.js

图18 D3.js在平板下的浏览效果

在手机浏览中，D3.js的加载时间略长，甚至浏览器直接闪退。但，图表显示后，显示还是流畅的。放大也没有锯齿。

表6 D3.js移动设备使用情况

设备

平板

手机

动画

比较流畅

加载时间长

流畅度

比较流畅

流畅

视觉体验

朴素

朴素

屏幕旋转

大小自适应

大小自适应

点击元素

显示元素数据

显示元素数据

内存使用情况（MB）

155~165

-

缩放

正常显示

正常显示

（3） HighCharts

图19 HighCharts在平板下的浏览效果

在平板使用中，加载速度还是比较快的，但动画及使用中，还是比较卡顿且不自然。虽然如此，但在使用过程中，内存在60~75MB之间浮动。缩放显示效果正常。
在手机使用中，加载速度比较快，动画略显卡顿，使用过程比较流畅，缩放功能及旋转屏幕均能正常显示。

表7 HighCharts移动设备使用情况

设备

平板

手机

动画

比较卡顿且不自然

卡顿

流畅度

比较卡顿

流畅

视觉体验

华丽

华丽

屏幕旋转

大小自适应

大小自适应

点击元素

显示元素数据

显示元素数据

内存使用情况（MB）

60~75

-

缩放

正常显示

正常显示

（4） JSCharts

图20 JSCharts在平板下的浏览效果

在平板使用中，加载及动画比较快，使用过程中非常流畅，没有停滞的感觉。但是功能比较少，点击元素没有显示元素数据，放大图表时有明显锯齿显示。使用工程中，内存在30~35MB之间浮动。

在手机使用中，使用体验与平板类似，比较视觉效果比较粗糙，功能也相对简单。

表8 JSCharts移动设备使用情况

设备

平板

手机

动画

流畅

流畅

流畅度

流畅

流畅

视觉体验

粗糙

粗糙

屏幕旋转

大小自适应

大小自适应

点击元素

无效果

无效果

内存使用情况（MB）

30~35

-

缩放

出现锯齿

出现锯齿

本测试项目测评结果：

在这个测试项目中，比较难给出结果，因为每一款插件都或多或少地出现了功能及性能上的不足。因此，在这个项目中，将功能的权重放高一点，以点击元素（20%）、缩放（18%）、屏幕旋转（16%）、流畅度（14%）、动画（12%）、内存使用（11%）、视觉体验（9%）给出比分，并以流畅（100%）、比较流畅（50%）、卡顿（0），给出最终结果：

排名

名称

平板评分

手机评分

平均评分

1

HighCharts

71.25

77

74.13

2

D3.js

71.5

72.5

72

3

ECharts

76.42

43

59.71

4

charts.js

53

42

47.5

三、综合评分

排名

名称

内存测试1（15%）

内存测试2(15%)

兼容性（30%）

移动设备使用情况（30%）

加权平均分

1

HighCharts

50.68

87.57

91.75

74.13

70.50

2

D3.js

100

88.75

67

72

70.01

3

Echart

39.78

79.88

91.75

59.71

63.39

4

charts

74

72.63

62.75

47.5

55.07

四、参考资料

JavaScript图形库的流行度调查：http://www.ourd3js.com/wordpress/?p=831

感谢 浩哥 给我提供测试内存的方法。