前端抱怨API响应慢,怎么办?
点击关注公众号,实用技术文章及时了解
来源:juejin.cn/post/6936063402640932878
分析API的耗时是将API的总耗时拆分为不同的部分,清晰的知道是什么原因导致耗时过高。我们借助不同的工具,在不同的网络环境下进行耗时分析,从而提出相应的优化建议。
请求发送过慢导致耗时增加;
DNS解析过慢导致耗时增加;
恶劣的网络环境导致耗时增加;
一直在排队导致响应过慢;
服务端响应过慢导致耗时增加;
响应体积过大导致耗时增加;
等等……
一般从感官上觉得API接口响应慢,大部分人会直接归结于服务端处理慢
,其实是不合理的。通过在内网环境下的API耗时分析和外网环境下的API耗时分析的对比,一般会认识到原因所在。
通过浏览器的开发者工具分析
重点关注指标Waiting (TTFB)
,TTFB代表第一个字节到达的时间。此时间包括一次往返延迟和服务器准备响应所花费的时间。可以近似的认为是服务端耗时。
如果网络情况不好或者响应数据过大,则Content Download
耗时会长一些,这时候应该考虑压缩响应.
Timing
开发者工具中Network
中显示了当前页中调用的网络资源,点击资源可以查看资源的详情,其中Timing
是资源调用时的耗时情况。
Queueing
. 【排队中】浏览器在以下情况下将请求排队:有更高优先级的请求.
已为该来源打开了六个
TCP
连接,这是限制。仅适用于HTTP/1.0
和HTTP/1.1
.浏览器正在磁盘缓存中短暂分配空间.
Stalled
. 【停滞】该请求可能由于排队中
描述的任何原因而停止.Proxy negotiation
. 【代理协商】浏览器正在与代理服务器协商请求.Request sent
. 【发送请求】该请求正在发送.Waiting (TTFB)
. 【等待中】浏览器正在等待响应的第一个字节。TTFB代表第一个字节到达的时间。此时间包括一次往返延迟和服务器准备响应所花费的时间.Content Download
. 【响应内容下载】浏览器正在接收响应.
其他可能出现的
DNS Lookup
. 【DNS】浏览器正在解析请求的IP地址.Initial connection
. 【初始化连接】浏览器正在建立连接,包括TCP握手/重试和协商SSL.
通过httpstat工具分析
httpstat git地址:
https://github.com/reorx/httpstat
如果是在Linux服务器上进行调用,则可以使用httpstat
。
安装
直接下载脚本
wget https://raw.githubusercontent.com/reorx/httpstat/master/httpstat.py
通过pip
pip install httpstat
Mac
brew install httpstat
使用
httpstat
可以使用cURL
的参数。
httpstat www.baidu.com httpstat 127.0.0.1/post -X POST --data-urlencode "id=1" -v
Server Processing
可以近似的认为是服务端耗时。
服务端到底慢在哪里?
打印耗时日志?
StopWatch stopWatch = new StopWatch();
stopWatch.start();
// ...
stopWatch.stop();
LOGGER.info("[某某某业务] - [Time:{}ms]", stopWatch.getLastTaskTimeMillis());
脑子瞬间一热就会使用的方法,简单直接,但是如果定位不准确,你可能要加很多这种日志。
还是用火焰图吧
让软件执行情况可视化,是性能分析、调试的利器
火焰图的生成工具很多,比如Async Profiler
、linux-perl
,网上也有很多关于这方面的介绍,IDEA也集成Async Profiler
,这个很方便。
IntelliJ IDEA中的火焰图
打开火焰图
如果没有开启,则点击+
号,进行添加。
选择程序进行火焰图的分析
可以选择一个已经运行中的java程序进行分析,输出火焰图。
直接使用Async Profiler更简单
async-profiler git地址[1]
安装
从git上直接下载。
解压下可用。
简单使用
执行命令。
./profiler.sh -d 10 -f /tmp/flamegraph.svg <pid>
./profiler.sh -e itimer -d 10 -f /tmp/flamegraph.svg <pid>
可以通过-e
来指定cpu
、alloc
、lock
、wall
、itimer
、ClassName.methodName
。
cpu
:在这种模式下,profiler收集堆栈跟踪样本,包括Java方法、本机调用、JVM代码和内核函数。alloc
:可以将探查器配置为收集分配最大堆内存的调用站点,而不是检测消耗CPU的代码。即检查当前分配内存最多的地方。lock
:满足的锁定尝试,包括Java对象监视器和可重入锁。wall
:告诉async-profiler在给定的时间内对所有线程平均采样,而不管线程状态如何: 运行、休眠或阻塞。例如,在分析应用程序启动时间时,这可能会有所帮助。。ClassName.methodName:ClassName.methodName
选项使用给定的Java方法,以便使用堆栈跟踪记录此方法的所有调用。cpu
:在这种模式下,profiler收集堆栈跟踪样本,包括Java方法、本机调用、JVM代码和内核函数。
在浏览器中打开file:///tmp/flamegraph.svg
,并找到调用的API,我这里调用的是ProjectManageController
中的findProject
方法。
根据长度可以看出该方法中调用方法的耗时情况,这样我们就知道耗时主要集中在什么地方。
PS:如果方法名被编译掉了,那么可以在java启动时加入-XX:+PreserveFramePointer
做更多的工作
用户体验的优化是一个长期而艰巨的过程,为了衡量我们网站的性能是否良好,我们有更多的工作需要去做。通常,会在底层自定义一些以用户为中心的指标,比如Server-Timing[2]。
参考资料
[1]
https://github.com/jvm-profiling-tools/async-profiler: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fjvm-profiling-tools%2Fasync-profiler
[2]
https://w3c.github.io/server-timing/: https://link.juejin.cn?target=https%3A%2F%2Fw3c.github.io%2Fserver-timing%2F
推荐
主流Java进阶技术(学习资料分享)
Java面试题宝典
加入Spring技术开发社区
PS:因为公众号平台更改了推送规则,如果不想错过内容,记得读完点一下“在看”,加个“星标”,这样每次新文章推送才会第一时间出现在你的订阅列表里。点“在看”支持我们吧!
前端抱怨API响应慢,怎么办?相关推荐
- 前端抱怨 API 响应慢,怎么办?
欢迎关注方志朋的博客,回复"666"获面试宝典 分析API的耗时是将API的总耗时拆分为不同的部分,清晰的知道是什么原因导致耗时过高.我们借助不同的工具,在不同的网络环境下进行耗时 ...
- HTTP API响应数据规范整理
2019独角兽企业重金招聘Python工程师标准>>> 关于作者 马隆博(Lenbo Ma),Java,Javascript Blog: http://mlongbo.com E-M ...
- 前端知识点总结—-响应式
前端知识点总结--响应式 1.Responsive Web Page:响应式网页/自适应的网页2010年提出, 一个网页,会自动根据用户浏览设备不同,自动必变布局,可以被PC/PAD/PHONE 正常 ...
- wxpay-api:pay_J2Pay – API响应
wxpay-api:pay 介绍 该库中的神奇之处在于,无论网关是什么,其响应都是唯一的. 了解API响应后,您便可以轻松地将此响应用于进一步的交易,例如退款,作废或重新开票. 首先,在开始阅读时,所 ...
- J2Pay – API响应
介绍 该库中的神奇之处在于,无论网关是什么,其响应都是唯一的. 了解API响应后,您便可以轻松地将此响应用于进一步的交易,例如退款,作废或重新开票. 首先,在开始阅读时,所有响应都是JSON. 所有响 ...
- APICACHE : Express/Node的API响应缓存中间件
APICACHE : Express/Node的API响应缓存中间件 翻译来源:https://gitee.com/yunwisdoms/apicache 支持Redis或具有自动清除功能的内置内存引 ...
- Henry前端笔记之响应式布局与弹性布局
Henry前端笔记之响应式布局与弹性布局 弹性布局 Rem布局的原理解析(em 与 rem区别 ): rem如何实现自适应布局 使用CSS3 REM 和 VW 打造等比例响应式页面的便捷工作流 从网易 ...
- Vue2前端请求API数据跨域问题解决
Vue2前端请求API数据跨域问题解决方法 前端:Vue2 接口使用:API 问题报错提示: Access to XMLHttpRequest at 'http://localhost:9090/ec ...
- api响应泛型参数 swagger_你还在用丝袜哥(Swagger)?今天不如换换口味!
今天给大家安利一款接口文档生成器--JApiDocs. Swagger想必大家都用过吧,非常方便,功能也十分强大.如果非要说Swaager有什么缺点,想必就是注解写起来比较麻烦.如果我说有一款不用写注 ...
最新文章
- ab压力测试: apr_socket_recv: Connection timed out (110)
- 第五次课:Python 数据类型(一)
- php 大牛生小牛,C#算法之关于大牛生小牛的问题
- Redhat 6.3 yum 本地源配置
- python中使用函数编程的意义_总结Python编程中函数的使用要点
- oracle ebs技术开发,Oracle EBS应用架构技术方案.pdf
- IP 地址编址方式(分类、子网划分、无分类)
- (转)编译Android源码的全过程
- 自己整理的openresty安装步骤
- Windows 8.1 新增控件之 CommandBar
- 如何摆脱「技术思维」的惯性?
- 大数据相加_推动媒体融合与大数据相加发展
- DirectX 9.0c游戏开发手记之RPG编程自学日志之17: Drawing with DirectX Graphics (用DirectX图形绘图)(第13节)
- Delphi7学习第一天
- PCB中常见的单位换算
- Windows7计算机的程序文件名,Win7怎么显示文件后缀名_Win7显示文件的扩展名-192路由网...
- rust-crate
- HTML、SHTML、DHTML、XHTML、XML区别
- JMeter源码学习- 5.0版本源码本地构建
- mysql数据库备份工具
热门文章
- 三七互娱上半年近九成营收来自手游 精品化优势凸显
- “哎哟,真的很快哦” 闪送宣布签约周杰伦为其品牌代言人
- iPhone 7疯狂生产 苹果提升在印度存在感
- 终于!华为Mate 9已获安卓9.0正式版更新
- 指针作为函数参数 进行内存释放 并置NULL
- 全网独家分享,软件测试就该这么学,3个月进大厂!
- 软件测试面试-测试的目的是什么?【高频】
- python php 序列化,序列化和反序列化的详细介绍
- Linux脚本验证的常见方法,linux shell常用循环与判断语句(for,while,until,if)使用方法...
- c++ regex用法实例