微服务架构 前后端交互优化 下篇

Web缓存优化

分析思考

• 什么是Web缓存，以及它有哪些类型
• 为何要使用Web缓存,它如何让请求更高效
• 基本理念：重验证、更新
• 工作机制、控制缓存和不缓存、主动/被动清除缓存

概述讲解

• web缓存 指发起请求客户端到执行功能的Web服务器之间用来保存服务器输出的副本、并提供给发起请求的客户端，其类型包括（浏览器缓存、CDN、反向代理服务器缓存如Varnish后续文章详细阐述）
• 使用Web缓存加快响应速度，提高用户满意度
• 减少服务端处理压力，以同样资源来支撑更大的访问量和高并发
• 通常存放缓存中的内容是有时效的，因此经常要对缓存中的内容做有效性检查，也称 “重验证”，更新目的为了保证缓存中内容和服务器中的内容保持一致
• 工作机制主要通过Http头部增加：Last-Modified,If-Modified-Since,Expires,Cache-Control等标识，可同服务器进行商定，以保证浏览器是否缓存
• 服务器端返回Http头部设置：Expires,Cache-Control:max-age,同时返回，max-age优先处理，如 response.setHeader(“Cache-Control”:“max-age=100”)

如图所示，浏览器自动缓存静态资源（css\js\img），缓存策略如Modified,If-Modified，并判断服务器文件是否改动，重验证
自动获取新的内容缓存
如js使用ajax获取后端数据，后端返回是可以设置header头部：如Last-Modified,那么客户端在下一次请求报文中会包含
“If-Modified-Since”,当服务端收到后，服务端会自动比较两个时间，若“Last-Modified” 更大，表明客户端缓存中内容已超时，
服务器会将最新的内容（新Header）返回客户端，状态为“200”，否则会认为客户端缓存中内容是最新的，返回客户端状态“304”
同时包含最新Header头部

参数讲解
response.setHeader(“Cache-Control”:“no-cache”),禁止缓存，浏览器可能会缓存，需要检查服务器一致
response.setHeader(“Cache-Control”:“no-store”)，禁止缓存，浏览器删除缓存内容
response.setDateHeader(“Expires”:-1) 过期时间
response.setDateHeader(“max-age”:0)，不缓存文档，每次访问缓存前检查

F5和Ctrl+F5刷新实现也有差异，F5让浏览器去执行一次一致性检查，而Ctrl+F5 删除本地缓存后再去执行一次一致性检查

静态资源更新如何主动通知浏览器缓存失效，解决思路

• 页面上使用ESI来动态引入
• 资源资源链接后加上“版本号”或者“？时间戳”，因为浏览器是按照url来缓存，更新后浏览器认为是新的地址，故重新加载一次
• 主动请求PURGE,让Varnish里面缓存这些资源内容失效，这样Varnish会重新获取内容，并将新内容返回客户端
• 客户端浏览器会发起新的请求，去重验证资源是否有更新，按照新的连接发出的，那么服务端没有连接对应的Etag，重新下载新的
  资源

Http请求加速

分析思考

• http如何加速，为什么可以加速
• http加速过程

概述讲解

通常会使用Varnish来让http加速，其原理是利用缓存来提高Web访问效率，见下图

外界流量F5/DNS/LVS请求流量进来后指定到Ngnix,部分动态内容和静态资源负载均衡反向代理到Varnish,其中配置VCL，指定相应需要缓存的地址，达到高效状态

在本地通过ab命令对比过以下场景

• 直接访问tomcat地址，ab 1000个并发，160/TPS
• 通过Nginx反向代理后，ab 1000个并发，170/TPS
• 直接访问到Varnish，ab 1000个并发，2300/TPS
• 通过Nginx反向代理到Varnish，ab 1000个并发，1300/TPS

由此可见 单使用Varnish效果最佳，如果小项目可以直接用Varnish代理，可达最佳效果，大型项目推荐使用Nginx+Varnish，因为Nginx负载均衡处理能力比Varnish高达10倍以上，Varnish优势在于让其Http加速

多请求优化

优化思路

连接请求并发送请求部分优化手段，内联在减少http请求数的同时，也会带来很多问题

• 没有浏览器缓存

• 没有边缘缓存 如CDN

• 没有按需加载

• 不能进行预加载

• 非常小的文件，而且使用地方很少，应该使用内联，超过4K文件不要内联

• 页面中图片（非CSS引用图片）尽量不要内联

• 谨慎内联css图片 8合理使用异步方式加载内容 如：使用图片延迟加载技术减少http请求数和并发数，同时减少下载数据量

• 对于AJAX请求单查询尽量使用GET方法，只需要一步，而POST请求要两步，但需要注意GET最大处理URL长度有限制

页面渲染优化

优化思路

• 尽量加快资源获取
• 尽量减少DOM节点
• 尽量减少渲染过程的中断和等待
• 尽量减少重绘
• 尽量避免回流

常见问题思考

• 脚本文件存放在页面顶部会引发问题，优化（存放底部）
  1.使用脚本时，对于位于脚本以下的内容，逐步呈现将被阻塞
  2.在下载脚本时会阻塞并行下载
  3.当脚本没有加载进来，用户触发了脚本事件，可能会出现JS错误问题

• 样式文件存放在页面底部会引发问题，优化（存放顶部）
  1.白屏
  2.无样式内容闪烁

• CSS尽量写在Head，不要出现在Body，否则会引起重新渲染

• iframe会导致重绘，尽量减少使用数量

• 避免不必要渲染，如 position:fixed 定位在滚动时候会不停渲染，hover特效，建议页面滚动时先取消效果，滚动停止后再加上hover效果。通过外层加类名进行控制，border:none而不是border:0，否则会渲染

总结：

前后端交互优化包括 （前后端数据传输压缩，Web缓存优化、HTTP请求加速、多请求优化、页面渲染优化）等，可根据系统现状分别进行优化，从而提高视图渲染，提高用户体验

作者简介：张程 技术研究

更多文章请关注微信公众号：zachary分解狮 (frankly0423)