架构优化之高性能：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"/>

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

第一次访问 200

按F5刷新（第二次访问） 304

按Ctrl+F5强制刷新 200

架构优化之高性能：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、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前端性能优化，静态资源缓存，文件压缩