注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

小葫芦君(汉斯的博客)

博客迁移到新博客:https://blog.ssxingshou.com

 
 
 

日志

 
 
关于我

小小葫芦商城,为您提供高品质的商品,一流的产品,一流的包装服务,一流的物流服务,放心购买

网易考拉推荐

互联网应用性能优化实践  

2012-05-10 13:31:23|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
一、页面性能优化(js、css,http请求等)

1》、推迟加载内容:
图片的延迟加载,使用lazyload插件
插件下载地址:
http://www.appelsiini.net/projects/lazyload
插件使用方法:
$(".main img").lazyload({
    placeholder : "img/grey.gif",
    effect : "fadeIn"
});
表示对.main下面的所有img进行延迟加载效果,还可以使用事件触发event : "click",鼠标点击、移过的时候进行ajax加载图片

2》、尽可能少的http请求
主要包括的有js请求、css请求和css中的背景图片的
CSS background images请求
I、js和css
可以通过特殊的办法进行合并,比如minify、淘宝开源的tengine服务器(修改自ngnix,淘宝目前已经开源:http://tengine.taobao.org/)。
II、
可以把图片合并成一个相对比较大的图片,通过css进行调用。

3》、使用CDN,
CDN的全称是Content Delivery Network,即内容分发网络。
其目的是通过在现有的Internet中增加一层新的网络架构,将网 站的内容发布到最接近用户的网络”边缘”,使用户可 以就近取得所需的内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均 等原因所造成的用户访问网站响应速度慢的问题。

4》、置过期的HTTP Header。(不建议使用此条)
设置Expires Header可以将脚本, 样式表, 图片, Flash等缓存在浏览器的Cache中。
一般是不建议做缓存的,
因为这样会对我们以后查找问题的所在和增加难度。

5》、对页面内容进行Gzip格式的压缩,压缩比率为85%。

6》、
把CSS外部链接放到页面的顶部,不能把CSS外部链接作为逻辑的一部分出现在页面头部以下,这样会影响页面加载性能。

7》、
把Javascript脚本尽量放到页面底部加载。一定要记得先让css加载,再加载js,因为很多js操作的dom都是跟css有关的,这里有个先后顺序的问题。

8》、实现最大的并行下载,使用不同的域名来发起js、css、img等静态文件的请求。外加一个iframe访问的other域名,注意跨域脚本问题。

9》、
避免CSS表达式,在CSS中运行表达式和页面加载中运行大量的JS脚本差不多,或许还更慢,而且还不兼容,虽然可以使我们在页面逻辑简单不少,但是我们完全可以抛弃之。

10》、尽可能少的DNS查找。一般不要超过4个,一般看业务情况了。

11》、跟上面第2条一致,
使用minify对js代码进行压缩。java工具有yuicompressor。虽然实现了JS压缩,但是给我们自己的维护量增加了一倍,因为我们需要维护2套JS脚本,一套是压缩前的(调试用的),一套是压缩后(发布到网上的),而且要保证2套代码一致。所以最完美的做法是 在发布的时候实现JS脚本合并,并对其用yuicompressor进行压缩,然后发布到晚上,把关键点移到发布的时候,这样我们只需要关心一套JS脚本 (发布前的版本)。minify可做到,tengine服务器也能做到请求时合并。

12》、
避免重定向(跳转)。不使用3s后跳转的功能,直接跳转到该去的页面即可。加URL链接的时候,别忘了把最后的/加上,因为这样可以减少一次的重定向跳转。

13》、
去除重复的js脚本。尽量的多个页面重用js。

14》、关闭Last-Modified和ETag。把web服务器的这2个配置关闭。

15》、使用GET来完成AJAX请求
当使用XMLHttpRequest时,浏览器中的POST方法是一个“两步走”的过程:首先发送文件头,然后才发送数据。因此使用GET最为恰当,因为它只需发送一个TCP包(除非你有很多cookie)。IE中URL的最大长度为2K,因此如果你要发送一个超过2K的数据时就不能使用GET了。一个有趣的不同就是POST并不像GET那样实际发送数据。根据HTTP规范,GET意味着“获取”数据,因此当你仅仅获取数据时使用GET更加有意义(从语意上讲也是如此),相反,发送并在服务端保存数据时使用POST。

16》、尽量少在页面ui中写js和css,使用抽取出来放在外部的JavaScript和CSS。

17》、减少DOM访问,通过jquery去访问dom要特别注意这点,比较耗性能。一般对初始化起的作用比较大,这时应该考虑的多点。

18》、减小Cookie体积。

19》、压缩、优化图片,这个可以使用imagemagick的组件,先对按比例输出的图片进行高清压缩处理。
I、可以检查一下你的GIF图片中图像颜色的数量是否和调色板规格一致。imagemagick命令:identify -verbose image.gif
II、尝试把GIF格式转换成PNG格式,看看是否节省空间。大多数情况下是可以压缩的。
III、在所有的PNG图片上运行pngcrush(或者其它PNG优化工具)。
例如:pngcrush image.png -rem alla -reduce -brute result.png
IIII、在所有的 JPEG图片上运行jpegtran。这个工具可以对图片中的出现的锯齿等做无损操作,同时它还可以用于优化和清除图片中的注释以及其它无用信息(如 EXIF信息):jpegtran -copy none -optimize -perfect src.jpg dest.jpg

20》、优化CSS Spirite。
在Spirite中水平排列你的图片,垂直排列会稍稍增加文件大小;
Spirite 中把颜色较近的组合在一起可以降低颜色数,理想状况是低于256色以便适用PNG8格式;
便于移动,不要在Spirite的图像中间留有较大空隙。这虽然不大会增加文件大小但对于用户代理来说它需要更少的内存来把图片解压为像素地图。100x100的图片为1万像素,而 1000x1000就是100万像素。

21》、不要在HTML中缩放图像。
不要为了在HTML中设置长宽而使用比实际需要大的图片。如果你需要:
<img width="100" height="100" src="http://xxx.blog.163.com/blog/mycat.jpg" alt="My Cat" />
那么你的图片(mycat.jpg)就应该是100x100像素而不是把一个500x500像素的图片缩小使用。

22》、favicon.ico要小而且可缓存。
avicon.ico是位于服务器根目录下的一个图片文件。它是必定存在的,因为即使你不关心它是否有用,浏览器也会对它发出请求,因此最好不要返回一个404 Not Found的响应。由于是在同一台服务器上,它每被请求一次coockie就会被发送一次。这个图片文件还会影响下载顺序,例如在IE中当你在 onload中请求额外的文件时,favicon会在这些额外内容被加载前下载。
因此,为了减少favicon.ico带来的弊端,要做到:
I、文件尽量地小,最好小于1K
II、在适当的时候(也就是你不要打算再换 favicon.ico的时候,因为更换新文件时不能对它进行重命名)为它设置Expires文件头。你可以很安全地把Expires文件头设置为未来的几个月。你可以通过核对当前favicon.ico的上次编辑时间来作出判断。
Imagemagick可以帮你创建小巧的 favicon。

二、后端性能优化(包括搜索服务、中心核心业务服务、消息服务、缓存服务、DB服务、集群服务、监控服务等)

。。。有空再写
  评论这张
 
阅读(794)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017