记录一次EasyUI 的treegrid优化实践
背景
- 数据量,三百多行,根据上下级关系构造成树形结构
- easyui版本,1.3.6
- 浏览器,firefox
问题描述
- 数据加载时页面会卡顿三到四秒
- 默认折叠所有节点,所有会有展开节点的操作,展开时页面也会卡住二到三秒
问题分析
先说数据量,三四百行的数据对于表格来说应该不算多,其他也有页面使用了这么多的数据也没见有这么卡
浏览器性能?在火狐和chrome上都试了,会卡顿,体验非常不好,这两个浏览器已经是运行速度最快的了,要是换了IE还不知卡到什么时候呢
网络性能?局域网,传送这点数据不算什么,可以排除了
性能测试工具
既然从代码和数据本身看不出什么问题,那只好使用性能测试工具来分析了
针对数据加载的时候进行性能记录
从性能记录中可以看出几个结果
- treegrid的大部分时间花在了loadData这个方法上(还是挺努力的哈)
- loadData的过程中有两个方法占据了大部分时间
- fixRowHeight
- autoSizeColumn
根据测试结果分析,treegrid加载数据之所以比较慢,大部分原因就在这两个方法上,我们应该从此处着手。从方法名看,一个是计算高度的,另一个是计算列宽的。
经过查询技术手册,发现手册上有两个属性和这两个方法有关系:
fitColumns和autoRowHeight,这两个属性如果设置为false,可以显著提高性能,看来就是它们了。将这两个属性设置为false,再运行发现页面速度有了明显提升,只是样式上会有问题,列宽和行高都需要手动计算指定一个明确值提供给treegrid使用。
列宽的设置方法:在定义columns的数组时,其中有width这个属性,在fitColumns为false时,treegrid会直接使用columns中的这个数值作为列宽(像素为单位),所以需要手动计算一个列宽值赋给每个列
行高的定义方法:在定义treegrid属性时,使用rowStyler方法,返回一个固定的高度值,例如
function(){return "height:31px";}
;另外还需要对于表格的某一层div元素定义height:auto,两个配合起来行内元素才能正常显示。
div.datagrid-cell{
height:auto;
}
至此,页面优化基本完成,速度比以前提高了许多,加载数据和展开节点的时候不再有明显的长时间卡顿。