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

港控/mmm° 2022-04-05 06:24 337阅读 0赞

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  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0MTk5MjkxMA_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0MTk5MjkxMA_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][201812111109322.jpg]

3.启用压缩  
在服务端对文件进行压缩。在浏览器端对文件解压缩。文本文件的压缩效率可以达到80%以上。  
因此HTML,CSS,javaScript文件启用GZip压缩可以达到较好的效果。  
但是压缩会对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑

这里参考：[http://www.cnblogs.com/DDgougou/p/8675504.html][http_www.cnblogs.com_DDgougou_p_8675504.html]  
tomcat中配置方法  
版本要求：Tomcat5.0以上。 修改%TOMCAT\_HOME%/conf/server.xml，修订节点如下：

参数说明：

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

实践结果，开启压缩。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0MTk5MjkxMA_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0MTk5MjkxMA_size_16_color_FFFFFF_t_70 3]

不开启压缩：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0MTk5MjkxMA_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0MTk5MjkxMA_size_16_color_FFFFFF_t_70 5]

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

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

5.减少cookie传输

二.CDN加速

内容分发网络

三.反向代理

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0MTk5MjkxMA_size_16_color_FFFFFF_t_70]: /images/20220405/0c5cef9646ef44dbbaabbcab34a9396a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0MTk5MjkxMA_size_16_color_FFFFFF_t_70 1]: /images/20220405/d7d45796f7bf4797be71bc2a694ff601.png
[201812111109322.jpg]: /images/20220405/5d37accfcf0f467091c6a908adf9694d.png
[http_www.cnblogs.com_DDgougou_p_8675504.html]: http://www.cnblogs.com/DDgougou/p/8675504.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0MTk5MjkxMA_size_16_color_FFFFFF_t_70 2]: /images/20220405/9c6e0e23e69444148f910c80a004ef84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0MTk5MjkxMA_size_16_color_FFFFFF_t_70 3]: /images/20220405/baa047d9a7b74a338fa86a67f285c4df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0MTk5MjkxMA_size_16_color_FFFFFF_t_70 4]: /images/20220405/5d0803313c134f6a99bb3364b3206dce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3k0MTk5MjkxMA_size_16_color_FFFFFF_t_70 5]: /images/20220405/8982c4de383b42dab2f125b7587721f3.png