同事开发的软件系统采用Easyui做的前台界面,当业务变得比较复杂之后,展示效果就变得很慢,于是我开始了原因的排查,现在已经找到了具体的原因,所以拿出来与大家一起分享调试过程。

  既然调试的是前端,那么我们就要将前端和后端分离,前端按格式返回数据,由于前端使用了iframe嵌套,那么我们需要在通过权限验证之后,直接打开iframe的src,带上对应的参数,再找到里面具体的执行JS代码。

  由于后端使用了WebApi,返回的是XML格式,限制被直接查看,所以需要在Global.asax中添加一段代码:

GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();

  可以看出这是Clear方法,它清除了系统的XML格式化支持,系统默认的格式化支持是XML、JSON,清除了第一个,那么就剩下第二个,这样我们就能顺利拿到后端返回的JSON数据了。

有了后端返回的数据,我们就可以重新起一个项目,直接从后端返回它,可以减少调试原来系统的步骤。下面就是调试前端了。

  引用完毕js脚本,一切准备就绪。忽然发现jquery.easyui.min.js是压缩和混淆过的,这下有些犯难了,在高手的指点下,发现了一个可以格式化JS的网站 http://tool.oschina.net/codeformat/js/ 。将jquery.easyui.min.js格式化成了可以查看的格式,但是混淆是没有办法的。

  通过Chrome自带的Network调试发现,有一个datagrid请求的数据已经在后台生成,但是Content Download就是特别长,如图,12.17s,着实让人难受。

  后来发现有多个datagrid在同时刷新数据,因为js是单线程的,其他的刷新代码在运行的时候,这里只能进入等待。

  下面来逐个datagrid调试,也许是共性问题呢?!

  对着被格式化的easyui框架代码,代码如图:

这样看上去就清晰了很多,分别对function的内容最前面添加console.time('function名称'),最后面添加console.timeEnd('function名称')。经过调试运行后定位到运行速度较慢的,再一步一步的往下挖,最终挖到了fitColumns有关的代码:

     if (_65c) {
_5cd(_65c);
$(_65b).datagrid("fitColumns");
} else {
var _65e = false;
var _65f = _613(_65b, true).concat(_613(_65b, false));
for (var i = ; i < _65f.length; i++) {
var _65c = _65f[i];
var col = _614(_65b, _65c);
if (col.auto) {
_5cd(_65c);
_65e = true;
}
}
if (_65e) {
$(_65b).datagrid("fitColumns");
}
}

看到了_65e=true;可是初始配置里写了fitColumns:false呀,这是怎么回事呢,再翻开配置代码一看,如图:

A列和B列是没有设置width,导致datagrid在渲染之前要重新计算width,即使是隐藏列,这么做大概是为了让系统显示隐藏列的时候不用再次计算吧。

添加上width之后,datagrid运行速度立马快了,Content Download变得很小,问题定位成功,Bug解除。

关于easyui展示慢的Debug的更多相关文章

  1. Asp.Net MVC 实现将Easy-UI展示数据下载为Excel 文件

    在一个项目中,需要做一个将Easy-UI界面展示数据下载为Excel文件的功能,经过一段时间努力,完成了一个小Demo.界面如下: 但按下导出Excel后,Excel文件将会下载到本地,在office ...

  2. EasyUI的增删查改(后台ASP.NET)

    转自:http://www.cnblogs.com/dedeyi/archive/2013/04/22/3035057.html 某某人曾经跟我说,你们做系统不就是增删查改吗. 是啊,很多时候我们就是 ...

  3. Debug outlook add-in (office.js) 小技巧

    这几天在使用office.js 做outlook add-in的时候出现了一个问题: 不知道运行时去调试. 这里给大家介绍两个调试add-in 的方法. office365 其他软件 add-ins ...

  4. 使用IDEA+vue.js+easyUI的demo

    最近,随便写了几个开发的小例子,自己总结下,留个纪念. 例子1:使用EasyUI做了一个简单界面,服务器和客户端在一起. @Controller @RequestMapping("/demo ...

  5. 【转】Xcode概览:调试应用程序

    原文转自:http://www.cocoachina.com/ios/20141128/10358.html 本文由CocoaChina翻译组成员Creolophus(github主页)翻译自苹果官方 ...

  6. 基于OpenCV做“三维重建”(0)-- OpenCV3.2+VIZ6.3.0在vs2012下的编译和使用

    一.问题提出         ViZ对于显示3维的效果图来说,非常有帮助:我在使用OpenCV进行双目测距的过程中,有一些参数希望能够通过可视化的方法显示出来,所以参考了这方面相关的资料.做了一些实验 ...

  7. PHP错误处理函数register_shutdown_function

    当程序在线上运行时,如果遇到BUG,想不在前端输出错误信息,同时能及时邮件通知开发者,register_shutdown_function函数就可以派上用场了. 注册一个会在脚本执行完成或者 exit ...

  8. IBM InfoSphere DataStage 8.1 DataStage Job 开发具体解释

    简单介绍 DataStage 使用了 Client-Server 架构,server端存储全部的项目和元数据,client DataStage Designer 为整个 ETL 过程提供了一个图形化的 ...

  9. [转]Xcode概览:调试应用程序

    原文网址: blog.csdn.net/fhbystudy/article/details/12856261 本文由CocoaChina翻译组成员Creolophus(github主页)翻译自苹果官方 ...

随机推荐

  1. 开始Django之旅

    MTV 与 MVC 模型 1.MVC模型 Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为 模型(M) ,控制器(C) 和 视图(V) 三层,他们之间以一种插件式的.松耦合的方式 ...

  2. Spring batch学习 持久化表结构详解(2)

    #接上一篇 这一篇讲一下持久化需要表 batch_job_execution, batch_job_execution_context, batch_job_execution_params, bat ...

  3. Spring batch学习 (1)

    Spring Batch 批处理框架 埃森哲和Spring Source研发 主要解决批处理数据的问题,包含并行处理,事务处理机制等.具有健壮性 可扩展,和自带的监控功能,并且支持断点和重发.让程序员 ...

  4. python爬虫----基本操作

    一.爬虫基本操作 有些网站和其他网站是有关系(链接),全球的网站就相当于一个蜘蛛网,我们放一只蜘蛛在上面爬,一定能够把网爬个遍.那么如果我们要爬取互联网上内容我们就相当于放一只蜘蛛在上面. 爬虫分为 ...

  5. oracle sqlplus conn 远程连接

  6. mock 的独立使用

    public class Air21QueryMileStoneJobTest{ @InjectMocks Air21QueryMileStoneJob air21QueryMileStoneJob ...

  7. Python运维开发基础06-语法基础

    上节作业回顾 (讲解+温习120分钟) #!/usr/bin/env python3 # -*- coding:utf-8 -*- # author:Mr.chen # 添加商家入口和用户入口并实现物 ...

  8. linux进程的几个状态

    [linux进程的几个状态] 1. Linux进程状态:R (TASK_RUNNING),可执行状态&运行状态(在run_queue队列里的状态) 2. Linux进程状态:S (TASK_I ...

  9. 01d-1: 算法分析

  10. mac下yii安装

    下载https://github.com/yiisoft/yii2-app-advanced/releases,里边没index.php文件 1.http://www.yiichina.com/que ...