在做一个需求管理的页面时，需求的展现是不限层级树型结构，需求下还可以分拆任务，页面要展现的字段有20多个，而且需求采用通用表单设计，db采用大宽表存储，有一百多个字段。目前数据量不大，第一版采用普通的同步加载数据方式，页面加载速度慢，慢的原因主要是代码逻辑没有做到最优，不如存在重复查询的问题，组织树型结构的时候也存在冗余的查询。加上页面渲染出全部数据，使得整个页面打开速度很慢。
针对以上问题，同事做了第二版优化，主要采用ajax加载页面，滚动条采用代码控制，拖动滚动条的位置计算要显示的数据，然后从数据库取出相应的数据。第二版主要存在问题是每次滚动鼠标都会发起请求加载数据，并且每次请求的数据都会覆盖已经加载的数据，在加载过程中使用遮罩禁止重复滚动加载数据。以上问题使得用户体验很差，所以我临时接手进行了第二次优化。
思路：
1.针对每个项目的需求和任务，在第一次访问的时候，将当前访问的项目的全部需求和任务树型结构组织好并缓存起来，缓存过期时间控制在2-4小时（依数据量和内存大小灵活设置），注意采用indexMap.put(i++, row);的形式，这样方便后期分屏加载。row的定义为Map<String, Object> row ;//Object可存需求和任务，通过key区分。
2.获取查询条件，如果为空，则从数据库取最后一次保存的查询条件，否则保存最新查询条件。
3.通过遍历indexMap，统计满足条件的需求和任务数量。
4.返回框架页面，并发送ajax请求真实数据。
5.对请求分页处理，分页大小控制在一次请求50条，太大页面渲染时间慢，太小又需较多次加载。遍历indexMap，取出满足分页条件和查询条件的数据，返回给客户端。
6.页面滚动到末尾，自动发起ajax加载后面的数据。
通过瀑布流的形式，解决了树型结构的分页问题，不用一次全部取出数据，使用缓存，提高加载速度。通过第三次优化。用户体验得到了较大提升。
注意点：使用原生ajax返回50条数据拼接到原有数据末尾的时候，ie容易内存溢出。
部分关键代码：
/**
判断最后一行是否进入可视区域
obj：有滚动条的容器box
lastRow：最后一行
**/
function see(obj, lastRow){
if(obj && lastRow){
var seeHeight = document.documentElement.clientHeight || document.body.clientHeight;//可视高度
var winScroll = obj.scrollTop;//获取滚动条当前位置
var lastSee = obj.scrollHeight;//最后一行
return lastSww< (seeHeight + winScroll)?true:false;
}else{
return true;
}
}
/**
将ajax数据拼接到页面末尾
**/
function append(parent, text){
if(typeof text ==='string'){
var temp = document.createElement('div');
temp.innerHTML = text;
var frag = document.createDocumentFragment();
while(temp.firstChild){
frag.appendChild(temp.firstChild);
}
parent.appendChild(frag);
delete temp;
delete frag;
CollectGarbage();
}
}
/**
组织treeIndex
**/
... ...
int i = 0;
for(ProjectDemand mode: items){
Map<String, Object> row = new HashMap<String, Object>();
if(attachMap.get(mode.getId())!=null){
mode.setArrachmetCount(attachMap.get(mode.getId()));
}
row.put.("demand", mode);
indexMap.put(i++, row);
if(ScrumTaskMap.get(mode.getId())!=null){
List<Task> tasklist = scrumTaskMap.get(mode.getId());
for(Task task : tasklist){
Map<String, object> rowTask = new HashMap<String, Object>();
rowTask.put("task", task);
indexMap.put(i++, rowTask);
}
}
}
/**
统计需求和任务数量
**/
private String projectDemandStatistics(Map indexMap, Map<String,String> filter, Map<integer, FormBase> showDemandAll, Map<Integer, Task> showTaskAll ){
int demandAllCount=0;
int leafCount=0;
int taskCount = 0;
int allCount = indexMap.size();
FormBase demand = null;
FormBase tempDemand = null;
Task task = null;
Map<String, String>SignMap = SZSEUtils.getItemsSign(indexMap);
String showDemandFlag = TypeUtils.nullToString(filter.get("showDemandFlag"));
Map<Integer, FormBase> iteredDemand = new HashMap();//已遍历需求
for(int i=0; i<allCount;i++){
Map<String, Object> row = (Map<String, Object>) indexMap.get(i);
if(row==null) break;
if(row.get("demand")!=null){
demand = (FormBase) row.get("demand");
iteredDemand.put(demand.getId(), demand);
if(isShowDemand(filter, demand)){
if(showDemandAll!=null) showDemandAll.p;ut(demand.getId(), demand);//在这里记录要显示的需求map,供任务显示与否判断时用
demandAllCount++;
if(!"+".equals(signMap.get(demand.getId()+""))){
leafCount++;
}
//拾遗父需求
tempDemand = demand;
while(showDemandAll !=null
&& SZSEUtils.isNotEmpty(tempDemand.getNum01())
&& !"0".equals(tempDemand.getNum01())
&&showDemandAll.get(TypeUtils.nullToInt(tempDemand.getNum01()))==null){
tempDemand = itereDemand.get(Typeutils.nullToInt(tempDemand.getNum01()));
showDemandAll.put(tempDemand.getId(), tempDemand);
demandAllCount++;
if(!"+".equals(signMap.get(tempDemand.getId()+""))){
leafCount++;
}
}
}
}else if("true".equals(showDemandFlag)){//显示任务
task = (Task) row.get("taskId");
if(isShowTask(filter, task)){
int parentID = TypeUtils.nullToInt(task.getStr07());
if(showDemandAll!=null && showDemandAll.get(parentID)!=null){//如果需求不显示，则任务也不显示
showTaskAll.put(task.getId9), task);
taskCount++;
}
}
}
}
String countMessage = "共"+ demandAllCount +"个需求，共"+leafCount+"个叶子需求";
if("true".equals(showDemandFlag)) countMessage +="; 共"+taskCount+"个任务"；
countMessage+=".";
return countMessage;
}