长沙手机网站建设,wordpress 宠物,建设端午节网站的目的主题,威海建设网站背景
在公司参与了一个做度量统计的项目#xff0c;该项目的特点是页面上的表格、卡片、图标非常多。项目经常出现一种情况#xff1a;页面加载速度较慢#xff0c;开始怀疑是由于计算量较大#xff0c;后端接口相应速度较慢。优化了一版后端接口后#xff08;加缓存、优…背景
在公司参与了一个做度量统计的项目该项目的特点是页面上的表格、卡片、图标非常多。项目经常出现一种情况页面加载速度较慢开始怀疑是由于计算量较大后端接口相应速度较慢。优化了一版后端接口后加缓存、优化SQL发现有时接口的相应速度还是很慢有的接口能达到3秒多严重影响了用户体验。
问题排查
页面加载速度太慢严重影响了用户体验因此必须要解决这个问题。
开始的时候怀疑是后端接口问题因此针对一些计算量确实很大的接口对热点数据加了缓存。理论上来说加了缓存后接口速度应该在100ms以内就可以返回但是实际在页面上查看接口返回时间时发现接口的返回时间有时还是会到3秒左右这种情况就存在问题了。
针对单一接口我使用postman发起调用发现无法复现该问题只有在前端页面上请求才会存在返回时间超过3秒的情况。因此我们开始使用Chrome浏览器提供的工具查看这些耗时较多的接口由于公司数据不可外泄因此在博客里面我就直接使用公开的报表页面进行排查演示。 从该页面中选取了一个接口进行测试点击Chrome浏览器的调试按钮查看网络面板中的时间数据整个接口的耗时如上图所示。
简单解释一下该接口整体的响应时间为281.47ms其中Stalled时间占用了169.84ms的时间获取后端接口数据的时间为111.63ms。其中111.63ms可以理解为后端接口的真实响应时间但是stalled的这段时间是干什么的呢这一阶段的耗时比后端接口返回数据的时间还要长。
对Chrome发起的网络请求进行抓包具体操作如下 进入chrome://net-export/网页点击开始调试重新请求该报表页面停止抓包保存日志文件进入https://netlog-viewer.appspot.com/#import网页导入抓包日志对抓包日志进行可视化分析结果如下图所示 点击最上侧的搜索框可以按照接口URL进行搜索搜索排查后发现接口是在 HTTP_STREAM_REQUEST_BOUND_TO_JOB阶段耗时过多再进一步查看发现是接口在等待复用套接字。
到这里我们就知道为什么前端页面上的接口相应时间过长了主要时间都耗费在等待复用套接字上了那为什么会在这个地方进行等待呢是因为HTTP1.1限制了在Chrome浏览器下对同一个域名的并发请求最大是6当超过6个时就得排队等待前面的请求数据返回释放套接字后才能进行请求。
问题解决
查明了问题那如何解决这个问题呢 两个办法一个是由于HTTP1.1是对单个域名限制了并发请求数那我们可以同时对多个域名进行请求来避免阻塞另一个是升级HTTP协议将HTTP协议升级到HTTP2.0HTTP2.0由于多路复用的特性不再限制并发请求数需注意对后端系统的负载影响同时并发请求会对后端系统造成更大的负载还需注意客户端对HTTP2.0协议的兼容性如果不兼容的话即使开启了HTTP2.0也会退化到HTTP1.1的。
综合多种考虑结合公司里关于HTTP2.0的故障反馈确认对我们的系统无影响后我们决定升级HTTP协议来解决该问题先在测试环境开启测试几天后在线上环境灰度开启最终全部开启。
注意HTTP2.0协议强依赖于HTTPS协议需确保服务首先支持HTTPS协议
