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 編譯：伯樂在線 – 黃利民