前端抱怨 API 响应慢,到底慢在哪里?

简介: 前端抱怨 API 响应慢,到底慢在哪里?

请求发送过慢导致耗时增加;

DNS解析过慢导致耗时增加;

恶劣的网络环境导致耗时增加;

一直在排队导致响应过慢;

服务端响应过慢导致耗时增加;

响应体积过大导致耗时增加;

等等……

一般从感官上觉得API接口响应慢,大部分人会直接归结于服务端处理慢,其实是不合理的。通过在内网环境下的API耗时分析和外网环境下的API耗时分析的对比,一般会认识到原因所在。


通过浏览器的开发者工具分析

开发者工具

image.png

重点关注指标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

image.png


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中的火焰图

打开火焰图

如果没有开启,则点击+号,进行添加。


image.png


选择程序进行火焰图的分析

可以选择一个已经运行中的java程序进行分析,输出火焰图。


的分析


image.png

直接使用Async Profiler更简单

async-profiler git地址[1]


安装

从git上直接下载。


image.png


解压下可用。


简单使用

执行命令。


./profiler.sh -d 10 -f /tmp/flamegraph.svg

./profiler.sh -e itimer -d 10 -f /tmp/flamegraph.svg


可以通过-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代码和内核函数。

image.png


在浏览器中打开file:///tmp/flamegraph.svg,并找到调用的API,我这里调用的是ProjectManageController中的findProject方法。


image.png


根据长度可以看出该方法中调用方法的耗时情况,这样我们就知道耗时主要集中在什么地方。


PS:如果方法名被编译掉了,那么可以在java启动时加入-XX:+PreserveFramePointer


做更多的工作

用户体验的优化是一个长期而艰巨的过程,为了衡量我们网站的性能是否良好,我们有更多的工作需要去做。通常,会在底层自定义一些以用户为中心的指标,比如Server-Timing[2]。


参考资料

[1]https://github.com/jvm-profiling-tools/async-profiler\ [2]https://w3c.github.io/server-timing




目录
打赏
0
0
0
0
310
分享
相关文章
调用DeepSeek API增强版纯前端实现方案,支持文件上传和内容解析功能
本方案基于DeepSeek API增强版,提供纯前端实现的文件上传与内容解析功能。通过HTML和JavaScript,用户可选择文件并调用API完成上传及解析操作。方案支持多种文件格式(如PDF、TXT、DOCX),具备简化架构、提高响应速度和增强安全性等优势。示例代码展示了文件上传、内容解析及结果展示的完整流程,适合快速构建高效Web应用。开发者可根据需求扩展功能,满足多样化场景要求。
1058 64
|
1月前
|
API
关于调用RAG应用API,无法响应知识库的问题
直接在应用端在线询问,就可以响应知识库。但是通过调用应用的api就无法响应到知识库(应用已经发布),请问是怎么回事?
32 0
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
175 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
DeepClaude:结合 DeepSeek R1 和 Claude AI 各自优势开发的 AI 应用平台,支持 API 调用和零延迟的即时响应
DeepClaude 是一个开源的 AI 应用开发平台,结合了 DeepSeek R1 和 Claude 模型的优势,提供即时响应、端到端加密和高度可配置的功能。
462 4
DeepClaude:结合 DeepSeek R1 和 Claude AI 各自优势开发的 AI 应用平台,支持 API 调用和零延迟的即时响应
|
10月前
|
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
208 2
DeepSeek Engineer:集成 DeepSeek API 的开源 AI 编程助手,支持文件读取、编辑并生成结构化响应
DeepSeek Engineer 是一款开源AI编程助手,通过命令行界面处理用户对话并生成结构化JSON,支持文件操作和代码生成。
1093 6
DeepSeek Engineer:集成 DeepSeek API 的开源 AI 编程助手,支持文件读取、编辑并生成结构化响应
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
295 2
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
123 2
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
123 4
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问