JavaScript表格组件加载速度测试

网络技术一直在发展并提高，人们期望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 编译： 伯乐在线 – 黄利民

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

 

相关文章

• Web开发人员应有的15本免费电子书
• 聂微东：我的Web前端之路
• 10款最好用的移动web开发工具
• 6本值得一读的JavaScript英文电子书
• Google研发先进编程技术 简化Web应用开发
• JavaScript是一门令人愉悦的语言
• Web开发必备的20个速记卡
• 推荐给JavaScript开发人员的10个工具
• Web开发：我希望得到的编程学习路线图
• 如何选择优秀的Web开发工具/IDE？