springboot内置tomcat方式加载前端，操作访问优化记录

操作背景：

        由于平台部署方式是通过jenkins自动打包，将前端静态资源文件拷贝到后台META-INF的resource目录中使用。使用中发现统计报告和主要界面的操作不够流程，且肉眼可察觉的加载缓慢，控制台监控资源页面加载，发现如下问题（如下为优化前截图）：

---

问题分析

问题1：静态资源每次请求都会重新加载一遍，而且耗时较长，整体约4.27秒左右，整体拖长了页面接在速度。

问题2：如index.js和echars.min.js即使经过压缩，仍旧很大约1.1MB左右，占用大量网络带宽

问题3：最后的favicon.ico文件发现大小竟然高达262KB，且加载耗时342ms

---

优化点记录 

优化1：先检查前端文件，查界面结构布局，发现javascript文件的加载放到body的后面，位置不需要修改，前后有加载顺序，

优化2：是否可以存在不实用的冗余引入，删掉之

优化3：前端为啥不缓存？每次加载为啥不会重复从本地浏览器读取，经过对比发现，系springboot的yml配置文件里需要对响应缓存头进行设置，可能引用技术平台core包引起强制不缓存。如下图是没加缓存控制的请求响应头信息。

no-cache,no-store,max-age=0,must-revalidate 这几个参数是响应告知请求方，不要用缓存，强制更新，没戏重头来。那岂不是带来大量无效请求，从后台入手分析，看看哪些参数控制，添加如下设置：更多参数请参考资源：http://t.csdn.cn/WEaY5

#增加参数：
spring.resources.cache.cachecontrol.max-age: 1800
spring.resources.cache.cachecontrol.cache-public: true

添加完重启，重复刷新，发现已经缓存。 点开其中请求，响应头有资源超时时间了：

优化4：通过加缓存，极大地缩短了二次加载静态资源耗时，页面二次加载的速度秒开。但是首次仍旧需要加载下载资源2-3秒左右，考虑开启静态资源gzip压缩，节省网络传输字节数，从而节省时间：从springboot的配置文件入手，找到如下位置： 

 配置如下：

server.compression.enable: true #开启资源压缩操作
server.compression.min-response-size: 1024 #响应内容的最小长度，达到即进行压缩，不带单位默认字节B
server.compression.mime-types: application/javascript, text/css,text/javascript #需要压缩的资源类型，逗号分割

 配置完重启，再看看效果：原来1MB的资源意压缩到2-300kb左右，加载时间不足秒。

第二次刷新，使用缓存：网络传输仅10.7kb，整体加载时间1.05s，主要耗时大头在DOM树加载中934ms 

 压缩成功标记，请求响应头中有如下信息：Content-encoding: gzip Axxept-Encoding: gzip,deflate；

 优化5：favicon.ico建议替换10kb以下图片，耗时不影响整体页面加载，根据情况自行替换即可。

 优化前：262kb，214ms

优化后：7.4kb，70ms

 其他优化点持续总结。。。

 参考文章：