`

(原创)easyui 页面加载慢的原因及解决办法

 
阅读更多

 

       Easyui  框架简单、易用,且功能丰富,可以满足大多的管理类网站开发的要求。但越开发到后面的时候,

 

总感觉页面加载越来越慢,有时打开一个页面需要好几秒甚至十几秒,这种体验是非常糟糕的。

 

       刚开始还以为是因为加载的东西多了,导致页面加载缓慢。通过IE浏览器的调试工具(IE中按F12调出),网

 

络调试后发现,绝大部分时间都花在  datagrid 及 combobox 或是 combotree 这几个组件上了。自己的页面需

 

要在 $(function(){   XXX  });  中,页面加载前生成 combobox、combotree 等组件。

 

一、定位原因

 

       通过调试后,得知 combobox、combotree、datagrid 等组件在加载时花的时间较多。通过初步测试发

 

现:如果 combobox 不通过 ajax 生成,而是直接在页面中写死option 项,加载的时间几乎为零,可以得出这

 

样的结论,easyui 在 $(function(){}) 中执行 ajax 从后端取出 combobox 数据会导致缓慢。同样,再测试

 

combotree 也存在这种情况。

 

二、解决办法

 

        由于是 java 开发,可以在第一次请求 servlet 时,先从后台生成 combobox \ combotree 的 json 数据,

 

并存储为 servlet 变量,在页面中获取后,直接初始化 combobox 或 combotree 等组件。而避用 ajax 请求的

 

方式初始化相关组件。

 

三、避免重复 datagrid 请求

 

       有时通过日志看到有些 datagrid 请求,重复请求了两次。这是由于 easyui 的设计问题造成的:如果在

 

页面中定义的 div 指定了 class="easyui-datagrid"  ,然后在 javascript 代码中,又通过

 

$("#userDg").datagrid 去请求数据的,都将两次请求数据。且两次收集的参数还有些不同。解决办法是,将

 

页面中定义的 div 的 class="easyui-datagrid"  属性删除即可

 

 

 

分享到:
评论
2 楼 hwzyyx 2017-04-06  
hbxfyxw 写道
过来看看黄师傅,黄师傅行文走笔娓娓道来,受教了


好记忆不如烂笔头,没有办法,不得不写点东西撒。现在记忆力大不如前了。
1 楼 hbxfyxw 2017-03-31  
过来看看黄师傅,黄师傅行文走笔娓娓道来,受教了

相关推荐

    easyui iframe 页面重复加载的问题

    在使用easyui框架开发Web应用时,特别是在使用tab布局的...以上就是对于easyui中iframe页面重复加载问题的分析及其解决方案的详细说明。在实际开发中,应合理运用这一技术细节,以达到更好的用户交互体验和系统性能。

    jQuery EasyUI 页面加载等待及页面等待层

    这里面包含了两个主要的功能点:一个是页面加载时的等待效果,另一个是基于EasyUI的页面等待提示层工具类的实现。 对于页面加载等待,文档提供了一个名为ajaxLoading的函数。这个函数会在页面加载时被触发,并创建...

    JS EasyUI DataGrid动态加载数据

    这种方式避免了一次性加载大量数据导致的页面响应慢和内存消耗大等问题。 实现JS EasyUI DataGrid动态加载数据主要涉及以下几个步骤: 1. **配置DataGrid**: 在HTML中创建DataGrid,并设置其`url`属性为数据源接口...

    简单的easyui页面

    这个名为"简单的easyui页面"的项目提供了一个简化版的EasyUI页面,非常适合用作前台UI界面,以实现简洁、高效的用户交互体验。 EasyUI的核心特性包括组件丰富、易于使用、响应式布局以及对Bootstrap的兼容性。以下...

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

    本文主要探讨如何针对EasyUI datagrid进行性能优化,以解决大数据量加载慢的问题。 首先,我们需要理解问题的根源。当datagrid加载大量数据时,如果未进行优化,其内部的某些功能,如行高自动调整,可能导致性能...

    EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)

    为了解决这个问题,我们可以利用 EasyUI 提供的 `$.parser.onComplete` 事件,以及添加一个加载遮罩层来实现优雅的页面加载提示。 首先,理解 `$.parser.onComplete` 的工作原理。这个事件会在所有的 EasyUI 组件...

    EASYUI 页面框架

    EASYUI 页面框架是一款基于JavaScript和CSS的前端开发框架,专为快速构建高效、美观的后台管理界面而设计。它采用简洁的API接口,使得开发者能够轻松实现数据绑定、交互控制以及界面布局等功能,大大降低了网页开发...

    扩展EasyUI tabs 组件,加载tab页时添加遮罩

    描述"扩展EasyUI tabs 组件,加载tab页时添加遮罩,是页面加载时更加美观,内涵示例"表明这个扩展不仅提升了用户体验,而且增加了页面的美感。通过包含示例,我们可以预期在实际应用中,开发者可以快速理解和实现这一...

    EasyUI登录页面.zip

    这个名为"EasyUI登录页面.zip"的压缩包文件包含了使用EasyUI框架构建的一个登录页面的相关资源。EasyUI框架主要基于jQuery,它提供了一系列预先设计的CSS样式和JavaScript组件,使得开发者能够快速构建出美观且功能...

    easyui页面操作

    easyui页面操作.easyui页面操作easyui页面操作.easyui页面操作.easyui页面操作

    解决easyui不加载js问题.pdf

    本文将深入解析这个问题的原因,并提供解决方案。 EasyUI是一个基于jQuery的前端框架,用于快速构建用户界面。Tab组件是其常用功能之一,用于展示多个页面或视图。当我们在Tab面板中使用`href`属性指向一个外部HTML...

    easyui页面的例子

    总的来说,EasyUI 提供了一套完整的前端解决方案,帮助开发者快速构建功能丰富的 Web 应用程序。通过这个"easyui 页面的例子",你可以学习到如何使用 EasyUI 的各种组件,并将其应用于实际的网页设计中。实践中,...

    解决easyui不加载js问题.docx

    1. **加载顺序**:确保引入的JavaScript文件顺序正确,比如jQuery库(如果使用)应在EasyUI库之前加载,因为EasyUI依赖于jQuery。 2. **编码问题**:`charset=UTF-8`用于指定文件的字符编码,确保所有相关文件...

    easyui页面布局示例

    在“easyui页面布局示例”中,我们将探讨如何利用 EasyUI 实现高效且直观的页面布局,并结合导航菜单,实现动态内容加载。 首先,EasyUI 提供了多种布局模式,如网格布局(grid layout)、面板布局(panel layout)...

    Jquery EasyUI 页面框架Demo

    这个"Jquery EasyUI 页面框架Demo"包含了四个示例,将帮助我们更好地理解和运用EasyUI来设计页面布局。 首先,我们要了解EasyUI的核心概念。EasyUI的核心是其组件库,包括窗口(window)、表格(datagrid)、面板...

    JqueryEasyUI Tree 动态加载,稍作修改就可以用了

    动态加载是一种优化技术,可以提高用户体验,避免一次性加载大量数据导致页面响应变慢。对于Tree组件,动态加载意味着当用户展开一个节点时,才会去服务器请求该节点的子节点数据,而不是一开始就加载所有数据。 在...

    基于EasyUI的登录页面

    本项目"基于EasyUI的登录页面"就是利用EasyUI来创建一个功能完备、易于拓展的登录界面。 首先,EasyUI的核心理念是“简单易用”。它为开发者提供了大量的预定义样式和插件,如表格、下拉菜单、按钮、对话框等,大大...

    easyui页面

    easyui页面模板,上传后以便自己日后查看参考

Global site tag (gtag.js) - Google Analytics