架构优化之高性能：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
在这里插入图片描述

在这里插入图片描述

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要对哪一种文件进行压缩，如果类型指定错误了，肯定是无法压缩的。那么，如何知道要压缩的文件类型呢？可以通过以下这种方法找到。

实践结果，开启压缩。
在这里插入图片描述

在这里插入图片描述

不开启压缩：
在这里插入图片描述

在这里插入图片描述

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

4.CSS放在页面的最上面，javaScript放在页面最下面
浏览器下载完全部的CSS之后才会对整个页面进行渲染。
而浏览器加载到javaScript就会立即执行，有可能阻塞整个页面。

5.减少cookie传输

二.CDN加速

内容分发网络

三.反向代理

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

猜你喜欢