2017年3月3日星期五

Ajax请求阻塞渲染界面

   项目开发中我使用到的框架:bootstrap+SSM。我的需求是获得数据库里面的数据,按照时间归类做成二级菜单界面,如图:

   刚开始的实现方式是点击这个页面的url,跳转到对应的Controller,在Controller中不进行任何的数据库获取数据操作,直接return到这个页面,在这个过程中,利用ajax请求进行数据获取然后在js文件中进行数据的拼接展示。Ajax方法如图:

   实现之后遇到一个问题,看图:
浏览页面时竟然花了23s,我打印了数据分类花费的时间为1~2s,前台使用js进行拼接也不超过1s,用开发工具查看了资源加载的情况,发现加载其中一类流程时,从后台返回到前台的数据竟然有4.5MB,问题就是出现在这里。

  最后的解决办法直接用Sping MVC的ModelAndView携带数据返回到jsp页面直接渲染,取消这种糟糕的渲染方式。