JavaScript表格组件加载速度测试
openkk 12年前
<div id="news_body"> <p> 网络技术一直在发展并提高，人们期望 Web 应用程序能提高桌面程序那样的性能和用户体验。而数据表格又是企业级 Web 应用最为重要的部分，我们已经用了大量的数据（行数和列数）来测试流行的 JavaScript 表格的页面加载速度。</p> <p> 我们测试了四种表格组件：</p> <p> ● <a href="/misc/goto?guid=4958184332439761468" rel="nofollow" target="_blank">Dojo grid</a></p> <p> ● <a href="/misc/goto?guid=4958191748216560055" rel="nofollow" target="_blank">jqGrid</a></p> <p> ● <a href="/misc/goto?guid=4958335876698855127" rel="nofollow" target="_blank">Ext JS grid</a></p> <p> ● <a href="/misc/goto?guid=4958335877494218959" rel="nofollow" target="_blank">dhtmlxGrid</a></p> <p> 在我们的测试中，我们针对每种表格组件创建了一个示例，在页面中用不同的行数和列数初始化表格。如果你想完全确保测试结果客观，可自行查看加载速度（<a href="/misc/goto?guid=4958335878285664063" rel="nofollow" target="_blank">示例下载链接</a>）。</p> <p> <strong>一、表格行数测试</strong></p> <p> 首先，针对每种表格，我们均建立了一个示例，均有 10 列和不同的行数（从 1oo 行到 10000 行）。在 IE9 <a title="浏览器" href="/misc/goto?guid=4958330453578757110" target="_blank">浏览器</a>和最新的 Chrome 中测试。下表展示了表格初始化所用时间。</p> <p> <strong>在 IE9 浏览器中的结果：</strong></p> <table class="ke-zeroborder" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td bgcolor="#d7dadd"> <table style="width:606px;" class="ke-zeroborder" border="0" cellspacing="1" cellpadding="4"> <tbody> <tr> <td bgcolor="#f4f6fa" width="20%"> </td> <td bgcolor="#f4f6fa" width="20%"><strong>Dojo</strong></td> <td bgcolor="#f4f6fa" width="20%"><strong>jqGrid</strong></td> <td bgcolor="#f4f6fa" width="20%"><strong>Ext JS</strong></td> <td bgcolor="#f4f6fa" width="20%"><strong>dhtmlxGrid</strong></td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">100 行</td> <td bgcolor="#f4f6fa" width="20%">308 ms</td> <td bgcolor="#f4f6fa" width="20%">60 ms</td> <td bgcolor="#f4f6fa" width="20%">265 ms</td> <td bgcolor="#f4f6fa" width="20%">51 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">500 行</td> <td bgcolor="#f4f6fa" width="20%">312 ms</td> <td bgcolor="#f4f6fa" width="20%">61 ms</td> <td bgcolor="#f4f6fa" width="20%">282 ms</td> <td bgcolor="#f4f6fa" width="20%">58 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">1,000 行</td> <td bgcolor="#f4f6fa" width="20%">324 ms</td> <td bgcolor="#f4f6fa" width="20%">63 ms</td> <td bgcolor="#f4f6fa" width="20%">305 ms</td> <td bgcolor="#f4f6fa" width="20%">61 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">5,000 行</td> <td bgcolor="#f4f6fa" width="20%">368 ms</td> <td bgcolor="#f4f6fa" width="20%">94 ms</td> <td bgcolor="#f4f6fa" width="20%">512 ms</td> <td bgcolor="#f4f6fa" width="20%">65 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">10,000 行</td> <td bgcolor="#f4f6fa" width="20%">469 ms</td> <td bgcolor="#f4f6fa" width="20%">143 ms</td> <td bgcolor="#f4f6fa" width="20%">702 ms</td> <td bgcolor="#f4f6fa" width="20%">67 ms</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p style="text-align:center;"><a title="Grid Loading Speed - Large Number of Rows in IE9" rel="lightbox[16754]"><img style="width:554px;height:295px;" title="Grid Loading Speed - Large Number of Rows in IE9" alt="JavaScript表格组件加载速度测试" src="https://simg.open-open.com/show/6177451afd9d3c264c42cb0b8b89330e.jpg" /></a></p> <p style="text-align:center;"> Grid Loading Speed – Large Number of Rows</p> <p> <strong>Chrome 中的结果</strong>：</p> <table class="ke-zeroborder" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td bgcolor="#d7dadd"> <table style="width:606px;" class="ke-zeroborder" border="0" cellspacing="1" cellpadding="4"> <tbody> <tr> <td bgcolor="#f4f6fa" width="20%"> </td> <td bgcolor="#f4f6fa" width="20%"><strong>Dojo</strong></td> <td bgcolor="#f4f6fa" width="20%"><strong>jqGrid</strong></td> <td bgcolor="#f4f6fa" width="20%"><strong>Ext JS</strong></td> <td bgcolor="#f4f6fa" width="20%"><strong>dhtmlxGrid</strong></td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">100 行</td> <td bgcolor="#f4f6fa" width="20%">171 ms</td> <td bgcolor="#f4f6fa" width="20%">43 ms</td> <td bgcolor="#f4f6fa" width="20%">91 ms</td> <td bgcolor="#f4f6fa" width="20%">25 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">500 行</td> <td bgcolor="#f4f6fa" width="20%">174 ms</td> <td bgcolor="#f4f6fa" width="20%">54 ms</td> <td bgcolor="#f4f6fa" width="20%">102 ms</td> <td bgcolor="#f4f6fa" width="20%">26 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">1,000 行</td> <td bgcolor="#f4f6fa" width="20%">178 ms</td> <td bgcolor="#f4f6fa" width="20%">55 ms</td> <td bgcolor="#f4f6fa" width="20%">135 ms</td> <td bgcolor="#f4f6fa" width="20%">27 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">5,000 行</td> <td bgcolor="#f4f6fa" width="20%">193 ms</td> <td bgcolor="#f4f6fa" width="20%">88 ms</td> <td bgcolor="#f4f6fa" width="20%">317 ms</td> <td bgcolor="#f4f6fa" width="20%">29 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">10,000 行</td> <td bgcolor="#f4f6fa" width="20%">226 ms</td> <td bgcolor="#f4f6fa" width="20%">143 ms</td> <td bgcolor="#f4f6fa" width="20%">654 ms</td> <td bgcolor="#f4f6fa" width="20%">32 ms</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p style="text-align:center;"><a title="Grid Loading Speed - Large Number of Rows in Chrome" rel="lightbox[16754]"><img style="width:509px;height:271px;" title="Grid Loading Speed - Large Number of Rows in Chrome" alt="JavaScript表格组件加载速度测试" src="https://simg.open-open.com/show/9298782fb50ad9c5fbf4816a4b559a03.jpg" /></a></p> <p style="text-align:center;"> Grid Loading Speed – Large Number of Rows</p> <p> 根据测试，<strong>dhtmlxGrid</strong> 的加载时间最短，页面加载速度快于其他表格组件。随着行数的增加，各组件之间的差别越发明显。</p> <p> <strong>二、表格列数测试</strong></p> <p> 虽然列数测试场景不常见，但我们还是用不同数量的数目进行了测试。下面的图表显示了各表格组件在不同列数时的初始化时间。</p> <p> <strong>IE9 浏览器中的结果</strong>:</p> <table class="ke-zeroborder" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td bgcolor="#d7dadd"> <table style="width:606px;" class="ke-zeroborder" border="0" cellspacing="1" cellpadding="4"> <tbody> <tr> <td bgcolor="#f4f6fa" width="20%"> </td> <td bgcolor="#f4f6fa" width="20%"><strong>Dojo</strong></td> <td bgcolor="#f4f6fa" width="20%"><strong>jqGrid</strong></td> <td bgcolor="#f4f6fa" width="20%"><strong>Ext JS</strong></td> <td bgcolor="#f4f6fa" width="20%"><strong>dhtmlxGrid</strong></td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">10 列</td> <td bgcolor="#f4f6fa" width="20%">325 ms</td> <td bgcolor="#f4f6fa" width="20%">69 ms</td> <td bgcolor="#f4f6fa" width="20%">301 ms</td> <td bgcolor="#f4f6fa" width="20%">60 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">50 列</td> <td bgcolor="#f4f6fa" width="20%">734 ms</td> <td bgcolor="#f4f6fa" width="20%">139 ms</td> <td bgcolor="#f4f6fa" width="20%">1,316 ms</td> <td bgcolor="#f4f6fa" width="20%">172 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">100 列</td> <td bgcolor="#f4f6fa" width="20%">1,226 ms</td> <td bgcolor="#f4f6fa" width="20%">281 ms</td> <td bgcolor="#f4f6fa" width="20%">2,702 ms</td> <td bgcolor="#f4f6fa" width="20%">298 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">1,000 列</td> <td bgcolor="#f4f6fa" width="20%">12,379 ms</td> <td bgcolor="#f4f6fa" width="20%">2,858 ms</td> <td bgcolor="#f4f6fa" width="20%">failed ms</td> <td bgcolor="#f4f6fa" width="20%">5,692 ms</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p style="text-align:center;"><a title="Grid Loading Speed - Large Number of Columns in IE9" rel="lightbox[16754]"><img style="width:552px;height:294px;" title="Grid Loading Speed - Large Number of Columns in IE9" alt="JavaScript表格组件加载速度测试" src="https://simg.open-open.com/show/232b70708a14f5143d70f49750fb29ad.jpg" /></a></p> <p style="text-align:center;">Grid Loading Speed – Large Number of Columns</p> <p> <strong>Chrome 中的结果：</strong></p> <table class="ke-zeroborder" border="0" cellspacing="0" cellpadding="0" align="center"> <tbody> <tr> <td bgcolor="#d7dadd"> <table style="width:606px;" class="ke-zeroborder" border="0" cellspacing="1" cellpadding="4"> <tbody> <tr> <td bgcolor="#f4f6fa" width="20%"> </td> <td bgcolor="#f4f6fa" width="20%"><strong>Dojo</strong></td> <td bgcolor="#f4f6fa" width="20%"><strong>jqGrid</strong></td> <td bgcolor="#f4f6fa" width="20%"><strong>Ext JS</strong></td> <td bgcolor="#f4f6fa" width="20%"><strong>dhtmlxGrid</strong></td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">10 列</td> <td bgcolor="#f4f6fa" width="20%">171 ms</td> <td bgcolor="#f4f6fa" width="20%">45 ms</td> <td bgcolor="#f4f6fa" width="20%">142 ms</td> <td bgcolor="#f4f6fa" width="20%">28 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">50 列</td> <td bgcolor="#f4f6fa" width="20%">519 ms</td> <td bgcolor="#f4f6fa" width="20%">152 ms</td> <td bgcolor="#f4f6fa" width="20%">589 ms</td> <td bgcolor="#f4f6fa" width="20%">62 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">100 列</td> <td bgcolor="#f4f6fa" width="20%">1,004 ms</td> <td bgcolor="#f4f6fa" width="20%">267 ms</td> <td bgcolor="#f4f6fa" width="20%">1,237 ms</td> <td bgcolor="#f4f6fa" width="20%">102 ms</td> </tr> <tr> <td bgcolor="#f4f6fa" width="20%">1,000 列</td> <td bgcolor="#f4f6fa" width="20%">8,712 ms</td> <td bgcolor="#f4f6fa" width="20%">4,331 ms</td> <td bgcolor="#f4f6fa" width="20%">failed ms</td> <td bgcolor="#f4f6fa" width="20%">1,176 ms</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p style="text-align:center;"><a title="Grid Loading Speed - Large Number of Columns in Chrome" rel="lightbox[16754]"><img style="width:546px;height:291px;" title="Grid Loading Speed - Large Number of Columns in Chrome" alt="JavaScript表格组件加载速度测试" src="https://simg.open-open.com/show/b599d4e62e81d48b514d56f55936d630.jpg" /></a></p> <p> Grid Loading Speed – Large Number of Columns</p> <p> 并不是所有的表格组件都禁得住 1000 列的测试，Ext JS 就没扛住。</p> <p> 尽管 <strong>jqGrid </strong>在 IE9 更快，但 <strong>dhtmlxGrid </strong>在 Chrome 中完胜。所以我们可以说，dhtmlxGrid 是最快的 JavaScript 表格组件。</p> <p> 英文原文：<a href="/misc/goto?guid=4958335879804326142" target="_blank">dhtmlx</a> 编译：<a href="/misc/goto?guid=4958185140659301754" target="_blank">伯乐</a>在线 – <a href="/misc/goto?guid=4958335881321495056" target="_blank">黄利民</a></p> </div>