提高 Dojo Grid 的数据处理性能

核心提示： 图 2 则显示了当删除一个数据后，_arrayOfAllItems 和 _arrayOfTopLevelItems 的差别，提高 Dojo Grid 的数据处理性能(5)，_arrayOfAllItems 有个变量被置空，而 _arrayOfTopLevelItems 的个数减一了，都将调用这个

图 2 则显示了当删除一个数据后，_arrayOfAllItems 和 _arrayOfTopLevelItems 的差别。_arrayOfAllItems 有个变量被置空，而 _arrayOfTopLevelItems 的个数减一了。

图 2. arrayOfAllItems 和 arrayOfTopLevelIt

ems
　

Dojo Grid 性能问题

Dojo Grid 了提供大量非常实用的 API，基于这些函数，程序员可以制作出漂亮的电子表格。但是在使用过程中， 它的一些性能问题就逐渐暴露出来。有个比较突出的问题就是在使用 newItem() 方法往 Grid 中添加大量数据的时候， 浏览器会因为 Grid 的操作而陷入忙碌，很长时间没有响应甚至白屏。而对于 UI 用户而言，快速稳定的页面响应是 他们所共同期望的。那么有没有什么办法能改善这一问题呢？

导致性能问题的原因

图 3.Grid 修改数据

Grid 修改数据的过程总是先修改 Grid 绑定到的 Store 中的数据，然后再根据需要，改变 Grid 的 View，完成 Grid 外表的更新。 在通常情况下，在 Grid 创建之时，如果定义了 Store，Grid 就会调用 this._setStore(this.Store); 来对自身的 Store 属性进行配置。 在 _setStore 这个函数里，Grid 对 Store 创建、删除、修改 Item 事件进行侦听。Grid 使用 dojo.connect() event model 来绑定一个自定义 的函数到 Store 上，当无论何时 Store 调用 onSet, onNew, and onDelete 时，都将调用这个函数。这个过程就如清单 4 中所描述的那样。 Grid 通过 this.connect 把 Store 的 onSet, onNew, and onDelete 事件和自身定义的 _onSet._onNew,_onDelete 链接起来了。