前端工程师-高级WEB网站前端开发减少响应数据量指南

1、这次说说如何减少请求、响应的数据量(即在网络中传输的数据量)，减少传输的数据量不仅仅可以加快页面加载速度，更可以节约服务器带宽，为你剩不少钱(好像很多机房托管都是按流量算钱的).GZIP压缩gzip是目前前所有浏览器器都支持的一一种压缩格式式，IE6需需要SP1及及以上才支持持(别说你还还在用IE55,_)。gzipp可以说是最最方便而且也也是最大减少少响应数据量量的1种方法法。说它方便，是因因为你不需要要为它写任何何额外的代码码，只需要在在http服服务器上加上上配置都行了了，现在主流流的httpp服务器都支支持gzipp，各种服务务器的配置这这里就不一一一介绍(其实实是我不知道道怎么配)，

2、nginx的配配置可以参考考我这篇文章章：www.blogjjava.nnet/BeearRuii/archhive/22010/001/29/web_pperforrmancee_servver.httml我们先看看gzzip的压缩缩比率能达到到多少，这里里用jqueery 1.4.2的mmin和srrc2个版本本进行测试，使使用nginnx服务器，ggzip压缩缩级别使用的的是4：注意看上图的红红色部分，jjqueryy src文文件在启用ggzip后大大小减少了770%这张图片可以看看出就算是已已经压缩过mmin.jss在启用gzzip后大小小也减少了665%。别对图片启用ggzip在知

3、道了gziip强大的压压缩能力后，你你是否想对服服务器上的所所有文件启用用gzip了了，先让我们们看看图片中中启用gziip后会是什什么情况。hoho,1个个gif图片片经过gziip压缩后反反而变大了?这是因因为图片本来来就是一种压压缩格式，ggzip不能能再进行压缩缩，反而会添添加1些额外外的头部信息息，所以图片片会变大。在测试过程中，发发现jpg的的图片经过ggzip压缩缩后会变小,不知道为何何，可能跟图图片压缩方式式有关。不过过压缩比率也也比较小，所所以就算是jjpg，建议议也不要开启启gzip压压缩。比较适合启用ggzip压缩缩的文件有如如下这些：1. javaascrippt2.

4、CSS3. HTMLL，xml4、plainn textt别乱用cookkie现在几乎没有哪哪个网站不使使用cookkie了，可可是该怎么使使用cookkie比较合合适了，coookie有有几个重要的的属性:paath(路径径),dommain(域域),exppires(过期时间)。浏览器就就是根据这33个属性来判判断在发送请请求的时候是是否需要带上上这个coookie。cookie使使用最好的方方式，就是当当请求的资源源需要coookie的时时候才带上该该cookiie。其他任任何请求都不不带上coookie。但但事实上很多多人在使用ccookiee的时候已经经习惯性的设设置成：paath=

5、/ domaiin=.。这这样的结果就就是不管任何何请求都会带带上cookkie，就算算你是请求的的图片(immg.dommain.ccom)、静静态资源服务务器(ress.domaain.coom)这些根根本不需要ccookiee的资源，浏浏览器照样会会带上这些没没用的coookie。咱咱们一起来看看现实中的11个列子，博博客园()：先看看博客园的的cookiie是怎么设设置的,下面面是fireefox查看看博客园coookie的的截图：cnblogss总共有5个个cookiie值，而且且全部设置都都是 patth=/ ddomainn=.。知知道了coookie的设设置后，我们们再来监控下

6、下博客园首页页的请求，监监控的统计信信息如下：总请求数：399(其中图片片22个,JJS7个,ccss2个)。其中js、csss、imaage 主要要来自3个静静态资源服务务器: bloogs.coom , ,再看其中1个请请求图片(hhttp:/imagees/a4/banneer_jobb.gif)的请求头：Host bloogs.coomUser-Aggent MMozillla/5.00 (Winndows; U; WWindowws NT 5.2; en-USS; rv:) GGecko/201000401 FFirefoox/3.66.3 GTTBDFfff GTB77.0Acce

7、pt imagee/png,imagee/*;q=0.8,*/*;q=0.5Accept-Languuage zzh-cn,en-uss;q=0.7,en;q=0.33Accept-Encodding ggzip,ddeflatteAccept-Charsset ISSO-88559-1,uutf-8;q=0.77,*;q=0.7Keep-Allive 1115Proxy-CConnecction keep-aliveeRefererr httpp:/Cookie _gadds=ID=a15d77cb5c33413e556:T=112722778620:S=ALNNI_MZNNMr6_dd_P

8、CjggkJNJeeEQXkmmZ3bxTTQ; _utma=2265221935.169755664222.127222783666.127722783366.122722788366.11; _uutmb=22265211912722778366; _uttmc=22265219935; _utmzz=22655219355.127222783667.1.11.utmccsr=(ddirectt)|utmmccn=(direcct)|uttmcmd=(nonee)我们发现在请求求banneer_jobb.gif这这个图片的时时候，浏览器器把cnbllogs.ccom的所有有cookiie都

9、带上了了(其他图片片的请求都是是一样的)，我我估计博客园园在处理图片片的时候应该该不需要用到到cookiie吧?也许许你认为这几几个cookkie的大小小只有3000个字节左右右，无所谓啦啦。我们做个简单的的计算，假设设博客园每天天有50W个个PV(实际际情况应该不不止吧)，每每次PV大概概有15次请请求静态资源源，15*55000000*300/1024/1024=2145MM。也就说这这几个coookie每天天大概会耗费费博客园2GG的带宽。当当然这种简单单的计算方式式肯定会有偏偏差，毕竟我我们还没把静静态资源缓存存考虑进去。但但是个人觉得得要是博客园园要是把coookie的的domaii

10、n设置为会会更好一些。妙用204状态态http中2000,4044,500状状态大家都很很清楚，但2204状态大大家可能用的的比较少，2204状态是是指服务器成成功处理了客客户端请求，但但服务器无返返回内容。2204是HTTTP中数据据量最少的响响应状态，2204的响应应中没有boody，而且且Conteent-Leength=0。很多人人在使用ajjax提交一一些数据给服服务器，而不不需要服务器器返回的时候候，常常在服服务端使用下下面的代码：respoonse.ggetWriiter().prinnt()，这是返回回1个空白的的页面，是11个200请请求。它还是是有bodyy，而且Coontentt-Lenggth不会等等于0。其实实这个时候你你完全可以直直接返回1个个