easyui datagrid 大数据加载效率慢,优化解决方法

标签: easyui datagrid 大数据 | 发表时间:2014-12-20 10:06 | 作者:zzc1684
出处:http://www.iteye.com

在使用easyui datagrid途中发现加载数据的效率真的不是一般的差。经测试IE8加载300条数据就感觉明显的慢了,加载2000条数据就另人崩溃用时差不多60 秒,就算在google浏览器测试结果也快不了几秒。 平时听闻easyui datagrid效率底下,自己测试才发现真是使人无法忍受。

笔者只好百度,google解决方法,发现一篇文章说改

//1.3.3版本是这样的,其它版本也是这句代码
$(_1e0).html(_1e4.join(""));
改为:

$(_1e0)[0].innerHTML = _1e4.join(""); 笔者找了类似的地方修改,测试后结果还是一样。没有任何效果,可能是跟作者的版本不同,我的是1.3版,作者是的1.33版。
忙了半天,只好自己续步调试追踪。经过努力终于找到了导致慢的真正凶手。真正造成慢的代码如下:

Java代码   收藏代码
  1. for (var i = 0; i < trs2.length; i++) {  
  2. var tr1 = $(trs1[i]);  
  3. var tr2 = $(trs2[i]);  
  4. tr1.css("height", "");  
  5. tr2.css("height", "");  
  6. var _43f = Math.max(tr1.height(), tr2.height());  
  7. tr1.css("height", _43f);  
  8. tr2.css("height", _43f);  
  9. }  



看代码就清楚,上面是对比表格中两行的高度,然后把高的赋值给各行。

解决:凶手找到了,怎样解决呢?笔者是直接屏蔽她们的对比和赋值。让浏览器自动适应高度吧。

如下:

Java代码   收藏代码
  1. for (var i = 0; i < trs2.length; i++) {  
  2.   
  3. /* 
  4. var tr1 = $(trs1[i]); 
  5. var tr2 = $(trs2[i]); 
  6. tr1.css("height", ""); 
  7. tr2.css("height", ""); 
  8. var _43f = Math.max(tr1.height(), tr2.height()); 
  9. tr1.css("height", _43f); 
  10. tr2.css("height", _43f); 
  11.  
  12. */  
  13. }  



好了,屏蔽后。让我们测试效率。测试一万条记录,测试代码片段如下:

Java代码   收藏代码
  1. var obj = { 'total': 100, 'rows': [{ id: '1', name: '一' }, { id: '2', name: '二'}] };  
  2. for (var i = 0; i < 10000; i++) {  
  3. var row = ({ id: 'id' + i, name: '一' });  
  4. obj.rows.push(row);  
  5. }  
  6. $('#tt').datagrid({  
  7. url: null,  
  8. pagination: true,  
  9. pageSize: 20,  
  10. pageNumber: 1,  
  11. rownumbers: true,  
  12. fitColumns: false,  
  13. columns: [[  
  14. { field: 'id', title: 'id', width: 100 },  
  15. { field: 'name', title: 'Name', width: 100 }  
  16. ]]  
  17.   
  18.   
  19. });  
  20. $('#tt').datagrid('loadData', obj);  



好了,现在是10000条记录啊,IE8只用1秒不到加载完成。改成3000条记录,只要1~2秒加载完成。

结论:把那该死设置高度代码直接屏蔽。嘻嘻,有惊喜。EASYUI版本:1.3版



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [easyui datagrid 大数据] 推荐:

easyui datagrid 大数据加载效率慢,优化解决方法

- - Web前端 - ITeye博客
在使用easyui datagrid途中发现加载数据的效率真的不是一般的差. 经测试IE8加载300条数据就感觉明显的慢了,加载2000条数据就另人崩溃用时差不多60 秒,就算在google浏览器测试结果也快不了几秒. 平时听闻easyui datagrid效率底下,自己测试才发现真是使人无法忍受.

jQuery EasyUI 1.3.5 发布

- - 开源中国社区最新新闻
jQuery EasyUI 1.3.5 发布,此版本修复了bugs和增加了一些改进. 下载: jquery-easyui-1.3.5.zip.

Jquery easyui 下loaing效果

- - CSDN博客推荐文章
beforeSend:ajaxLoading,\\发送请求前打开进度条. ajaxLoadEnd();\\任务执行成功,关闭进度条. 作者:songhfu 发表于2013-8-10 17:24:30 原文链接. 阅读:15 评论:0 查看评论.

吐槽一次MVC与Jq EasyUI的经历

- - 博客园_首页
MVC在Web开发中的优势(在TDD方面、逻辑与UI的彻底分离)已无需多言,除此之外个人感觉在给UI提供JSON各式的数据也更加方便. 但是总体上说,在公司的这次MVC经历最后的感觉还是比较失败. 个人记录下来在此做个反思,同时希望和大家一起交流,向大家学习. 首先从以上截图中, 个人就犯错了. 从整体架构上来说,项目中的授权部分(Accredit )之前是希望通过AOP的方式进行的,最后和在基础加上的AOP部分就发生了剧烈的冲突.

JQuery EasyUi之界面设计——前言与界面效果(一)

- - 博客园_首页
如果冯巩的开场白是“观众朋友们,我想死你们了”,那么我的开场白是“最近一直很忙,很久没有发文了”. 前面说过了EXT.NET,这里顺便再说说JQuery EasyUI. 为啥我会选择JQuery EasyUI呢. 基本的组件都用,即“麻雀虽小五脏俱全”. 使用简洁方便,比如支持html+js. 世上没有完美的产品,而且其对IE6的兼容性还存在一些问题,但相比extjs,其还是很方便阅读和修改的.

基于jquery-easyui的仓库管理系统

- - CSDN博客Web前端推荐文章
使用jQuery EasyUI创建的仓库管理系统包括系统管理、数据维护、业务单据管理等,有兴趣可以对其进行修改扩展. 数据库采用MYSQL, 帐号/密码:root/root,演示登录帐号/密码:admin/admin. 数据库配置信息可以修改配置文件:/WEB-INF/classes/activerecord.properties.

浅析jQuery EasyUI响应式布局的实现方案

- - WebUI框架使用参考
首先解释一下本篇文章标题中提到的“jQuery EasyUI响应式布局”,这里是指EasyUI里布局类组件的fit属性,也就是实现自适应的属性. 到了1.4版本,新增了一个宽度百分比的概念,既可以用在布局类组件上,也可用在表单类组件上,但是其实现方案跟fit是类似的. 也就是说,jQuery EasyUI的自适应布局包含两块内容:.

一个关于jquery easyui crud demo 的一个例子

- - Web前端 - ITeye博客
注:这个程序jsp的源代码在这个http://www.jeasyui.com/demo/main/index.php网址的basic crud里面下载它用的是html + php 我们今天要把他改成 Java后台 struts + hibernate + ibatis. 这里是jsp代码easyui.jsp.

谈大数据(2)

- - 人月神话的BLOG
对于大数据,后面会作为一个系列来谈,大数据涉及的方面特别多,包括主数据,数据中心和ODS,SOA,云计算,业务BI等很多方面的内容. 前面看到一个提法,即大数据会让我们更加关注业务方面的内容,而云平台则更多是技术层面的内容. 对于大数据会先把各个理解的关键点谈完了,再系统来看大数据的完整解决方案和体系化.

大数据之惑

- - 互联网分析
算起来,接触大数据、和互联网之外的客户谈大数据也有快2年了. 也该是时候整理下一些感受,和大家分享下我看到的国内大数据应用的一些困惑了. 云和大数据,应该是近几年IT炒的最热的两个话题了. 在我看来,这两者之间的不同就是: 云是做新的瓶,装旧的酒; 大数据是找合适的瓶,酿新的酒. 云说到底是一种基础架构的革命.