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

    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

  根据测试，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

  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

  并不是所有的表格组件都禁得住 1000列的测试，Ext JS 就没扛住。 尽管 jqGrid 在 IE9 更快，但 dhtmlxGrid 在 Chrome 中完胜。所以我们可以说，dhtmlxGrid 是最快的 JavaScript 表格组件。 原文链接：http://blog.jobbole.com/16754/