问题描述:
服务器慢:打开页面慢、机房报说带宽用尽。
试了下,使用Chrome打开站点首页,发现并不是响应慢,而是传输时间长,130+个请求,我这里可是100M的带宽,完全打开页面用了30+秒,再看 一下数据量,居然是4M+,看一个页面等于下载一个软件了,按Size排序,排第一的居然是一张500K+的图片,后面的都是 200-300k+的不等有7、8个,还有一堆100+K的。
另外DOM的加载时间用了3秒+
可以确定主要问题:前端设计中图片相关处理不合理的结果。
关于前端图片相关解决方案:
1、 可以使用文字和样式解决的界面不要使用图片
2、用户上传图片必须在后端压缩才能显示在前端(这个要求比较基础吧)
3、非用户上传图片(如广告)先用软件压缩再传
4、 图标可以集中存放在一张图片上,通过样式background设置偏移得到对应图片
前3点是减少流量(因为JPEG本身就是压缩格式,是没办法再压的),第4点是有效减少请求数。其中第四点的重要性这里有必要解释一下:
1、浏览器对单一域名并发请求数是有限制的,基本都是2-3个,老的甚至只能一个请求,这样的话用户不得不一个个等待,后面的请求都处于阻塞状态(当然可以通过使用多个域名或CDN来增加下载的并发,这就超越本文内容了)
2、请求-响应需要额外的时间开销。当请求多了,请求-响应占用时间的比例就会变大,当然可以通过设置Web服务器keep-alive使一个连接来响应多个请求(要使用http 1.1协议),但还是有时间限制的,一般不会超过3秒吧(最少我是这样设置的)
3、能减少请求/响应头信息,如Cookie,User-Agent,Host等信息。其中特别是请求头,是属于上传,在一网络传输过程中,上传带宽远比 下载带宽少得多,一般没有1/4,假设这些信息长度为4k,在一次页面访问中有100个请求,那就要传输4k x 100 = 400K的数据了,对于有一定访问量的站点来说,这数字可不是小数目
服务器(apache + nginx)相关设置:
1)、Nginx用于响应静态文件,如图片,CSS,JS等,动态脚本请求转发给Apache处理
2)、Nginx打开gzip,Apache打开 deflate模块,用于压缩输出文本
3)、Nginx使用ETag,告诉浏览器来缓存图片文件
说明:
Nginx处理静态文件的能力远比Apache要强,同时转发能力也是Nginx强项,另外由于Nginx的简单设计,使 得他非常的健壮。至于使用Apache嘛,强大的功能不用解释了,而且使用module的方式执行PHP非常的稳定(目前PHP以fastcgi方式运行,速度确实提高不少)。