10分钟彻底搞懂前端页面性能监控

  • 时间:
  • 浏览:0

用户看一遍页面展示出现一另一个多元素的时间。没有来过多没有来过多人认为白屏时间是页面返回的首字节时间,但另一另一个多并不一定并不精确,如果头部资源还没加载完毕,页面也是白屏。

本文首发于知乎《10分钟彻底搞定前端页面性能监控》,搬运转载请注明出处。

首屏时间是指页面第一屏所有资源完整性展示的时间。这是一另一个多对用户来说非常直接的体验指标,如果对于前端却是一另一个多非常难以统计衡量的指标。

具备一定意义上的指标不需要 使用,domContentLoadedEventEnd - fetchStart,甚至使用loadEventStart - fetchStart,此时页面DOM树如果解析完成如果显示内容。

上图是 Level 1 的规范,2012 年底进入候选建议阶段,至今仍在日常使用中;如果在W3C的议程上,它如果功成身退,让位给了精度更高,功能更强大,层次更分明的 Level 2(避免模型如下图)。比如独立划分出来的 Resource Timing,使得大家不需要 获取具体资源的完整性耗时信息。

Navigation API指南 https://s0developer0mozilla0org.icopy.site/en-US/docs/Web/Performance/Navigation_and_resource_timings

没有来过多没有来过多大家还要一另一个多性能监控系统,持续监控和预警页面性能的状态,如果在发现瓶颈的事先指导优化工作。

前端页面性能是一另一个多非常核心的用户体验指标。本文给大家分享UC出品的 岳鹰全景监控平台 怎么设计一另一个多通用、低侵入性、自动上报的页面性能监控方案。主要采用的是Navigation Timing API以及sendBeacon等最好的方式。

白屏时间

页面性能统计的起始点时间,应该是用户输入网址回车后结速英语 英文等待时间的时间。一另一个多是通过navigationStart获取,共要在URL输入栏回车如果页面按F5刷新的时间点;另外一另一个多是通过 fetchStart,共要浏览器准备好使用 HTTP 请求获取文档的时间。

以用户为中心的性能指标 https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics?hl=zh-cn

页面性能对业务指标的影响 https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/

首字节

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

从开发者实际分析使用的场景,浏览器重定向、卸载页面的耗时对页面加载分析并无没有来过多作用;通常建议使用 fetchStart 作为统计起始点。

为了帮助开发者更好地衡量和改进前端页面性能,W3C性能小组引入了 Navigation Timing API ,实现了自动、精准的页面性能打点;开发者不需要 通过 window.performance 属性获取。

并不一定页面性能怪怪的要,如果在实际使用中,页面性能差的状态并不少见。首先,在产品的迭代演进过程中,页面性能如果会被忽略,性能随着版本迭代而有所衰减;其次,性能优化是一项繁杂而挑战的事情,还要明确的优化方向和具体的优化手段不需要 快速落地取效。

以下给出统计页面性能指标的最好的方式。

当浏览器支持sendBeacon最好的方式,优先使用该最好的方式,使用img最好的方式降级上报。

测量好时间后,就还要将数据发送给服务端。页面性能统计数据对丢失率要求比较低,且性能统计应该在尽量不影响主流程的逻辑和页面性能的前提下进行。

相对来说具备「白屏时间」统计意义的指标,不需要 取 domLoading - fetchStart,此时页面结速英语 英文解析DOM树,页面渲染的第一另一个多元素也会飞快出现。

使用上边的指标,大家不需要 计算一点重要的指标,如首字节的时间,页面加载时间,dns查找以及连接是与否安全。大家把 Navigation Timing API 提供的指标做下归类,按照从上到下的时间流,右边的时刻标记了每个指标从哪里结速英语 英文计算到哪里截止,比如,跳转时间 redirect 由 redirectEnd - redirectStart 计算得到,一点的类推。

主文档返回第一另一个多字节的时间,是页面加载性能比较重要的指标。对用户来说一般无感知,对于开发者来说,则代表访问网络后端的整体响应耗时。

Navigation Timing API不需要 监控大累积前端页面的性能。但随着SPA模式的盛行,累似 vue,reactjs等框架的普及,页面内容渲染的时机被改变了,W3C标准无法完整性满足另一另一个多的监控意义。

下图是W3C第一版的 Navigation Timing 的避免模型。从当前浏览器窗口卸载旧页面结速英语 英文,到新页面加载完成,整个过程一共被切分为 9 个小块:提示卸载旧文档、重定向/卸载、应用缓存、DNS 解析、TCP 握手、HTTP 请求避免、HTTP 响应避免、DOM 避免、文档装载完成。每个小块的首尾、上边做事件分界,取 Unix 时间戳,两两事件之间计算时间差,从而获取上边过程的耗时(精确到毫秒级别)。

一另一个多页面性能差说说会大大影响用户体验。用户打开页面等待时间的没有来过多,如果会直接关掉页面,甚至就不再使用了,你这名 状态在移动端更加明显,移动端用户对页面响应延迟容忍度很低。

幸运的是,目前W3C关于首屏统计如果进入了提议阶段,以Chrome为首的浏览器正在打造更能代表用户使用体验的FP、FCP、FMP指标,如果逐步开放API。

选折 统计起始点 (navigationStart vs fetchStart )

大累积现代浏览器都支持 navigator.sendBeacon最好的方式。你这名 最好的方式不需要 用来发送一点统计和诊断的多量数据,怪怪的适合上报统计的场景。

从W3C Navigation Timing Level 2 的方案设计,不需要 直接采用 domInteractive - fetchStart ,此时页面资源加载完成,即将进入渲染环节。

首屏时间