到底卡在了哪里,2023年再撒谎网慢就说不过去了

简介: 千错万错都可能是网络的错,请求耗时分布功能上新,揭穿网慢的遮羞布,让前后端和测试一眼定位,到底卡在了哪里

前言

互联网下行带来灵魂追问。

  • 钱花哪去了?
  • 产出在哪里?

动辄自建的遮羞布逐步显现,不过自建的成本可能还不是最大的负担,掣肘的可能是把不重要的事情当成了主业来做,比如:

  • 互联网+
  • 比如数字化转型
  • 比如研发效率和devops
  • 比如可观测性

本次要“安利”的新功能叫做应用 Span 请求耗时分布显示,建议优先阅读文章:巧用 “ 火焰图 ” 快速分析链路性能

本文主要大纲如下:

  1. 简单的功能说明
  2. 简单的功能示例
  3. 简单的功能讲解
  4. 简单的FAQ

1. 功能说明

名称 简单说明 作用
Span 请求耗时分布显示 在链路详情页,若当前的链路属于前端应用调用产生的 Span,在链路详情查看请求耗时分布,包括 Queueing(队列)、First Byte(首包)、Download(下载)的请求信息 直观查看消耗占比

注意:用户访问监测 SDK 必须是 2.2.10 以及上才可以看到这部分数据显示

网络异常,图片无法展示
|

2. demo演示

先上效果图

网络异常,图片无法展示
|

准备阶段

环境:

环境 版本
node v12.16.3
mongo 1.8.4

至于前端系统,我们使用去哪开源的yapi。

使用开源系统争议比较少,而且开源系统相对比较成熟,有关去哪开源的yapi整体大概是node做back end api的同时也做web server。

有关yapi的展示如下:

网络异常,图片无法展示
|

安装步骤

过于简单,参照官网安装即可,不再赘述,同时官网有docker镜像,安装也很简单。

  • 安装yapi
  • 引入观测云sdk

安装后效果很简单的展示,之前讲过,此处仅列出截图

服务页面

网络异常,图片无法展示
|

概览页面

网络异常,图片无法展示
|

链路页面

网络异常,图片无法展示
|

链路火焰图

网络异常,图片无法展示
|

链路span列表

网络异常,图片无法展示
|

服务调用关系

网络异常,图片无法展示
|

请求耗时分布

网络异常,图片无法展示
|

3. 请求耗时该怎么看?

这里的请求耗时分布,仿照chrome tools中的timeline页面,包括

  • Queueing(队列)
  • First Byte(首包)
  • Download(下载) 具体展示见下图。

网络异常,图片无法展示
|
这里我们将针对各个部分进行讲解。

名词解释

queueing

排队时间,如果该请求被排队,则这里会大于0。

first byte

等待响应的时间,具体来说是等待返回首个字节的时间。包含了与服务器之间一个来回响应的时间和等待首个字节被返回的时间。

Content Download

用于下载响应的时间

将这三者结合来看,前端、后端、网络三者之间耗时占比一目了然。

4. FAQ

1. 为什么会排队?谷歌给出的解释如下:

  • There are higher priority requests.
  • There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only.
  • The browser is briefly allocating space in the disk cache

翻译一下,如下:

  • 有更高优先级的请求。
  • 源站已经达到6个TCP连接上线,针对 HTTP/1.0 和 HTTP/1.1。
  • 浏览器配置磁盘缓存

这里有几点需要注意:

  • 有更高优先级的请求。
  • 源站已经达到6个TCP连接上线,针对 HTTP/1.0HTTP/1.1
  • 浏览器配置磁盘缓存

2. 解释一 priority

  1. 在资源中不同类型有不同的请求级别,比如html/css/js/xhr他们的优先级别不一样;
  2. 可以更改资源的属性,调整优先级别。

目前有哪些优先级别?

  • high: You consider the resource a high priority and want the browser to prioritize it as long as the browser's heuristics don't prevent that from happening.
  • low: You consider the resource a low priority and want the browser to deprioritize it if it's heuristics permit.
  • auto: This is the default value where you don't have a preference and let the browser decide the appropriate priority.

有关静态资源在网络请求中的优先级别,比较基础,本文暂不讨论;

3. 针对网络请求,优先级别是不一样的。如何调整?

谷歌给出的例子如下:

fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
复制代码

但问题来了,本身fetch的默认优先级别是啥?

4. 有关请求连接数,2.0是救命稻草吗?

因为单个源在1.0和1.1的连接数量的限制,尽快升级到2.0,可以解决一定的问题

5. 升级到2.0就不会出现queueing了吗?

我们以网站升级到2.0的timeline为例子进行观察。

网络异常,图片无法展示
|


6. 每个部分合理时间应该在多少范围内?

6.1 有关下载时间

如果定义

  • trans,代表传输的字节数
  • tDownload,代表耗时
  • tV,代表传输速度

tDownload=trans/tvtDownload=trans/tvtDownload=trans/tv

当tV是不可控时(非专线情况,即便是专线,也受限于基础设施),这个问题,可以等同于在询问,接口要:

  • 传输多少数据量

这个问题要问:后端研发、网络工程师

6.2 有关排队

  • 如果有排队,是不是可以取消排队
  • 如果无法取消排队,是不是可以减少排队的数量或等待时间

这个问题要问:前端研发



目录
相关文章
|
6天前
|
监控 物联网 视频直播
流量卡类型及其适用场景
不同流量卡的使用场景可以根据其特点、套餐内容、价格以及用户的具体需求来划分。以下是一些常见的流量卡类型及其适用场景:
|
4月前
|
机器学习/深度学习 人工智能 并行计算
N卡和A卡的硬件架构比较与选择指南
N卡和A卡的硬件架构比较与选择指南
|
2月前
|
监控 安全 物联网
物联卡:物联网卡和SIM卡的不同
物联网卡(IoT SIM卡)和普通SIM卡在多个方面存在显著的差异,这些差异主要体现在应用场景、功能特点、资费结构、管理方式等方面。以下是它们之间区别的详细分析:
|
2月前
|
物联网
物联网:“定向卡”与“通用卡”的区别
在讨论“定向卡”与“通用卡”的区别时,我们首先要明确这两种卡通常是在不同背景下被提及的,比如在营销、金融服务、会员卡系统等领域。不过,为了提供一个通用的、跨领域的理解,我们可以从以下几个维度来探讨它们的区别:
|
2月前
|
传感器 监控 物联网
贴片卡与插拔卡
贴片卡(也称为嵌入式SIM卡或eSIM)和插拔卡(传统SIM卡)在无线通信领域中各有其适用场景和操作方式。
|
30天前
|
存储 监控 安全
贴片卡的应用场景
贴片卡,通常指的是尺寸小巧、可以直接贴在或嵌入到产品、设备或表面的卡片或芯片,它们集成了电路、存储器、微处理器等电子元件。这些卡片广泛应用于多个行业和领域,以实现数据的存储、传输、认证或控制等功能。以下是贴片卡的一些主要应用场景:
|
2月前
|
存储 数据安全/隐私保护
贴片卡与插拔卡的优缺点
在讨论贴片卡(通常指的是嵌入在设备内部的存储卡,如SIM卡、eMMC等)与插拔卡(如SD卡、microSD卡等,用户可以轻松插入和拔出的存储卡)的优缺点时,我们可以从多个方面进行比较:
|
4月前
|
存储 安全 Windows
电脑卡了怎么办?
在日常使用电脑的过程中,我们可能会遇到各种各样的问题,其中电脑卡顿是很让人心烦的问题之一。电脑卡顿不仅会影响我们的工作效率,还会让人感到非常烦恼。本文将详细介绍电脑卡顿的常见原因及其解决方法,帮助大家轻松应对这一问题。
电脑卡了怎么办?
|
Web App开发 运维 物联网
云鹰卡为什么可以做到“不断网”
一卡多网,让设备不再睡觉!
580 0
云鹰卡为什么可以做到“不断网”