jQuery EasyUI Datagrid性能优化专题(转)

jQuery  EasyUI的Datagrid组件功能算是很强大了，不过性能确实不怎么乐观，而对于性能问题，网络上几乎也找不到相关的优化资料，所谓的牛人们可能 都望而却步了。本博客之后会带着分析Datagrid组件的性能问题，而且给出优化方案，也但愿你们能集思广益，给出一些好的想法。

慢在哪些方面

以目前对Datagrid的了解程度去看待性能问题，主要有如下几点：

• 加载大数据量时比较慢(不考虑服务端返回数据的时间)，这点尤为体如今IE浏览器里面；
• 大数据量时，加载后，操做很不流畅，勾选慢，singleSelect为true的话点选也比较慢，IE浏览器也是尤为突出；
• 数据量通常，可是字段特别多的话，加载和操做也比较慢，固然了，这种状况比较少见；
• 可编辑表格的性能则是更为糟糕，数据量达到几十条的时候，操做就会至关不流畅，IE依旧很突出

大数据量的加载

缘由分析

不考虑服务端返回数据的时间，在前台获取到大数据量后，往表格里插入tr的时候，IE执行的效率很是低，2000条数据要45秒左右，其余浏览器则很快。

经过单步调试发现，默认视图在最后将tr写到table里面用的是jQuery的html()函数，就是这个函数在IE下执行效率很是低。

解决方案一：返璞归真

jQuery是个很锋利的工具，可有时候咱们也得返璞归真一下，为何非要用jQuery的html()函数呢，咱们就用javascript dom对象里面的innerHtml属性不就能够了么，并且换成innerHTML属性方式的话，效率提升几十倍。

因此，大数据量加载慢的问题，就这么简单就解决了，修改默认视图render方法最后那句：

//1.3.3版本是这样的，其它版本也是这句代码
$(_1e0).html(_1e4.join(""));

改成：

$(_1e0)[0].innerHTML = _1e4.join("");

注意：innerHTML虽然符合w3c标准，并且各个浏览器也都支持，可是表现出的行为却又差别，另类的浏览器依旧是IE，主要表如今如下几个方面：

• IE6,IE7,IE8浏览器设置innerHTML属性会忽略html5属性和标签，搜索关键词"innerHTML IE html5"；
• IE几乎全部版本设置innerHTML属性时都会把href,src属性自动转化为绝对路径，搜索关键词"innerHTML IE href"；
• IE几乎全部版本的table相关标签的innerHTML属性是只读的(td除外),搜索关键词"innerHTML IE table；

幸运的是EasyUI的datagrid默认视图没有使用html5技术，调用innerHTML的节点也并不是table节点(是div)，而href,src等转化为绝对路径并无什么影响。

解决方案二：使用scroll视图

VirtualScrollView视图官网已经写出来了，不过有两个Bug而已，我对这个视图的源码也分析过，请你们参照：

http://www.easyui.info/archives/1404.html

勾选和点选

缘由分析

勾选和点选(开启singleSelect)慢的缘由实际上是同样的，都是选择器执行效率低，这里我拿勾选的状况来分析。

具体的分析过程我就不描述了，知道用chrome,fireBug,IE开发者工具调试的同窗，应该都有定位问题的思路：先定位执行效率低的函数，再在函数内定位执行效率低的语句。

checkbox致使操做不流畅的缘由，我最后定位到opts.finder.getTr这个方法上，咱们来看它的代码片断：

if (type == "checked") {
    return (_21d == 1 ? dc.body1 : dc.body2).find(">table>tbody>tr.datagrid-row:has(div.datagrid-cell-check input:checked)");
}

这段代码是获取已经被勾选的rows，你们能够看到，这是纯粹的jQuery选择器查询，效率就慢在has这个伪选择器上,它是针对全部后代元素的，查找的效率是比较慢的，又是在这么多数据量的状况下，其效果就可想而知了。

优化方案一：选择器优化

其实对于checkbox列的DOM结构是固定的，咱们彻底能够用速度快的选择器来代替":has"，咱们先直接用路径选择器找到"input:checked"，而后使用三次parent()函数返回tr，写法虽然复杂了，可是效率应该提升一点，因此咱们改为这样：

if (type == "checked") {
    return (_21d == 1 ? dc.body1 : dc.body2).find(">table>tbody>tr.datagrid-row>td>div.datagrid-cell-check>input:checked").parent().parent().parent();
}

我用本身的服务大概测试了修改先后的效率(jQuery版本1.8.0，EasyUI版本1.3.3,singleSelect为false,2000条数据勾选一条记录的测试状况)：

	浏览器	执行时间	浏览器	执行时间
原版	IE9	600ms	chrome	60ms
选择器优化	IE9	560ms	chrome	60ms

从上面的结果能够看出，在这种测试条件下，咱们提升的效率并不大，IE9下提升的效率尽管有所提升，可是仍是很不理想，而chrome下性能基本一 样。测试过程当中发现，若是使用jQuery2.0的话，IE9下的执行时间将达到45000ms，几乎让人奔溃，看来尽管IE9勉强支持 jQuery2.x，可是效率很挫。

优化方案二：实时记录优化法

既然慢在DOM结构巨大时，jQuery选择器的搜索效率不是很好(特别是在IE下)。若是咱们每次操做都记录下勾选的tr，那么就彻底能够绕开选择器。

具体该怎么作呢，咱们给$.data(target,'datagrid')变量增长两个属性："checkedTrsBody1" 和"checkedTrsBody2"分别存储frozen部分和normal部分被勾选tr的引用，而后在各个设计到勾选的操做中维护这两个属性。最 后，获取被勾选tr的时候就能够直接从这两个属性中取了，其耗时是能够忽略的。

那么究竟哪些操做会影响到被勾选的tr呢，咱们罗列一下，也就如下几 种："checkRow","uncheckRow","uncheckAll","checkAll","deleteRow","loadData","load","reload". 咱们只要在这些接口中维护起"checkedTrsBody1"和"checkedTrsBody2"属性姐能够了。

至于具体的代码怎么改，我就不贴了，最好就直接改动源码了，思路很清晰，请各位本身去实现，是在理不出头绪的，请参照个人实现：

http://www.easyui.info/version/jquery-easyui-1.3.3/plugins/jquery.datagrid.js

数据报表统计

如下是一些测试报表，测试环境请看报表标题(Y轴为耗时，单位毫秒；X轴为数据量)：

勾选性能测试【IE9;jQuery-1.8.0;EasyUI-1.3.3;singleSelect:false】优化执行时间(ms)原版执行时间(ms)200条500条1000条2000条4000条6000条8000条10000条-1k0k1k2k3k4kHighcharts.com

能够看出来，不管是在IE9下，勾选效率都提升了不少倍(chrome下效率也有显著提升)。对于开启singleSelect的优化思路是同样的，因此不写重复文字了。

渲染性能测试【IE9;不考虑服务器响应时间】优化渲染时间(ms)原版渲染时间(ms)200条500条1000条2000条4000条6000条8000条10000条-50k0k50k100k150k200k250kHighcharts.com

对于原版的datagrig，我本地的测试环境数据在4000条以上时，IE9基本就卡死了(可能机器性能不太好)，无统计价值了，即使是4000条数据，也要将近2分钟才渲染完，显然没人可以忍受。

从报表很明显能够看出优化过的表格，即使是10000条数据，3秒也就渲染完成了。

优化演示

未优化版本：http://www.easyui.info/version/jquery-easyui-1.3.3/demo/datagrid/bigdata_checkbox.html

优化版本：http://www.easyui.info/version/jquery-easyui-1.3.3/demo/datagrid/bigdata_checkbox_optimized.html