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