前言互联网下行带来灵魂追问。 钱花哪去了?产出在哪里? 动辄自建的遮羞布逐步显现,不过自建的成本可能还不是最大的负担,掣肘的可能是把不重要的事情当成了主业来做,比如: 互联网比如数字化转型比如研发效率和devops比如可观测性 本次要安利的新功能叫做应用Span请求耗时分布显示,建议优先阅读文章:巧用火焰图快速分析链路性能 本文主要大纲如下:简单的功能说明简单的功能示例简单的功能讲解简单的FAQ1。功能说明 名称 简单说明 作用 Span请求耗时分布显示 在链路详情页,若当前的链路属于前端应用调用产生的Span,在链路详情查看请求耗时分布,包括Queueing(队列)、FirstByte(首包)、Download(下载)的请求信息 直观查看消耗占比 注意:用户访问监测SDK必须是2。2。10以及上才可以看到这部分数据显示 2。demo演示 先上效果图 准备阶段环境: 环境 版本 node v12。16。3 mongo 1。8。4 至于前端系统,我们使用去哪开源的yapi。 使用开源系统争议比较少,而且开源系统相对比较成熟,有关去哪开源的yapi整体大概是node做backendapi的同时也做webserver。 有关yapi的展示如下: 安装步骤 过于简单,参照官网安装即可,不再赘述,同时官网有docker镜像,安装也很简单。安装yapi引入观测云sdk安装后效果很简单的展示,之前讲过,此处仅列出截图服务页面 概览页面 链路页面 链路火焰图 链路span列表 服务调用关系 请求耗时分布 3。请求耗时该怎么看? 这里的请求耗时分布,仿照chrometools中的timeline页面,包括Queueing(队列)FirstByte(首包)Download(下载)具体展示见下图。 这里我们将针对各个部分进行讲解。名词解释queueing 排队时间,如果该请求被排队,则这里会大于0。firstbyte 等待响应的时间,具体来说是等待返回首个字节的时间。包含了与服务器之间一个来回响应的时间和等待首个字节被返回的时间。ContentDownload 用于下载响应的时间 将这三者结合来看,前端、后端、网络三者之间耗时占比一目了然。4。FAQ1。为什么会排队?谷歌给出的解释如下:Therearehigherpriorityrequests。TherearealreadysixTCPconnectionsopenforthisorigin,whichisthelimit。AppliestoHTTP1。0andHTTP1。1only。Thebrowserisbrieflyallocatingspaceinthediskcache 翻译一下,如下:有更高优先级的请求。源站已经达到6个TCP连接上线,针对HTTP1。0和HTTP1。1。浏览器配置磁盘缓存 这里有几点需要注意:有更高优先级的请求。源站已经达到6个TCP连接上线,针对HTTP1。0和HTTP1。1。浏览器配置磁盘缓存2。解释一priority在资源中不同类型有不同的请求级别,比如htmlcssjsxhr他们的优先级别不一样;可以更改资源的属性,调整优先级别。 目前有哪些优先级别?high:Youconsidertheresourceahighpriorityandwantthebrowsertoprioritizeitaslongasthebrowsersheuristicsdontpreventthatfromhappening。low:Youconsidertheresourcealowpriorityandwantthebrowsertodeprioritizeitifitsheuristicspermit。auto:Thisisthedefaultvaluewhereyoudonthaveapreferenceandletthebrowserdecidetheappropriatepriority。 有关静态资源在网络请求中的优先级别,比较基础,本文暂不讨论;3。针对网络请求,优先级别是不一样的。如何调整? 谷歌给出的例子如下:fetch(https:example。com,{importance:high})。then(data{Triggerahighpriorityfetch});复制代码 但问题来了,本身fetch的默认优先级别是啥?4。有关请求连接数,2。0是救命稻草吗? 因为单个源在1。0和1。1的连接数量的限制,尽快升级到2。0,可以解决一定的问题5。升级到2。0就不会出现queueing了吗? 我们以网站升级到2。0的timeline为例子进行观察。 作者:Yestodorrow 链接:https:juejin。cnpost7193582774870081591 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。