记一复杂页面的前端优化(2) - 其他优化-阿里云开发者社区

开发者社区> 技术小甜> 正文

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

简介:
+关注继续查看

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

 

2010071317292919.jpg

 

下拉列表优化

  然后创建自己的输入框和弹出框。当页面只有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倍左右。











本文转自BearRui(AK-47)博客园博客,原文链接:  http://www.cnblogs.com/BearsTaR/archive/2010/07/16/Tally_Optimization2.html  ,如需转载请自行联系原作者



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
fbh
前端页面兼容性问题学习
2018.6.16 端午节开始笔记 说道前端页面兼容问题,首先应该了解,通过同一网站怎么判断打开用户是手机端还是pc端,这是前端页面兼容问题前提。
905 0
网站前端和后台性能优化14
让Ajax可以缓存 (Make Ajax Cacheable)
958 0
网站前端和后台性能优化15
更早的刷新缓冲区 (Flush the Buffer Early)
1004 0
网站前端和后台性能优化16
在Ajax请求中使用GET方法 (Use GET for AJAX Requests)
857 0
网站前端和后台性能优化20
分域部署部件:Split Components Across Domains
965 0
+关注
10146
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载