BearRui(AK-47) 的Blog

上一篇 "记一复杂页面的前端优化(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倍左右。