架构优化之高性能:web前端性能优化,静态资源缓存,文件压缩

web前端性能优化

内容主要来自阿里架构一书。自己总结以及进行实践

一.浏览器访问优化

1.减少http请求

合并css,合并JS,合并图片:图片也可以进行合并,多张图片合并成一张,

现在的浏览器会自动的复用tcp链接,不会刚用完就关闭

2.设置使用浏览器缓存

静态资源(如何设置?可以考虑静态资源统一通过一个过滤器,然后设置缓存时间)

在设置返回静态资源的时候,缓存一定的时间。几天,几个月等。更新了静态资源的时候,直接更换静态资源的路径名字即可。

实现方式:

在返回静态资源的response header中,设置缓存的时间为xxx

springmvc设置为:

在springmvc的配置文件中,设置cache-period,单位为分钟数

<mvc:resources location="/, /WEB-INF/web-resources/"

mapping="/resources/**" cache-period="1"/>

1

2

效果:第一次请求,请求状态为200,第二次以及以后,请求状态为304

第一次访问 200

按F5刷新(第二次访问) 304

按Ctrl+F5强制刷新 200

架构优化之高性能:web前端性能优化,静态资源缓存,文件压缩

架构优化之高性能:web前端性能优化,静态资源缓存,文件压缩

架构优化之高性能:web前端性能优化,静态资源缓存,文件压缩

3.启用压缩

在服务端对文件进行压缩。在浏览器端对文件解压缩。文本文件的压缩效率可以达到80%以上。

因此HTML,CSS,javaScript文件启用GZip压缩可以达到较好的效果。

但是压缩会对服务器和浏览器产生一定的压力,在通信带宽良好,而服务器资源不足的情况下要权衡考虑

这里参考:http://www.cnblogs.com/DDgougou/p/8675504.html

tomcat中配置方法

版本要求:Tomcat5.0以上。 修改%TOMCAT_HOME%/conf/server.xml,修订节点如下:

<Connector port="8080"

protocol="HTTP/1.1"

connectionTimeout="20000"

redirectPort="8443"

compression="on"

compressionMinSize="2048"

noCompressionUserAgents="gozilla, traviata"

compressableMimeType="text/html,text/xml,text/javascript,

application/javascript,text/css,text/plain,text/json"/>

1

2

3

4

5

6

7

8

9

参数说明:

1、compression=“on” 开启压缩。可选值:"on"开启,"off"关闭,"force"任何情况都开启。

2、compressionMinSize="2048"大于2KB的文件才进行压缩。用于指定压缩的最小数据大小,单位B,默认2048B。注意此值的大小,如果配置不合理,产生的后果是小文件压缩后反而变大了,达不到预想的效果。

3、noCompressionUserAgents=“gozilla, traviata”,对于这两种浏览器,不进行压缩(我也不知道这两种浏览器是啥,百度上没找到),其值为正则表达式,匹配的UA将不会被压缩,默认空。

4、compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,text/json"会被压缩的MIME类型列表,多个逗号隔,表明支持html、xml、js、css、json等文件格式的压缩(plain为无格式的,但对于具体是什么,我比较概念模糊)。compressableMimeType很重要,它用来告知tomcat要对哪一种文件进行压缩,如果类型指定错误了,肯定是无法压缩的。那么,如何知道要压缩的文件类型呢?可以通过以下这种方法找到。

实践结果,开启压缩。

架构优化之高性能:web前端性能优化,静态资源缓存,文件压缩

架构优化之高性能:web前端性能优化,静态资源缓存,文件压缩

架构优化之高性能:web前端性能优化,静态资源缓存,文件压缩

不开启压缩:

通过上面开启和不开启压缩的对比,可以很明显的看出,文件缩小了5倍左右。

4.CSS放在页面的最上面,javaScript放在页面最下面

浏览器下载完全部的CSS之后才会对整个页面进行渲染。

而浏览器加载到javaScript就会立即执行,有可能阻塞整个页面。

5.减少cookie传输

二.CDN加速

内容分发网络

1

三.反向代理

---------------------

作者:y41992910

原文:https://blog.csdn.net/y41992910/article/details/84952001

相关推荐