提高 Dojo Grid 的数据处理性能

核心提示： 通过上面的分析，我们可以看到，提高 Dojo Grid 的数据处理性能(7)，如果使用 newItem 循环往 Store 中添加数据，那么 Store 在执行完一次 add 的操作后都会引发 Grid 去载入新加项目， 清单 7 中展示的就是这个过程，在添加数据之初 modelGrid 先断开

通过上面的分析，我们可以看到，如果使用 newItem 循环往 Store 中添加数据，那么 Store 在执行完一次 add 的操作后都会引发 Grid 去载入新加项目， 并更新自己的视图。经过实验发现，往 Store 中添加 Item 的速度是很快的，而 grid 的载入新加项和更新自身视图的操作是比较慢的。每次新加一个 数据，Grid 都会尝试把新加的数据都加载进来（创建所有的 dom node），虽然这保证了 Grid 获得 Store 当前的所有数据，但是这种操作加大了浏览 器的内存开销，更进一步使浏览器陷入忙碌，长时间没有响应。

Grid 性能问题的解决方法

要解决上述性能问题，需要解决三个方面的问题。

Step 1. 适时断开 Grid 和 Store 的连接

因为往 Store 中添加数据的速度很快，而 Grid 的载入新加项和更新视图速度较慢，所以在操作之初，就把 Grid 的 Store 设置为空（null）， 断开 Grid 和 Store 的连接 , deviceGrid._setStore(null);。这样即使 Store 因为 addItem 发生变化，也不会联动引起 Grid 的操作了。 当 Store 中添加完数据后再把 Grid 和 Store 链接上：deviceGrid._setStore(deviceStore); 最后把数据重新加载完成视图更新：deviceGrid.render()。 清单 7 中展示的就是这个过程，在添加数据之初 modelGrid 先断开 Store 的连接，再往 modelStore 中添加数据，结束后又把 modelStore 重新连接上 modelGrid.

清单 7. Grid 添加项目

　function　_addGridData(dataarray)　
　{　
　modelGrid._setStore(null);　//　断开连接　
　/*　往　Grid　中添加数据　*/　
　for(var　i=0;i<datalength;i++){　
　var　modelname　=　dataarray[i].split(',')[0];　
　var　devicename　=　dataarray[i].split(',')[1];　　　
　modelStore.newItem({id:"modelItem"+i,StatusImage:'<img　src="http://tech.ddvip.com/2010-05/images/Normal_obj16.gif">',　
　Sel:true,Loop:1,Status:'<img　src="http://tech.ddvip.com/2010-05/images/statusStopped_obj16.gif">Not　Started',　
　Model:　modelname,　Device:　devicename});　　　
　}　
　modelGrid._setStore(modelStore);//　恢复连接　
　modelGrid.render();//　重新加在视图　
　}