(原创)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"  属性删除即可