码迷,mamicode.com
首页 > 其他好文 > 详细

easyUI datagrid 多行多列数据渲染异常缓慢原因以及解决方法

时间:2018-03-16 13:32:14      阅读:334      评论:0      收藏:0      [点我收藏+]

标签:接下来   渲染   ima   文档   解决办法   管理系   修改   浏览器   查看   

原因

最近,在优化之前公司帮联想(外包)做的一个老的后台管理系统,由于项目是基于easy UI框架,页面是后台用jsp实现的,再加上在公司推行前后端分离的实践,大部分项目都基于vue采用前后端分离去实现。所以当后台哥们儿告诉我,某个用datagrid渲染的表格,加载时间长达30多秒,让我去优化的时候,我的内心是崩溃的,但是我是没法拒绝的,谁让我们搞前端的呢!

过程

说干就干,从svn上更新下代码,便开始搞起。页面渲染过慢总体分两种原因,后端接口传输速率慢和前端页面渲染慢,当然先从接口下手,取到后台接口,放在postman中模仿前端发送请求发现秒返回数据。......那么很明显问题不在后台了。确定问题在前台了,首先到easy UI官网查看datagrid的API文档,确定代码语法没有问题,接下来就是用浏览器搜索了,上网查了下给出的解决datagrid大数据渲染缓慢的方法,要么是版本不一样,要么就是没效果。但是有一个方法,通过设置rownumbers=false,可以减少渲染时间,但是表格渲染时间还是要将近20秒,并且设置false之后,单元格的行号就没有了,显然这是不行的。

完美解决

本来已经绝望了,感觉问题应该是框架设计的bug,只能修改源码了,但是,我不死心一边翻看文档,一边寻找可能的解决办法。无意中看到,datagrid表格渲染会通过计算表格元素宽度,取出最宽的表格,对列宽负值。我灵机一动我们渲染的表格列数达到了30列,官方的示例都在10列左右,难道是要设置固定列宽(width),来降低表格计算宽度消耗的时间。我确定就是这个原因,立刻修改代码,提交svn,后台重启服务器,重新测试了一下,从之前的将近30多秒,现在2秒左右。问题完美解决!技术分享图片

easyUI datagrid 多行多列数据渲染异常缓慢原因以及解决方法

标签:接下来   渲染   ima   文档   解决办法   管理系   修改   浏览器   查看   

原文地址:https://www.cnblogs.com/rlwb/p/8580470.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!