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