对于前端来说,最重要是的体验,而在前端体验中,最为核心的就是性能。秒开率、流畅程度等一系列指标都直接影响用户体验。
因此,建立一个准确、及时、有效的前端性能监控系统,不仅可以量化当前页面的性能水平,还可以为优化方案的效果提供数据支持,此外,还可以在页面性能下滑时提供报警服务,提醒开发人员改善页面性能。
在参考前人的实践成果后,我们对性能监控的一系列指标的计算成本,适用性和实用价值进行了评估,认为以下指标和信息是最具实用性和性价比的:
首先是 fcp(first contentful paint,如下图所示),这个指标是目前统计页面秒考虑的主流指标,虽然它不如 fmp(First Meaningful Paint、lcp(Largest Contentful Paint)、speedIndex 等指标更贴近用户真实使用体验,但是优点是在 Android 端通过调用 Performance API 即可获得,在 iOS 可以通过 raf(requestAnimationFrame)估算,实施过程简单。
其次是 tts(time to server),这个指标并没有出现在此前看到的文章里边。
它描述的是用户连接到服务器的时间,通过 Performance API 中提供的 requestStart 减去 fetchStart 得到,这个指标不是前端可以通过技术可以优化的,但是它可以反映在当前用户群体的网络环境下,页面秒开率的上限是多少。
举个例子,假如通过性能监控数据发现,有 15%的用户访问,需要花费至少 1s 的时间才能连接到我们的服务器(可以是 SSR 服务器,也可以是 CDN),那么这些用户无论如何都不能秒开,那么此时,某页面秒开率的上限就是 85%。
假如当前情况下,这个页面的秒开率已经达到了 75%甚至更高,那么继续优化的边际收益会非常低,应该适可而止了。
第三是 tsp(time for server processing),这个指标也没有出现在此前的参考文章里。
它针对的是在使用 SSR 的场景下,服务器内部处理页面请求的耗时,可通过 Performance API 中提供的 responseStart 减去 requestStart 得到。
这个环节性能太差,亦会成为拖累秒开率的一个瓶颈,所以必须予以监控;tsp 太长会压榨其他环节的性能预算,太小会增大服务器运维成本。
第四是 css 文件、图片等资源的大小、xhr 请求的持续时间,前两种资源如果不加节制,会导致页面即便做到秒开,也无法快速进入可用状态,比如常见的 feed 流页面。
对于 xhr,需要进行分类讨论,如果是 SSR 页面,则影响不大,只要保障 tsp 处于较低水平,基本上不会拖累秒开率,但如果是 SPA,页面主要功能区都依赖后端数据支持的,比如判断权限、展示 feed 流内容,xhr 的响应速度就非常关键了,也需要予以监控,在指标下滑时,通知后端予以优化和处理。
最后是一些环境信息,比如用户实用什么品牌和型号的手机,是在微信、浏览器、还是我们的哪个版本的得物 App 内打开 H5 页面。
当页面的性能出现问题时,这些辅助信息能帮助我们尽可能精准地复现用户的实用场景,高效、准确地解决问题。
整个系统由以下模块构成:
SDK:负责采集用户的页面性能数据和基本信息,按照一定的发送策略将性能数据发往 SLS,植入页面后可以自行采集性能数据,不需要和页面代码交互。
SLS:阿里云日志服务,接受 SDK 发送的数据数据,并为性能数据添加接收时间,ip 等附加信息。
Backend:性能数据后端服务,这个模块有两个功能,一个是定时从 SLS 拉取原始的性能数据,对其进行去重和加工,得到性能指标数据和用户信息数据,然后将这些数据分门别类地存入对应的数据表中,以备查询。另一个是为数据可视化提供接口数据。
DB:持久化处理后的性能日志数据和性能指标数据的数据库。
Report: 性能数据报表,通过和操作报表,观察特定项目、版本下的指定页面的各项性能指标。
各模块关系如下图所示:
在进行开发之前,需要对系统的几个关键点进行思考和决策。大致有以下几个点:
目前的前端性能监控系统能满足日常的监控需求,但是还可以更进一步:
文|老狼
关注得物技术,携手走向技术的云端
简介: 项目最初使用 Arthas 主要有两个目的: 1. 通过 arthas 解决实现测试环境...
下面是一段普通的代码: css: 复制代码 代码如下: .box{ border:1px solid #ccc; ...
随着目前前端页面的需求不断提升,有些场景需要渐变背景的元素。本文利用div和cs...
?不是吧,不是吧,原来真的有人都2021年了,连TypeScript都没听说过吧?在项目中...
flex-grow、flex-shrink、flex-basis三个属性的作用: 在flex布局中,父元素在不...
1.环境 VS 2019 16.9.0 Preview 1.0 .NET SDK 5.0.100 2.前言 CSS一旦生效,就会...
超级计算作为“大计算”领域的另一大分支,一般会被用来与云计算进行优劣势类比...
Dreamweaver简设计网页的时候,想要添加边框,该怎么添加呢?下面我们就来看看详...
官方文档 https://developers.weixin.qq.... index.wxml view class="container"...
今天这篇过来人的宝贵经验,作者有过7年的技术管理经验,最多时带了80+人,现就...