您当前的位置:首页 > 电脑百科 > 站长技术 > 网站

如何进行 web 性能监控,你的方法用对了吗?

时间:2020-01-06 10:53:18  来源:  作者:

也许你有听过一个问题,你这款 web 应用性能怎么样呀?你会回答什么呢?是否会优于海量 web 应用市场呢?本文就来整理下如何进行 web 性能监控?包括我们需要监控的指标、监控的分类、performance 分析以及如何监控。但是,如何进行 web 性能监控本身是一个很大的话题,文中只会侧重一部分进行研究,某些内容不是很全面。

前言:为什么需要监控?

web 的性能一定程度上影响了用户留存率,google DoubleClick 研究表明:如果一个移动端页面加载时长超过 3 秒,用户就会放弃而离开。BBC 发现网页加载时长每增加 1 秒,用户就会流失 10%。

我们希望通过监控来知道 web 应用性能的现状和趋势,找到 web 应用的瓶颈?某次发布后的性能情况怎么样?是否发布后对性能有影响?感知到业务出错的概率?业务的稳定性怎么样?

监控什么?

我们需要监控些什么呢?有哪些具体的指标?

google 开发者提出了一种 RAIL 模型来衡量应用性能,即:Response、Animation、Idle、Load,分别代表者 web 应用生命周期的四个不同方面。并指出最好的性能指标是:

100ms 内响应用户输入,动画或者滚动需在 10ms 内产生下一帧,最大化空间时间、页面加载时长不超过 5 秒。

如何进行 web 性能监控,你的方法用对了吗?

 

我们可转化为三个方面来看:响应速度、页面稳定性、外部服务调用

响应速度:页面初始访问速度+交互响应速度

页面稳定性:页面出错率

外部服务调用:网络请求访问速度

1. 页面访问速度:白屏、首屏时间、可交互时间

我们来看看 google 开发者针对用户体验,提出的几个性能指标

如何进行 web 性能监控,你的方法用对了吗?

 

这几个指标其实都是根据用户体验,提炼出对应的性能指标

如何进行 web 性能监控,你的方法用对了吗?

 

1)first paint (FP) and first contentful paint (FCP)

首次渲染、首次有内容的渲染

The Paint Timing API

这两个指标浏览器已经标准化了,从 performance API 可以获取到,一般来说两个时间相同,但也有情况下两者不同。

如何进行 web 性能监控,你的方法用对了吗?

 

2)First meaningful paint and hero element timing

首次有意义的渲染、页面关键元素

我们假设当一个网页的 DOM 结构发生剧烈的变化的时候,就是这个网页主要内容出现的时候,那么在这样的一个时间点上,就是首次有意义的渲染。这个指标浏览器还没有规范,毕竟很难统一一个标准来定义网站的主体内容。

google lighthouse 定义的 first meaningful paint:

https://docs.google.com/document/d/1BR94tJdZLsin5poeet0XoTW60M0SjvOJQttKT-JK8HI/view

3)Time to interactive

可交互时间

4)长任务

浏览器是单线程的,如果长任务过多,那必然会影响着用户响应时长。好的应用需要最大化空闲时间,以保证能最快响应用户的输入。

如何进行 web 性能监控,你的方法用对了吗?

 

2. 页面稳定性:页面出错情况

资源加载错误

JS 执行报错

3. 外部服务调用

CGI 耗时

CGI 成功率

CDN 资源耗时

监控的分类?

web 性能监控可分为两类,一类是合成监控(Synthetic Monitoring,SYN),另一类是真实用户监控(Real User Monitoring,RUM)

合成监控

合成监控是采用 web 浏览器模拟器来加载网页,通过模拟终端用户可能的操作来采集对应的性能指标,最后输出一个网站性能报告。例如:Lighthouse、PageSpeed、WebPageTest、Pingdom、PhantomJS 等。

1. Lighthouse

Lighthouse 是 google 一个开源的自动化工具,运行 Lighthouse 的方式有两种:一种是作为 Chrome 扩展程序运行;另一种作为命令行工具运行。 Chrome 扩展程序提供了一个对用户更友好的界面,方便读取报告。通过命令行工具可以将 Lighthouse 集成到持续集成系统。

展示了白屏、首屏、可交互时间等性能指标和 seo、PWA 等。

腾讯文档移动端官网首页测速结果:

如何进行 web 性能监控,你的方法用对了吗?

 

2. PageSpeed

https://developers.google.com/speed/pagespeed/insights/

不仅展示了一些主要的性能指标数据,还给出了部分性能优化建议。

腾讯文档移动端首页测速结果和性能优化建议:

如何进行 web 性能监控,你的方法用对了吗?

 

3. WebPageTest

WebPageTest

给出性能测速结果和资源加载的瀑布图。

如何进行 web 性能监控,你的方法用对了吗?

 

4. Pingdom

https://www.pingdom.com/

注意:Pingdom 不仅提供合成监控,也提供真实用户监控。

如何进行 web 性能监控,你的方法用对了吗?

 

这种监控方式的优缺点:

优点:

无侵入性。

简单快捷。

缺点:

不是真实的用户访问情况,只是模拟的。

没法考虑到登录的情况,对于需要登录的页面就无法监控到。

二、真实用户监控

真实用户监控是一种被动监控技术,是一种应用服务,被监控的 web 应用通过 sdk 等方式接入该服务,将真实的用户访问、交互等性能指标数据收集上报、通过数据清洗加工后形成性能分析报表。例如 alloydata、oneapm、aegis、monitor 等等。

如何进行 web 性能监控,你的方法用对了吗?

 

1. oneapm

https://www.oneapm.com/bi/feature.html

功能包括:大盘数据、特征统计、慢加载追踪、访问页面、脚本错误、AJAX、组合分析、报表、告警等等。

如何进行 web 性能监控,你的方法用对了吗?

 

2. Datadog

https://www.datadoghq.com/rum/

如何进行 web 性能监控,你的方法用对了吗?

 

3. FrontJs

https://www.frontjs.com/

功能包括:访问性能、异常监控、报表、趋势等等。

如何进行 web 性能监控,你的方法用对了吗?

 

这种监控方式的优缺点:

优点:

是真实用户访问情况。

可以观察历史性能趋势。

有一些额外的功能:报表推送、监控告警等等。

缺点:

有侵入性,会一定程度上响应 web 性能。

performance 分析

在讲如何监控之前,先来看看浏览器提供的 performance api,这也是监控数据的来源。

performance 提供高精度的时间戳,精度可达纳秒级别,且不会随操作系统时间设置的影响。目前市场上的支持情况:主流浏览器都支持,大可放心使用。

如何进行 web 性能监控,你的方法用对了吗?

 

基本属性

如何进行 web 性能监控,你的方法用对了吗?

 

performance.navigation: 页面是加载还是刷新、发生了多少次重定向

如何进行 web 性能监控,你的方法用对了吗?

 

performance.timing: 页面加载的各阶段时长

如何进行 web 性能监控,你的方法用对了吗?

 

各阶段的含义:

如何进行 web 性能监控,你的方法用对了吗?

 

performance.memory: 基本内存使用情况,Chrome 添加的一个非标准扩展

如何进行 web 性能监控,你的方法用对了吗?

 

performance.timeorigin: 性能测量开始时的时间的高精度时间戳

如何进行 web 性能监控,你的方法用对了吗?

 

基本方法

performance.getEntries()

通过这个方法可以获取到所有的 performance 实体对象,通过 getEntriesByName 和 getEntriesByType 方法可对所有的 performance 实体对象 进行过滤,返回特定类型的实体。

mark 方法 和 measure 方法的结合可打点计时,获取某个函数执行耗时等。

如何进行 web 性能监控,你的方法用对了吗?

 

performance.getEntriesByName()

performance.getEntriesByType()

performance.mark()

performance.clearMarks()

performance.measure()

performance.clearMeasures()

performance.now()

...

提供的 API

performance 也提供了多种 API,不同的 API 之间可能会有重叠的部分。

1. PerformanceObserver API

用于检测性能的事件,这个 API 利用了观察者模式。

获取资源信息

如何进行 web 性能监控,你的方法用对了吗?

 

监测 TTI

如何进行 web 性能监控,你的方法用对了吗?

 

监测 长任务

如何进行 web 性能监控,你的方法用对了吗?

 

2. Navigation Timing API

https://www.w3.org/TR/navigation-timing-2/

performance.getEntriesByType("navigation");

如何进行 web 性能监控,你的方法用对了吗?

 


如何进行 web 性能监控,你的方法用对了吗?

 

不同阶段之间是连续的吗? —— 不连续

每个阶段都一定会发生吗?—— 不一定

重定向次数:performance.navigation.redirectCount

重定向耗时: redirectEnd - redirectStart

DNS 解析耗时: domainLookupEnd - domainLookupStart

TCP 连接耗时: connectEnd - connectStart

SSL 安全连接耗时: connectEnd - secureConnectionStart

网络请求耗时 (TTFB): responseStart - requestStart

数据传输耗时: responseEnd - responseStart

DOM 解析耗时: domInteractive - responseEnd

资源加载耗时: loadEventStart - domContentLoadedEventEnd

首包时间: responseStart - domainLookupStart

白屏时间: responseEnd - fetchStart

首次可交互时间: domInteractive - fetchStart

DOM Ready 时间: domContentLoadEventEnd - fetchStart

页面完全加载时间: loadEventStart - fetchStart

http 头部大小: transferSize - encodedBodySize

3. Resource Timing API

https://w3c.github.io/resource-timing/

performance.getEntriesByType("resource");

如何进行 web 性能监控,你的方法用对了吗?

 


如何进行 web 性能监控,你的方法用对了吗?

 

// 某类资源的加载时间,可测量图片、js、css、XHRresourceListEntries.forEach(resource => {if (resource.initiatorType == 'img') {console.info(`Time taken to load ${resource.name}: `, resource.responseEnd - resource.startTime);}});

这个数据和 chrome 调式工具里 network 的瀑布图数据是一样的。

4. paint Timing API

https://w3c.github.io/paint-timing/

首屏渲染时间、首次有内容渲染时间

如何进行 web 性能监控,你的方法用对了吗?

 

5. User Timing API

https://www.w3.org/TR/user-timing-2/#introduction

主要是利用 mark 和 measure 方法去打点计算某个阶段的耗时,例如某个函数的耗时等。

6. High Resolution Time API

https://w3c.github.io/hr-time/#dom-performance-timeorigin

主要包括 now() 方法和 timeOrigin 属性。

7. Performance Timeline API

https://www.w3.org/TR/performance-timeline-2/#introduction

总结

基于 performance 我们可以测量如下几个方面:

mark、measure、navigation、resource、paint、frame。

let p = window.performance.getEntries();

重定向次数:performance.navigation.redirectCount

JS 资源数量:p.filter(ele => ele.initiatorType === "script").length

CSS 资源数量:p.filter(ele => ele.initiatorType === "css").length

AJAX 请求数量:p.filter(ele => ele.initiatorType === "xmlhttprequest").length

IMG 资源数量:p.filter(ele => ele.initiatorType === "img").length

总资源数量: window.performance.getEntriesByType("resource").length

不重复的耗时时段区分:

重定向耗时: redirectEnd - redirectStart

DNS 解析耗时: domainLookupEnd - domainLookupStart

TCP 连接耗时: connectEnd - connectStart

SSL 安全连接耗时: connectEnd - secureConnectionStart

网络请求耗时 (TTFB): responseStart - requestStart

HTML 下载耗时:responseEnd - responseStart

DOM 解析耗时: domInteractive - responseEnd

资源加载耗时: loadEventStart - domContentLoadedEventEnd

其他组合分析:

白屏时间: domLoading - fetchStart

粗略首屏时间: loadEventEnd - fetchStart 或者 domInteractive - fetchStart

DOM Ready 时间: domContentLoadEventEnd - fetchStart

页面完全加载时间: loadEventStart - fetchStart

JS 总加载耗时:

const p = window.performance.getEntries();

let cssR = p.filter(ele => ele.initiatorType === "script");

Math.max(...cssR.map((ele) => ele.responseEnd)) - Math.min(...cssR.map((ele) => ele.startTime));

CSS 总加载耗时:

const p = window.performance.getEntries();let cssR = p.filter(ele => ele.initiatorType === "css");Math.max(...cssR.map((ele) => ele.responseEnd)) - Math.min(...cssR.map((ele) => ele.startTime));

如何监控?

了解了 performance 之后,我们来看看,具体是如何监控的?

如何进行 web 性能监控,你的方法用对了吗?

 

总体流程:性能指标收集与数据上报—数据存储—数据聚合—分析展示—告警、报表推送

本文主要讲述如何将性能数据进行上报。

数据上报(性能指标收集)

注意项:1)保证数据的准确性 2)尽量不影响应用的性能

1. 基本性能上报

采集数据:将 performance navagation timing 中的所有点都上报,其余的上报内容可参考 performance 分析一节中截取部分上报。例如:白屏时间,JS 和 CSS 总数,以及加载总时长。

其余可参考的上报:是否有缓存?是否启用 gzip 压缩、页面加载方式。

什么时机上报?

google 开发者推荐的上报方式:

如何进行 web 性能监控,你的方法用对了吗?

 

2. 首屏时间计算

我们知道首屏时间是一项重要指标,但是又很难从 performance 中拿到,来看下首屏时间计算主要有哪些方式?

https://web.dev/first-meaningful-paint/

用户自定义打点-最准确的方式

lighthouse 中使用的是 chrome 渲染过程中记录的 trace event

可利用 CDP 拿到页面布局节点数目。

思想是:当页面具有最大布局变化的时间点

aegis 的方法:利用 MutationObserver 接口,监听 document 对象的节点变化。

检查这些变化的节点是否显示在首屏中,若这些节点在首屏中,那当前的时间点即为首屏渲染时间。但是还有首屏内图片的加载时间需要考虑,遍历 performance.getEntries() 拿到的所有图片实体对象,根据图片的初始加载时间和加载完成时间去更新首屏渲染时间。 http://km.oa.com/group/42893/articles/show/397490

利用 MutationObserver 接口提供了监视对 DOM 树所做更改的能力,是 DOM3 Events 规范的一部分。

方法:在首屏内容模块插入一个 div,利用 Mutation Observer API 监听该 div 的 dom 事件,判断该 div 的高度是否大于 0 或者大于指定值,如果大于了,就表示主要内容已经渲染出来,可计算首屏时间。

某个专利:在 loading 状态下循环判断当前页面高度是否大于屏幕高度,若大于,则获取到当前页面的屏幕图像,通过逐像素对比来判断页面渲染是否已满屏。

https://patentimages.storage.googleapis.com/bd/83/3d/f65775c31c7120/CN103324521A.pdf

如何进行 web 性能监控,你的方法用对了吗?

 

3. 异常上报

1)js error

监听 window.onerror 事件

2)promise reject 的异常

监听 unhandledrejection 事件

window.addEventListener("unhandledrejection", function (event) {console.warn("WARNING: Unhandled promise rejection. Shame on you! Reason: "+ event.reason);});

3)资源加载失败

window.addEventListener('error')

4)网络请求失败

重写 window.XMLHttpRequest 和 window.fetch 捕获请求错误

5)iframe 异常

window.frames[0].onerror

6)window.console.error

4. CGI 上报

大致原理:拦截 ajax 请求

数据存储与聚合

一个用户访问,可能会上报几十条数据,每条数据都是多维度的。即:当前访问时间、平台、网络、ip 等。这些一条条的数据都会被存储到数据库中,然后通过数据分析与聚合,提炼出有意义的数据。例如:某日所有用户的平均访问时长、pv 等。

数据统计分析的方法:平均值统计法、百分位数统计法、样本分布统计法。

最后

觉得此文不错的大佬们可以多多关注或者帮忙转发分享一下哦,感谢!!!!



Tags:性能监控   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
性能测试过程中监控系统的CPU、内存、带宽等指标是必须,以前一直使用nmon这款linux系统监控工具进行性能测试过程中的系统监控,但是要形成正式的性能测试报告,就必须要通过nmon...【详细内容】
2021-08-19  Tags: 性能监控  点击:(98)  评论:(0)  加入收藏
一、前言本小节会介绍JVM性能监控,掌握几种常用的监控工具辅助我们更好的了解JVM的性能状态。生产环境中监控JVM性能,分析监控数据,可以知道何时需要JVM调优,可见监控是非常重要...【详细内容】
2020-09-16  Tags: 性能监控  点击:(48)  评论:(0)  加入收藏
web项目性能很重要,开发迭代过程中难免会有所忽视,性能会伴随产品的迭代而有所衰减。特别在移动端,网络一直是一个很大的瓶颈,而页面却越来越大,功能越来越复杂。并没有简单的几...【详细内容】
2020-08-26  Tags: 性能监控  点击:(691)  评论:(0)  加入收藏
关于企业上云,在几年前大家谈论更多的是OpenStack、资源编排和分配,但近几年上云的应用部署方式发生了很多变化。首先从谷歌搜索的趋势可以发现Kubernetes的关注(热度)已经远远...【详细内容】
2020-08-10  Tags: 性能监控  点击:(49)  评论:(0)  加入收藏
通过以下网址打开tomcat管理页面,默认端口为8080(如果不能打开则关闭服务器防火墙或者开放8080端口)...【详细内容】
2020-04-08  Tags: 性能监控  点击:(35)  评论:(0)  加入收藏
​CPU监控命令之mpstat命令 1概述:dstat是可以替代vmstat,iostat,netstat,ifstat的综合型替代品。同时去掉了他们的一些限制并加入了一些额外的特性,更多的组件和灵活性ds...【详细内容】
2020-01-08  Tags: 性能监控  点击:(150)  评论:(0)  加入收藏
也许你有听过一个问题,你这款 web 应用性能怎么样呀?你会回答什么呢?是否会优于海量 web 应用市场呢?本文就来整理下如何进行 web 性能监控?包括我们需要监控的指标、监控的分类...【详细内容】
2020-01-06  Tags: 性能监控  点击:(112)  评论:(0)  加入收藏
现在的应用都是依托层层技术、由工作流中的各个组件构建而成的,应用管理也越来越困难。随着应用的复杂程度不断提高,应用性能监控(APM)工具也需要不断完善。...【详细内容】
2019-12-09  Tags: 性能监控  点击:(125)  评论:(0)  加入收藏
1、uptime命令作用:监控CPU使用情况功能:打印当前时间,系统已经运行了多久,当前登录用户数以及系统平均负载情况。[root@localhost java]# uptime 16:02:01 up 52 min, 2 users,...【详细内容】
2019-11-19  Tags: 性能监控  点击:(228)  评论:(0)  加入收藏
MySQL管理和性能监控工具,能帮助你监控MySQL服务器,以及微调其性能和速度。众所周知,MySQL是功能强大的开源数据库系统,可让企业运行一系列不同的应用,如网站和ERP存储系统。MySQ...【详细内容】
2019-07-31  Tags: 性能监控  点击:(219)  评论:(0)  加入收藏
▌简易百科推荐
今天我们来聊一下北京地区的《ICP经营许可证》有多好办,现在的互联网上提供的商机越来越多,增值电信业务十分火爆,企业通过互联网突破地域的限制,把公司产品卖到更远的地方,同时...【详细内容】
2021-12-17  梦想理应飞翔Yy    Tags:《ICP经营许可证》   点击:(12)  评论:(0)  加入收藏
转自: https://blog.kermsite.com/p/blog-intro/由于格式问题,部分链接、表格可能会失效,若失效请访问原文此专题将详细介绍如何从零开始搭建一个个人博客。Dec 01, 2021阅读时...【详细内容】
2021-12-17  LaLiLi    Tags:个人博客   点击:(7)  评论:(0)  加入收藏
SP证是第二类增值电信业务经营许可证的简称。分为全网SP证和地网SP证。申请经营许可证是在工信部申请,全网SP经营许可证的有效期是5年,全网SP许可证在工信部办理全网SP续期,地...【详细内容】
2021-11-01  s陳述    Tags:sp证书   点击:(39)  评论:(0)  加入收藏
现在还有许多人不知道EDI许可证是什么东西今天我就来给大家讲解一下.EDI许可证就是一种增值电信业务经营许可证。是针对在线数据处理和交易处理业务需求的专业资格证书。 《...【详细内容】
2021-10-28  soberXx    Tags:edi许可证   点击:(75)  评论:(0)  加入收藏
元素的化学概念,如周期表中的化学元素,一切物质都是由元素构成的。对程序员而言,网站建设制作就是代码构成网站。企业网站设计者也收集了各种各样的元素,但并非所有元素都需要运...【详细内容】
2021-10-26  南宁云尚网络    Tags:企业网站   点击:(40)  评论:(0)  加入收藏
在运营网站的过程中,有一件不可忽略的事情。那就是网站上线之前需要完成 ICP 备案。说到这里,很多朋友就提出疑问了~· 什么是 ICP 备案呢?· ICP 备案需要哪些材...【详细内容】
2021-10-22  启测云    Tags:ICP备案   点击:(46)  评论:(0)  加入收藏
最近有朋友问我,我公司有外资就不能申请ICP许可证了么?外资的定义是什么?其实是可以的,但有一个特定条件必须满足,外资公司是指公司有外资股东,比如香港、加拿大、美国、韩国等等,...【详细内容】
2021-10-21  小白速看Z    Tags:ICP   点击:(51)  评论:(0)  加入收藏
自互联网出现以来,超文本传输协议http协议被广泛用于在Web浏览器和网站服务器之间传递信息,但随着互联网的发展,另一种协议——https出现,并与http一同服务于这个互联...【详细内容】
2021-10-20  我是FEIYA    Tags:https   点击:(44)  评论:(0)  加入收藏
Grafana Loki 是一个日志聚合工具,它是功能齐全的日志堆栈的核心。图片来自 包图网先看看结果有多轻量吧: Loki 是一个为有效保存日志数据而优化的数据存储。日志数据的高效索...【详细内容】
2021-09-14    51CTO  Tags:Loki日志   点击:(97)  评论:(0)  加入收藏
背景最近做微信小程序开发比较多,大家知道线上微信小程序为了安全起见,要求后端通信协议必须是HTTPS,这就要求需要安装证书。为了测试预发布线上环境,特地买了个最便宜的域名,为...【详细内容】
2021-09-14  小李子说程序    Tags:HTTPS证书   点击:(125)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条