如何减少请求次数

OSS请求次数是收费的。各位站长如果会一点编程的话,可以使用Combo Handler一类方法,减少文件请求次数。Combo Handler是Yahoo!开发的一个Apache模块,它实现了开发人员简单方便地通过URL来合并JavaScript和CSS文件,从而大大减少文件请求数。国内也有类似的实现,就是淘宝开源的Combo script工具。

先看看淘宝网首页meta里,多个js合并的声明语句:

js之间用英文逗号或&符号分隔。此src的Response是多个js文件的内容拼装。

淘宝的技术牛人李晶-拔赤在 h t t p s://github.com/jayli/combo 下发布了combo.php和minfy.php,能够做到合并文件(不压缩),以及合并且压缩。文件列表:
- combo.php 合并文件,不压缩
- minify.php 合并压缩文件
- cssmin.php 压缩css
- jsmin.php 压缩js
- cb.php

顺便说一下,阿里集团的CDN服务(阿里云正在规划推出我们的CDN服务供广大中小站长租用)是提供对Combo Handler的支持的。淘宝的CDN合并文件策略的模拟脚本使用:- 要求php5及以上版本- 程序在找不到本地文件的情况下,会去指定的cdn上找同名文件

- 程序会自动转义
-min文件为源文件,因此要约定-min文件和原文件要成对出现
- 需要定义combo.php和minify.php中的$YOUR_CDN变量
- 如果只是合并压缩local文件,则不必重置$YOUR_CDN变量
- 这里提供cb.php,用来实现tbcdn的开发环境的模拟,apache的配置在cb.php中
Re如何减少请求次数?
在使用amazon s3、 aliyun oss诸此云计算服务时,请求数是收费项目中的一项的(入流量不收费,转移到请求收费上来了)。虽然价格都不算贵,但是本着绿色地球、低碳环保的原则,我们哪怕没使用云服务时,自己租服务器,为了给服务器解压我们也得要在不影响网站逻辑的情况下尽量减少请求数。本文章简单的罗列了下WEB界大牛们常用的方法:
1. Combo Handler合并静态文件 如果有朋友仔细看过一些大型电商网站都会注意到,他们网站的每个页面的CSS/JS文件请求非常之少,是通过某些模块(诸如Yahoo!的combo handler、淘宝Tengine项目的Nginx concat模块)或人工合并的。这样做的目的是为了在不影响访问体验(网站功能不受损)的前提下减少请求的次数,为服务器节省了开销更增强了访问的速度体验,给访客带来更多“快感”。
2. Expires头和Cache-Control头 Expires头通常是用于指定文档的过期时间,而Cache-Control则是指定文件的生命。诸如Cache-control:max-age=86400是指所请求的文档将在一天后过期,也就是指若在一天之内的访问没有强制刷新,相同的请求都会直接调用本次请求的浏览器缓存,而不必重复请求,从而达到节省请求、带宽流量开销。
3. CSS Sprite(合并背景图) 合并网站的一些图片,并将标签显示图片的方式尽量转移到css background显示图片。比如一个网站,上面有1个LOGO,3个导航菜单元素,1个背景元素,一个按钮元素,如果不进行Sprite常规方式设计,在访问时这些元件就会产生5个请求的开销。但如果进行了合并就可以只开销1个请求,从而节省4个请求。
4. CSS 拒绝使用@import() 使用此语句固然方便,可以随便调用任何URL的CSS,但是造成的代价是访问时多出一个请求。所以从低碳环保的角度讲,慎用此类语句。
5. Ajax 使用缓存 别以为Ajax就不能缓存了。比如某博客,全部文章数据是Ajax调用的,如果不使用缓存,就会造成每次访问就至少开销二个请求(body页面一个,json一个)。而博客这类网站,内容更新不像某些社交网站那样频率,完全可以缓存住5到10分钟甚至更久。虽然是一个小小的优化,但是在生命周期内,访问同一篇文章只开销一次json的请求。
6. Ajax 请求合并 这个可能比较难理解,给亲举个小例子,同一页面上,有两处ajax重写的,一处用户中心ajax、一处是网站动态ajax。按平常的设计思路都是分开请求的,等于json数据要一个ajax请求一次。但通常这些都可以合并成一个ajax请求来完成的。
7. Front Layer Cache 前端也Cache 目前很多CDN服务商已经实现了。
8. 将小图置换用base64 data 一张200B的小图,要开销一个请求我感觉“不划算”。我通常的做法就是css sprite和base64 data。
9. 非动态效果叠加图层合并成一图层 举一个小小的例子,一个404页面上,有一张比较大的背景图(一个请求出去了),一个表情图(又一个请求出去了),而页面没特效(图层没移动效果),我们就完全可以把背景图片和表情图片合成一张(不是css sprint,而是ps拼合图层成页面显示的那种效果),达到减少请求的目的。
10. 权衡请求与流量的成本 一个页面,只有1K左右的JS代码,我通常就把JS插入到HTML里了。但当代码比较大时,插入到HTML 流量又有点不划算了(此时储存为JS文件可以方便地设置缓存头,减少重复请求的次数,而HTML通常没这么好整的了)。

  1. da shang
    donate-alipay
               donate-weixin weixinpay

发表评论↓↓