2024年最全前端抱怨API响应慢，我们后端该做些什么？(1)，Web前端事件分发机制面试

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一般从感官上觉得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地址

如果是在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中的火焰图

==================

打开火焰图

=====

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

新增单位，弹性盒模型

[外链图片转存中…(img-m89jOfqQ-1715676140174)]

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中…(img-KjPua7Hz-1715676140175)]