显示服务器端大量数据之效能贴士 Performance Tips for Displaying Large Volume of Data from Server

http://riashanghai.com/zh-hant/node/97
当需要显示从服务器端传来的大量数据的时候, 我们可以使用DataGrid datagrid为UI, 其data provider 为一个ArrayCollection:

var datagrid:DataGrid = new DataGrid();
datagrid.dataprovider = new ArraryCollection();

服务器传过来海量数据时我们可以这样来做:

for each object { // replace 'for each object' with your own real code
  ArrayCollection(datagrid.dataprovider).addItem(object);
}

从效能角度来说, 上面的代码是有问题的 - 每一个addItem呼叫后datagrid将进行一次刷新, AS可以在一秒钟执行上万个addItem操作, 但执行一万次刷新则花费很多时间. 有两个解决方案:

方法一: 使用ArrayCollection.disableAutoUpdate():

ArrayCollection(datagrid.dataprovider).disableAutoUpdate():
for each object {
  ArrayCollection(datagrid.dataprovider).addItem(object);
}
ArrayCollection(datagrid.dataprovider).enableAutoUpdate();

这样即便上万个addItem操作, 刷新仅有一次.

注意: disableAutoUpdate/enableAutoUpdate必须成对呼叫 - 若呼叫两次disableAutoUpdate, 再呼叫一次enableAutoUpdate, 这时不会有刷新; 你必须呼叫第二次enableAutoUpdate.

方法二: 将数据预先放到一个ArrayCollection里面, 然后将其set为dataprovider的list. 如果这样, dataprovider就不必为ArrayCollection了, 而是ListCollectionView:

datagrid.dataprovider = new ListCollectionView();

var myAC:ArrayCollection = new ArrayCollection();
for each object {
  myAC.addItem(object);
}
ListCollectionView(datagrid.dataprovider).list = myAC;

这样刷新也仅有一次.

方法一适用于dataprovider是自定义的class(一般extends ArrayCollection), 其实disableAutoUpdate(),enableAutoUpdate()及数据操作完全可以在这个自定义class里面执行;

方法二适用于较为简单的情况;

不必使用方法一或者方法二的情况: 当所需要操作的ArrayCollection并没有任何Event Listener的时候, 我们不必考虑其产生的Event. 一个ArrayCollection被设为DataGrid的dataprovider的时候, DataGrid会add event listener到ArrayCollection上, 这就要面对上面所提到的效能考量了.