網(wǎng)絡技術一直在發(fā)展并提高，人們期望Web應用程序能提高桌面程序那樣的性能和用戶體驗。而數(shù)據(jù)表格又是企業(yè)級Web應用最為重要的部分，我們已經(jīng)用了大量的數(shù)據(jù)（行數(shù)和列數(shù)）來測試流行的 JavaScript 表格的頁面加載速度。
網(wǎng)絡技術一直在發(fā)展并提高，人們期望Web應用程序能提高桌面程序那樣的性能和用戶體驗。而數(shù)據(jù)表格又是企業(yè)級Web應用最為重要的部分，我們已經(jīng)用了大量的數(shù)據(jù)（行數(shù)和列數(shù)）來測試流行的 JavaScript 表格的頁面加載速度。
我們測試了四種表格組件：
● Dojo grid
● jqGrid
● Ext JS grid
● dhtmlxGrid
在我們的測試中，我們針對每種表格組件創(chuàng)建了一個示例，在頁面中用不同的行數(shù)和列數(shù)初始化表格。如果你想完全確保測試結果客觀，可自行查看加載速度（示例下載鏈接）。
一、表格行數(shù)測試
首先，針對每種表格，我們均建立了一個示例，均有 10列和不同的行數(shù)（從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
根據(jù)測試，dhtmlxGrid 的加載時間最短，頁面加載速度快于其他表格組件。隨著行數(shù)的增加，各組件之間的差別越發(fā)明顯。
二、表格列數(shù)測試
雖然列數(shù)測試場景不常見，但我們還是用不同數(shù)量的數(shù)目進行了測試。下面的圖表顯示了各表格組件在不同列數(shù)時的初始化時間。
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
原文鏈接：http://blog.jobbole.com/16754/
【編輯推薦】
- JavaScript是一門令人愉悅的語言
- 5種JavaScript調用函數(shù)的方法
- 10件有關JavaScript讓人費解的事情
- 推薦給JavaScript開發(fā)人員的10個工具
- 是時候開始使用JavaScript嚴格模式了
