ExtJS中GridPanel一次性加载500条以上数据(不分页),性能超级差,有时导致浏览器卡死!

thtwin

浏览: 165809 次
性别:
来自: 成都

最近访客更多访客>>

zzy_001

asd1112131

wuhaowei12345

lin_haisong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

浏览器 EXT HTML

请问：GridPanel中想显示N条记录，不过不能够分页，而且第一次可能显示100条，然后慢慢的不停的向表格中添加数据(数据是先取出来,然后通过store.add方法添加进去的)，一次可能添加100条，1000条.....,这样子，添加之后，浏览器都卡住了。所以不知道大家有没有好的方法呢？

自己使用:Ext.ux.grid.livegrid.GridPanel不过如果是先将数据取到，再添加的话，也不行。如果是远程通过url动态去取数据，就行。

现在放弃Ext.ux.grid.livegrid.GridPanel,还是使用Ext.GridPanel,并且如果store中的数据 < 50 条,那么不管是add,还是grid.getView().refresh()一点问题也没有。只要store.getCount() > 50 那么明显就能够体会到浏览器已经失去响应(卡住了),当gridview将store里面的所有记录都refresh完之后浏览器才正常响应。

试过放弃Ext.Grid,而直接使用html对应的table,不过对于tabel一次性的插入5000条以上的数据,性能也很差,浏览器同样卡死！

自己想过: 针对GridView局部刷新浏览器中用户可见区域,不过没有找到相关的实现方式(不修改Ext的源代码)

然后换了一种思路:Grid对应的Store里面只存放当前浏览器可视区域所能够容纳的记录条数,通过捕获对滚动条操作对应的事件,动态去修改store里面的记录,这样每次GridView.refresh()的时候,最多只能够refresh < 100条数据,所以相对来说可以提高性能,但是不同分辨率下面,GridPanel显示的记录数不一样,而且如果没有滚动条出现,那么连修改Store里面的数据的机会也没有了,所以这样子也没有局部刷新GridView的方式好控制!

[u][/u]

分享到：

EXTJS, Viewport区域自动适应 | Spring AOP execution 切入点表达式

2011-05-02 23:42
浏览 7289
评论(17)
论坛回复 / 浏览 (17 / 12262)
分类:Web前端
查看更多

17 楼 atian25 2011-05-05

主要是html dom生成的太多了.
4.x版本中grid得到了极大的优化,生成的dom比3.x简洁很多,性能上提升很大

16 楼 aspnetdb 2011-05-05

遇到过同样的情况，纠结中。grid显示不只和行后关系和列的多少也有关系。
m*n的关系。

15 楼 beyondsphinx 2011-05-05

我用TABLE一次加载几百行浏览器也卡死啊，客户端电脑，浏览器性能，这些也都有关系吧，要是能不这么做更好了，页面大了就卡。

14 楼共产主义 2011-05-05

我也遇到这个问题。用buffergrid加载的时候，数据量一多，滚动条滚动刷新grid时速度太慢了

13 楼 aimer311 2011-05-05

刚好针对这个问题研究过。
其实如果记录数在200-300之间基本还是没问题的，大于300的话浏览器可能会出现假死现象。对于不分页的情况，就如lz所说，gridview将store里面的所有记录都refresh完之后浏览器才正常响应，主要的渲染时间就在这里。我测试了两种方式希望解决这个问题。
1、使用livegrid，这也符合一般的使用习惯。也是我强烈推荐公司使用的，但是公司的产品是c/s结构，客户已经很习惯不分页，而且一次加载，对于每次拖动加载也是不习惯。
2、使用拆包查记录动态询，比如总记录数是1000的情况下，分10次查询，以后查询的加入store中，这也出现了，只要在load完上一次的记录后注册一次查询就行了，根据多次测试的结果，总的时间上会比一次查询稍慢。更加无法忍受的是浏览器在所有请求完成之前会处于假死状态。
我看了4.0的大数据量表格，其实跟livegrid的原理应该是一样的。
上面同学说的bufferview我再去看一下。
结论就是如果客户真的要求不分页，那就直接写jsp好了。其实有这样需求的页面不会多。

12 楼 haiyupeter 2011-05-05

tfwin2 写道

呵呵，遇到过这种需求，我们现在用的DHMTLXGRID，用SMART RENDER功能，加载5万条以内的数据都可以内置支持滚动读取，
我想DHTMLX做到的，EXT应该也有类似的，楼上的链接我看到了，感觉滚动条有些卡，没有DHTMLXGRID流畅，可能毕竟EXT库庞大复杂了些，内部判断多，DHMLXGRID可以单独使用的控件，不过非专业版没有分页功能，如果需要，要自己拓展。

赞成滚动条读取数据，这应该没有多大问题，在google或者是qq空间等地都用到的技术，现在已经慢慢的变通用化。

11 楼 czpae86 2011-05-04

建议看看Ext4.0 grid例子,是分页的但没有分页条,加载过的记录就不会调后台了

10 楼 cbhdgvt 2011-05-04

http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/infinite-scroll.html 这个例子一旦滚动的速度快一点的时候~就开始load了~~有木有比较好的办法？

9 楼 LoriSun 2011-05-04

EJS TreeGrid, 高效的表格，你可以学习一下。http://www.treegrid.com/treegrid/www/

8 楼 leelege 2011-05-04

4没用过就不评价了，我用Ext3的时候测试过，Ext的Grid在一次性加载的数据超过达到700行的时候速度基本让人无法忍受了。后来不得以自己写了个Grid，基本也就是3楼的那种思路，但是速度的确比Ext快得多，2000行以内的数据基本感觉不出来延迟。楼主不妨试一下

7 楼 KimHo 2011-05-04

请查看extjs 4.0里面的grid组件：Grid with 50,0000 Rows

6 楼 tfwin2 2011-05-03

5 楼跳跃的心灵 2011-05-03

一定得一次取这么多数据吗，况且客户不可能一次就看这么多数据啊，他也看不了，你可以这样啊，先取一部分，然后给个查看更多数据的按钮或者链接，点击后再去取一部分出来和之前的合并一起，QQ说说那里好像就这样的。个人愚见。

4 楼 atian25 2011-05-03

500行以上都不行了,
3.x试着用bufferview或livegrid
4.x就无忧了...随便你多少行,内建支持
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/infinite-scroll.html

3 楼 jfzlnyf 2011-05-03

官网不是有个bufferGrid的例子不就是针对多数据的么？
话说，这么多数据，何必不分页呢

2 楼 Rooock 2011-05-03

thtwin 写道

直接使用html对应的table,不过对于tabel一次性的插入5000条以上的数据,性能也很差,浏览器同样卡死！
[u][/u]

5000条就卡死了?

我在本机10000条大概两三秒吧.
CPU在加载前1%~7%的比率. 加载时达到达到峰值50%的使用率. 大约持续了1秒. 然后跌落到1%
内存从1.16GB增加到1.21GB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script>
	function insert()
	{
		var table = document.getElementById("a");

		var trs = "";

		for(var i = 0; i < 10000; i++)
		{
			trs += "<tr><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td></tr>";
		}
		table.innerHTML = '<table border="1">'+trs+'</table>';
	}
  </script>
 </HEAD>

 <BODY>
  <div id="a">
  </div>
  <input type="button" value="insert" onclick="insert();" />
 </BODY>
</HTML>

没必要把所有的运算都放到客户端来操作.
我觉得从后台返回一串HTML代码也挺不错的.

PS. Ext里grid性能没你说的那么差. 官网上例子不少. 速度挺快的.

1 楼 clue 2011-05-03

没用过BufferView吧？官方的ux里面就有

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论