JavaScript表格元件載入速度測試

黃利民發表於2012-04-07

網路技術一直在發展並提高,人們期望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 in IE9

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 in Chrome

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 in IE9

 

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 in Chrome

Grid Loading Speed – Large Number of Columns

 

並不是所有的表格元件都禁得住 1000列的測試,Ext JS 就沒扛住。

儘管 jqGrid 在 IE9 更快,但 dhtmlxGrid 在 Chrome 中完勝。所以我們可以說,dhtmlxGrid 是最快的 JavaScript 表格元件。

 

英文原文:dhtmlx 編譯:伯樂線上 – 黃利民

【如需轉載,請標註並保留原文連結、譯文連結和譯者等資訊,謝謝合作!】

 

相關文章