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 表格元件。

 

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

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