下拉列表优化
然后创建自己的输入框和弹出框。当页面只有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请求了。
然后创建自己的输入框和弹出框。当页面只有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请求了。