资源描述:
《前端工程师-高级web网站前端开发减少响应数据量指南》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、这次说说如何减少请求、响应的数据量(即在网络中传输的数据量),减少传输的数据量不仅仅可以加快页面加载速度,更可以节约服务器带宽,为你剩不少钱(好像很多机房托管都是按流量算钱的).GZIP压缩gzip是目前所有浏览器都支持的一种压缩格式,IE6需要SP1及以上才支持(别说你还在用IE5,~_~)。gzip可以说是最方便而且也是最大减少响应数据量的1种方法。说它方便,是因为你不需要为它写任何额外的代码,只需要在http服务器上加上配置都行了,现在主流的http服务器都支持gzip,各种服务器的配置这里就不一一介绍(其实是我不知道怎么配),nginx
2、的配置可以参考我这篇文章:www.blogjava.net/BearRui/archive/2010/01/29/web_performance_server.html我们先看看gzip的压缩比率能达到多少,这里用jquery1.4.2的min和src2个版本进行测试,使用nginx服务器,gzip压缩级别使用的是4:注意看上图的红色部分,jquerysrc文件在启用gzip后大小减少了70%这张图片可以看出就算是已经压缩过min.js在启用gzip后大小也减少了65%。别对图片启用gzip在知道了gzip强大的压缩能力后,你是否想对服务器上的
3、所有文件启用gzip了,先让我们看看图片中启用gzip后会是什么情况。hoho,1个gif图片经过gzip压缩后反而变大了???这是因为图片本来就是一种压缩格式,gzip不能再进行压缩,反而会添加1些额外的头部信息,所以图片会变大。在测试过程中,发现jpg的图片经过gzip压缩后会变小,不知道为何,可能跟图片压缩方式有关。不过压缩比率也比较小,所以就算是jpg,建议也不要开启gzip压缩。比较适合启用gzip压缩的文件有如下这些:1.javascript2.CSS3.HTML,xml4、plaintext别乱用cookie现在几乎没有哪个网站不
4、使用cookie了,可是该怎么使用cookie比较合适了,cookie有几个重要的属性:path(路径),domain(域),expires(过期时间)。浏览器就是根据这3个属性来判断在发送请求的时候是否需要带上这个cookie。cookie使用最好的方式,就是当请求的资源需要cookie的时候才带上该cookie。其他任何请求都不带上cookie。但事实上很多人在使用cookie的时候已经习惯性的设置成:path=/domain=.domain.com。这样的结果就是不管任何请求都会带上cookie,就算你是请求的图片(img.domain.
5、com)、静态资源服务器(res.domain.com)这些根本不需要cookie的资源,浏览器照样会带上这些没用的cookie。咱们一起来看现实中的1个列子,博客园(www.cnblogs.com):先看看博客园的cookie是怎么设置的,下面是firefox查看博客园cookie的截图:cnblogs总共有5个cookie值,而且全部设置都是path=/domain=.cnblogs.com。知道了cookie的设置后,我们再来监控下博客园首页的请求,监控的统计信息如下:总请求数:39(其中图片22个,JS7个,css2个)。其中js、cs
6、s、image主要来自3个静态资源服务器:common.cnblogs.com,pic.cnblogs.com,static.cnblogs.com再看其中1个请求图片(http://static.cnblogs.com/images/a4/banner_job.gif)的请求头:Hoststatic.cnblogs.comUser-AgentMozilla/5.0(Windows;U;WindowsNT5.2;en-US;rv:1.9.2.3)Gecko/20100401Firefox/3.6.3GTBDFffGTB7.0Acceptimag
7、e/png,image/*;q=0.8,*/*;q=0.5Accept-Languagezh-cn,en-us;q=0.7,en;q=0.3Accept-Encodinggzip,deflateAccept-CharsetISO-8859-1,utf-8;q=0.7,*;q=0.7Keep-Alive115Proxy-Connectionkeep-aliveRefererhttp://www.cnblogs.com/Cookie__gads=ID=a15d7cb5c3413e56:T=1272278620:S=ALNI_MZNMr6_d_PCj
8、gkJNJeEQXkmZ3bxTQ;__utma=226521935.1697566422.1272278366.1272278366.1272278