记录一次EasyUI 的treegrid优化实践

背景

• 数据量，三百多行，根据上下级关系构造成树形结构
• easyui版本，1.3.6
• 浏览器，firefox

问题描述

1. 数据加载时页面会卡顿三到四秒
2. 默认折叠所有节点，所有会有展开节点的操作，展开时页面也会卡住二到三秒

问题分析

先说数据量，三四百行的数据对于表格来说应该不算多，其他也有页面使用了这么多的数据也没见有这么卡
浏览器性能？在火狐和chrome上都试了，会卡顿，体验非常不好，这两个浏览器已经是运行速度最快的了，要是换了IE还不知卡到什么时候呢
网络性能？局域网，传送这点数据不算什么，可以排除了

性能测试工具

既然从代码和数据本身看不出什么问题，那只好使用性能测试工具来分析了

针对数据加载的时候进行性能记录

从性能记录中可以看出几个结果

• treegrid的大部分时间花在了loadData这个方法上（还是挺努力的哈）
• loadData的过程中有两个方法占据了大部分时间
  
  1. fixRowHeight
  2. 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;}

至此，页面优化基本完成，速度比以前提高了许多，加载数据和展开节点的时候不再有明显的长时间卡顿。