图标插件性能对比报告

这是我在公司实习期间，要求做一份常用图标插件的报告，花了接近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
感谢 浩哥 给我提供测试内存的方法。