posts - 36, comments - 419, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

记一复杂页面的前端优化(2) - 其他优化

Posted on 2010-07-20 15:54 BearRui(AK-47) 阅读(2056) 评论(0)  编辑  收藏 所属分类: WEB

上一篇 "记一复杂页面的前端优化(1) - 不一样的延迟加载", 说了下对弹出窗口的优化,接下来说说其他的优化,先把界面图贴出来,方便对照:

 

 

下拉列表优化

然后创建自己的输入框和弹出框。当页面只有1,2个select的时候,没发现有什么问题,但当页面出现7,8个select的时候,熏染速度明显慢了很多,可以看着1个个select变成input,主要原因还是js执行的太多了(动态生成html,绑定事件)等等。这个是影响页面渲染速度的1个大问题,所以第一个要解决的就是这个select。因原始的select外观是在是不行,而且又不能修改样式,所以我们选择了1个jquery的selectbox插件,该插件的实现原理:在页面加载完毕后,隐藏原始的select,然后创建自己的输入框和弹出框。当页面只有1,2个select的时候,没发现有什么问题,但当页面出现7,8个select的时候,熏染速度明显慢了很多,可以看着1个个select变成input.主要原因还是js执行的太多了(动态生成html,绑定事件)等等。这个是影响页面渲染速度的1个大问题,所以第一个要解决的就是这个select。

 

目前的解决方案是服务器端和js结合使用,通过jsp的标签(net应该叫自定义控件)生成html代码,并不生成任何js来绑定事件,而且当用户第一次点击input的时候,才绑定所有事件,弹出下拉窗口。这样就完全解决了渲染的问题,因为不需要js来生成html,也不需要页面加载的时候去绑定所有事件。

 

右下的数据列表延迟加载

右下方的数据列表,默认只显示基本信息,当用户点击的时候才展开详细信息,一般用户只有在编辑和删除的时候才会用到详细信息,大部分情况可能不会用编辑和删除,也就不需要展开详细信息。之前的做法就是在加载列表的时候就把详细信息的html都生成好,只是隐藏一下,所以加载列表就比较慢。把详细信息改成延迟加载,当用户单击某行数据,才去生成对应的详细信息html代码,并展开显示。

 

png图片转gif

这个页面用了很多PNG图片,比如收入、支出的图标,左边分类的图片,选择框的图标。而png图片在ie6下要做单独处理,为了提高性能,跟设计师商量后,把一些图片转成gif的。虽然gif的转了后效果没PNG的好看,但还可以接受,而且也是透明的,于是就通过CSS HACK,让在IE6下使用gif图片,在其他浏览器下使用png图片。这样就可以提高IE6下的速度,而又不用降低其他浏览器的界面效果。

 

延迟执行ajax

左边每个分类前面有个选择框,当用户选择(或去掉选择)某个分类的时候,都会引发ajax刷新右边的数据列表。这里就可能出现这种情况,比如用户想选择3个分类查看,需要点击3次选择,之前的做法,每次点击都会触发一次ajax,这样就触发了3个ajax了,其实对于用户来说,只有最后一次ajax是有用的,前面2次不但浪费资源,而且影响性能。当然你可能会想到我们可以abort前面的ajax请求,但要注意abort只是abort客户端的执行,服务器端还是会接收到请求并执行完毕。于是对这个ajax做了个延迟,每次点击后延迟0.5秒执行,如果用户在0.5秒内再一次点击,则取消之前的ajax。这样就可以避免一些不必要的ajax请求了。

 

后语

今天这篇文章只是介绍优化的方法,并没写任何代码,个人觉的这种方法不需要写代码,大家一看应该就知道。

 

该页面中经过这些优化后,页面总的加载速度(包括资源下载、解析、执行、页面呈现)提高了3倍左右。

 

目前的解决方案是服务器端和js结合使用,通过jsp的标签(net应该叫自定义控件)生成html代码,并不生成任何js来绑定事件,而且当用户第一次点击input的时候,才绑定所有事件,弹出下拉窗口。
这样就完全解决了渲染的问题,因为不需要js来生成html,也不需要页面加载的时候去绑定所有事件。目前的解决方案是服务器端和js结合使用,通过jsp的标签(net应该叫自定义控件)生成html代码,并不生成任何js来绑定事件,而且当用户第一次点击input的时候,才绑定所有事件,弹出下拉窗口。这样就完全解决了渲染的问题,因为不需要js来生成html,也不需要页面加载的时候去绑定所有事件。


[作者]:BearRui(AK-47)
[博客]: http://www.blogjava.net/bearrui/
[声明]:本博所有文章版权归作者所有(除特殊说明以外),转载请注明出处.
英雄,别走啊,帮哥评论下:  

精彩推荐 好文要顶 水平一般 看不懂 还需努力

只有注册用户登录后才能发表评论。


网站导航: