JavaScript表格组件加载速度测试

标签： IT技术 程序员 Javascript Web开发 | 发表时间：2012-04-07 14:07 | 作者：黄利民

出处：http://blog.jobbole.com

网络技术一直在发展并提高，人们期望Web应用程序能提高桌面程序那样的性能和用户体验。而数据表格又是企业级Web应用最为重要的部分，我们已经用了大量的数据（行数和列数）来测试流行的 JavaScript 表格的页面加载速度。

我们测试了四种表格组件：

● Dojo grid

● jqGrid

● Ext JS grid

● dhtmlxGrid

在我们的测试中，我们针对每种表格组件创建了一个示例，在页面中用不同的行数和列数初始化表格。如果你想完全确保测试结果客观，可自行查看加载速度（示例下载链接）。

一、表格行数测试

首先，针对每种表格，我们均建立了一个示例，均有 10列和不同的行数（从1oo行到10000行）。在 IE9 浏览器和最新的Chrome中测试。下表展示了表格初始化所用时间。

在 IE9 浏览器中的结果：

	Dojo	jqGrid	Ext JS	dhtmlxGrid
100 行	308 ms	60 ms	265 ms	51 ms
500 行	312 ms	61 ms	282 ms	58 ms
1,000 行	324 ms	63 ms	305 ms	61 ms
5,000 行	368 ms	94 ms	512 ms	65 ms
10,000 行	469 ms	143 ms	702 ms	67 ms

Grid Loading Speed – Large Number of Rows

Chrome 中的结果：

	Dojo	jqGrid	Ext JS	dhtmlxGrid
100 行	171 ms	43 ms	91 ms	25 ms
500 行	174 ms	54 ms	102 ms	26 ms
1,000 行	178 ms	55 ms	135 ms	27 ms
5,000 行	193 ms	88 ms	317 ms	29 ms
10,000 行	226 ms	143 ms	654 ms	32 ms

Grid Loading Speed – Large Number of Rows

根据测试， dhtmlxGrid 的加载时间最短，页面加载速度快于其他表格组件。随着行数的增加，各组件之间的差别越发明显。

二、表格列数测试

虽然列数测试场景不常见，但我们还是用不同数量的数目进行了测试。下面的图表显示了各表格组件在不同列数时的初始化时间。

IE9 浏览器中的结果:

	Dojo	jqGrid	Ext JS	dhtmlxGrid
10 列	325 ms	69 ms	301 ms	60 ms
50 列	734 ms	139 ms	1,316 ms	172 ms
100 列	1,226 ms	281 ms	2,702 ms	298 ms
1,000 列	12,379 ms	2,858 ms	failed ms	5,692 ms

Grid Loading Speed – Large Number of Columns

Chrome 中的结果：

	Dojo	jqGrid	Ext JS	dhtmlxGrid
10 列	171 ms	45 ms	142 ms	28 ms
50 列	519 ms	152 ms	589 ms	62 ms
100 列	1,004 ms	267 ms	1,237 ms	102 ms
1,000 列	8,712 ms	4,331 ms	failed ms	1,176 ms

Grid Loading Speed – Large Number of Columns

并不是所有的表格组件都禁得住 1000列的测试，Ext JS 就没扛住。

尽管 jqGrid 在 IE9 更快，但 dhtmlxGrid 在 Chrome 中完胜。所以我们可以说，dhtmlxGrid 是最快的 JavaScript 表格组件。

英文原文： dhtmlx 编译：伯乐在线 – 黄利民

【如需转载，请标注并保留原文链接、译文链接和译者等信息，谢谢合作！】