小心错误使用EasyUI 让网站性能减半

小心错误使用EasyUI 让网站性能减半

     背景：

          最近接手了公司一个做了小一年的项目—高校教务基础系统，先不谈需求，和系统架构，直接上来就被抛来了一个问题----基础性能太差了，一个网页打开要好几秒。我了个天，我听了也简直不敢相信，难道是数据量特别大？还是其中业务逻辑特别复杂？

         简单的介绍下，基础系统是我们整个高校云平台里一个子系统，整个平台用EJB来实现分布式，并且管理事务，系统内使用springMvc+spring+hibernate具体实现。由于不知道系统性能差到底出错在哪里，于是我们便首先从EJB入手，测试远程调用，然后进入JVM检测内存，接着对框架整体分析，业务逻辑整合分析，来来回回半个月，都没有找到问题所在。后台排查完了，只剩下前台（前台功力不够啊。），原来以为不可能出问题的前台，却是整个系统性能差的根源。

         通过浏览器F12中的network我们可以清楚的看到一个简单的页面加载的时候不同模块消耗的时间等如下图：

         看到这个图的时候我也惊呆了，怎么可能单个请求发送了三次？难道是业务需要?---都不是，是因为easyui datagrid 的使用不当，大家请看下面的代码：

         Easyuidatagrid html代码：

         给datagrid添加右击和双击操作代码：

        

     原因推测：

页面加载的时候浏览器解析网页内容，这个时候url中的query请求发送一次，当浏览器解析到下面的js代码的时候，通过id选择器获得了datagrid这个时候浏览器再次解析datagrid，datagrid中存在url所以请求就被再次发送，两次添加方法额外多访问了两次。后来我又查看了其他的页面，发现几乎所有页面都是这么写的，导致页面加载额外访问多次（如果页面加载有3个请求，这样错误做出来就不得不访问9次。。。）。

     解决办法：

         Easyui的datagrid加载有两种方式，一种是通过js来加载，另一种是通过htmll来加载。上述错误应该是错误的将两种方式混合使用导致的。所以解决办法很简单，只要去除其中一种，只用一种加载方式即可。

         1：全部改用js加载。（大家可以自行查看easyuiapi）

         2：全部用html来写：

     总结：

                   在没有对一个东西有了全面深入的了解的时候，不要着急否认它，多看看行业内其他人的使用或者理解，很多时候我们觉得一个东西有问题，很肯能是我们还不够了解，其实，有问题的是我们自己啊。