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

baacloud免费翻墙vpn注册使用

[转载]记一复杂页面的前端优化(2) – 其他优化 – BearRui(AK-47) – 博客园.

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

下拉列表优化

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

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏