2010年12月17日   ExtJs, 头条   9,491 次浏览
今天所讨论的是“ExtJs大数据的优化”。ExtJs作为前端展现层框架,以其丰富的功能,被广大程序员所接受。不管是从界面漂亮的程序,还是功能完善的程序,ExtJs的控件都高居同列产品的榜首。
但是在使用过程中如果碰到大数据的时候,就会出现页面假死的情况,因为ExtJs是采用异步方式从后台获取数据的,如果数据量过于庞大,就需要更久的时间来等待数据,从而导致了假死的出现。这种情况多出现在使用表和树的时候,这时就需要我们进行ExtJs大数据的优化了。以下是根据我个人经验所实现的ExtJs大数据的优化,主要实现原理是:利用空间换时间。
一、ExtJs大数据的优化原理介绍
我们都知道与从数据库读取数据相比,从内存读数据是要快上许多的,所以我就利用JavaScrit的数组功能,先将数据读取后保存至数组中,然后再进行操作。那么也许有人会问:难道数组的数据不是从数据库获得的吗?难道速度会快吗?没错。因为如果将数据加载到表或树的时候需要ExtJs需要对每条数据进行许多处理后才会显示,从而速度就慢了。
二、ExtJs大数据的优化具体方法
1、创建数组,加载数据:
var allData= []; var allStore = new Ext.data.Store({ //... }); allStore.on('datachanged', function() { allData = []; // 循环数据将数据添加到数组 allStore.each(function(r){ allData.push({ID:r.data.ID, NAME:r.data.NAME, ORGNAME:r.data.ORGNAME}); }); }); |
2、将数组数据分页加载至表
var pageSize = 10; toStore.load({params:{start:0,limit: pageSize}}); toStore.on('beforeload', function(s, params){ var start = params.params.start; var end = start + params.params.limit; // 取数组数据 toProxy.data = {totalProperty: toData.length,root: toData.slice(start, end)}; }); |
提示:树也有相关的分页代码,可以去网上找找。
3、如果你需要将操作的结果保存到另一张表的话,就可以对数组进行增、删、改、查操作,这时你会明显感觉到速度的提升
// 扩展JavaScript的Array功能 查询、删除、增加对象 Array.prototype.getForObj = function(obj) { var index = -1; for(var i = 0, n = this.length; i < n; i++) if(this[i].ID == obj.ID) {index = i;break;}; return index; } Array.prototype.delForObj = function(obj) { var i = this.getForObj(obj); if(i == -1) return; this.splice(i, 1); } Array.prototype.addForObj = function(obj) { if(this.getForObj(obj) != -1) return; this.push(obj); } // 添加至数组 function add() { var s = toDataGrid.getSelectionModel().getSelections(); for(var i = 0, n = s.length; i < n; i++) { var obj = {ID:s[i].get('ID'),NAME:s[i].get('NAME'),ORGNAME:s[i].get('ORGNAME')}; toData.addForObj(obj); } toStore.reload(); } |
好了,差不多就是这些了,关于ExtJs大数据的优化如果还有什么不懂的可以留言问我。
>>> Hello World <<<
这篇内容是否帮助到你了呢?
如果你有任何疑问或有建议留给其他朋友,都可以给我留言。
目前有2条留言:
第三方推送数据难道不是先保存到数据库么?
这种假死一般是发生在大数据量传递过程中,可以第三方减少每次发送的数据量,分批发送,也可以先将数据保存到数据库再分批取出,相信效果会好很多。
你好,如果我前端ext要时时接收从第三方推送过来的大量数据,容易出现假死现象,浏览器崩溃,怎么优化,谢谢你回答哦