在web项目有一个性能测试原则:“二八原则”,也就是说:前端为八,后端为二。
所以性能优化,不仅仅在后端,前端的优化往往能起到立竿见影的效果。下面根据我的一些经验分两块说一下一些优化点。
前端性能优化
一、尽量减少前端HTTP请求
浏览器并发线程数有限,所以针对资源文件的优化,一般有:
1、合并脚本文件和CSS文件
2、css精灵图片整合
二、浏览器缓存
在用户浏览网站的不同页面时,很多内容是重复的,比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件,将大大降低页面产生的流量,从而降低页面载入时间。
1、添加Expires头和Cache-Control
Expires头,浏览器端根据过期时间选择是否加载最新的版本。缺点是:需要服务器和客户端时间的严格同步,
HTTP1.1引入了Cache-Control头来克服Expires头的限制。Cache-Control使用max-age制定组件被缓存多久,使用秒为单位,例如Cache-Control:max-age=3600;表示组件将被缓存60分钟。如果max-age和Expires同时出现,则max-age有更高的优先级,浏览器会根据max-age的时间来确认缓存过期时间。
2、Last-Modified
在上次传输中,服务器给浏览器发送了Last-Modified或Etag数据,再次浏览时浏览器将提交这些数据到服务器,验证本地版本是否最新的,如果为最新的则服务器返回304代码,告诉浏览器直接使用本地版本,否则下载新版本。一般来说,有且只有静态文件,服务器端才会给出这些数据
三、页面压缩
1、GZIP
IE和Firefox浏览器都支持GZIP解码。后端服务器容器对数据GZIP压缩之后在传输到客户端,浏览器拿到数据后根据 Content-Encoding:gzip 进行解压,这样虽然稍微占用了一些服务器和客户端的CPU,但是换来的是更高的带宽利用率。对于纯文本来讲,压缩率是相当可观的。
2,HTML压缩
3,JS压缩 混淆
4,CSS压缩
5,图片压缩,展示尺寸和图片尺寸吻合
四、HTML代码结构优化
1,正确布置行内脚本
2,少用iframe
3,减少DOM结构的层级
4,减少Cookie的大小
5,尽量用div取代table,或者将table打破成嵌套层次深的结构
五、组件分成多个域
六、图片懒加载
七、图片,脚本,数据 预加载
八、图片base64
前端优化可以避免我们造成无谓的服务器和带宽资源浪费,但随着网站访问量的增加,仅靠前端优化已经不能解决所有问题了,后端程序处理并发请求的能力、程序运行的效率、硬件性能以及系统的可扩展性,将成为影响网站性能和稳定的关键瓶颈所在。
后端性能优化
评价指标:
一般有下面几个:
1、吞吐率:单位时间内服务器处理的请求次数(requests per second)
2、用户平均请求等待时间:每个用户发起一次请求->得到回应的耗时
3、服务器平均请求处理时间:服务器处理一条请求的耗时
4、系统负载:一般包括CPU使用率、CPU Load、内存使用情况、磁盘I/O、网络I/O等