记录使用Performance API遇到的问题
本文中Performance API指的是Navigation Timing API。这并不是一篇Navigation Timing API的介绍文章,而是我在使用中遇到的问题。
我在开发中遇到Navigation Timing API中的connectStart等时间节点并不是标准时间戳,而是0或者一个很小的数值,导致指标数据计算出错,尤其是IOS设备。原因如下:
IOS设备通过浏览器的前进后退按钮进入的页面,Navigation Timing API数据中connectStart,responseEnd等数据可能为0或者是一个比较小的数值,并不是对应时间点的时间戳。究其原因,IOS设备通过缓存读取页面时,Navigation Timing的计算与安卓实现不一致。
如果你还想了解下Navigation Timing API,可以继续往下看
Navigation Timing API
Navigation Timing API中包含全部的页面加载中关键节点的时间,例如navigationStart,connectEnd,responseEnd等时间。
具体的相关API可以去MDN查看,
浏览器支持程度也非常不错,移动端IOS9及以上,Android4及以上都支持,桌面端IE9也都支持。
一些常规的性能数据计算方法
DNS时间 = domainLookupEnd - domainLookupStart
TCP时间 = connectEnd - connectStart
后端时间 = responseEnd - connectEnd
白屏时间 = domInteractive - navigationStart
整屏时间 = loadEventEnd - navigationStart
解析dom树耗时 = domComplete - domInteractive
request请求耗时 = responseEnd - responseStart
我们团队就是按照如上指标来做的各个时间的统计,做了各种测试,线下数据都没什么问题。上线了以后拿到的首批数据中,后端时间计算出来竟然有负值,尤其在IOS设备下,苦苦寻找原因,终于发现问题所在。
IOS设备通过浏览器的前进后退按钮进入的页面,Navigation Timing API数据中connectStart,responseEnd等数据可能为0或者是一个比较小的数值,并不是对应时间点的时间戳。
关于首屏时间的定义
根据Navigation Timing API的时间,是没有办法计算首屏时间的,首屏时间也并没有严格的定义,我们团队采用的首屏时间如下
首屏时间 = (dom解析完毕 && 所有首屏图片加载完毕 )- navigationStart
标准
属性 | 含义 |
---|---|
navigationStart | 准备加载新页面的起始时间 |
redirectStart | 如果发生了HTTP重定向,并且从导航开始,中间的每次重定向,都和当前文档同域的话,就返回开始重定向的timing.fetchStart的值。其他情况,则返回0 |
redirectEnd | 如果发生了HTTP重定向,并且从导航开始,中间的每次重定向,都和当前文档同域的话,就返回最后一次重定向,接收到最后一个字节数据后的那个时间.其他情况则返回0 |
fetchStart | 如果一个新的资源获取被发起,则 fetchStart必须返回用户代理开始检查其相关缓存的那个时间,其他情况则返回开始获取该资源的时间 |
domainLookupStart | 返回用户代理对当前文档所属域进行DNS查询开始的时间。如果此请求没有DNS查询过程,如长连接,资源cache,甚至是本地资源等。 那么就返回 fetchStart的值 |
domainLookupEnd | 返回用户代理对结束对当前文档所属域进行DNS查询的时间。如果此请求没有DNS查询过程,如长连接,资源cache,甚至是本地资源等。那么就返回 fetchStart的值 |
connectStart | 返回用户代理向服务器服务器请求文档,开始建立连接的那个时间,如果此连接是一个长连接,又或者直接从缓存中获取资源(即没有与服务器建立连接)。则返回domainLookupEnd的值 |
(secureConnectionStart) | 可选特性。用户代理如果没有对应的东东,就要把这个设置为undefined。如果有这个东东,并且是HTTPS协议,那么就要返回开始SSL握手的那个时间。 如果不是HTTPS, 那么就返回0 |
connectEnd | 返回用户代理向服务器服务器请求文档,建立连接成功后的那个时间,如果此连接是一个长连接,又或者直接从缓存中获取资源(即没有与服务器建立连接)。则返回domainLookupEnd的值 |
requestStart | 返回从服务器、缓存、本地资源等,开始请求文档的时间 |
responseStart | 返回用户代理从服务器、缓存、本地资源中,接收到第一个字节数据的时间 |
responseEnd | 返回用户代理接收到最后一个字符的时间,和当前连接被关闭的时间中,更早的那个。同样,文档可能来自服务器、缓存、或本地资源 |
domLoading | 返回用户代理把其文档的 "current document readiness" 设置为 "loading"的时候 |
domInteractive | 返回用户代理把其文档的 "current document readiness" 设置为 "interactive"的时候. |
domContentLoadedEventStart | 返回文档发生 DOMContentLoaded事件的时间 |
domContentLoadedEventEnd | 文档的DOMContentLoaded 事件的结束时间 |
domComplete | 返回用户代理把其文档的 "current document readiness" 设置为 "complete"的时候 |
loadEventStart | 文档触发load事件的时间。如果load事件没有触发,那么该接口就返回0 |
loadEventEnd | 文档触发load事件结束后的时间。如果load事件没有触发,那么该接口就返回0 |
记录使用Performance API遇到的问题相关推荐
- 如何使用 Performance API
本教程介绍了如何使用 Performance API 记录来自访问您的应用程序的真实用户的类似 DevTool 的统计信息. 使用浏览器 DevTools 评估 Web 应用程序性能很有用,但复制实际 ...
- 深入理解前端性能监控—Performance + 腾讯superProfiler(基于Performance API的性能监控工具)
https://segmentfault.com/a/1190000018785911 在同样的网络环境下,有两个同样能满足你的需求的网站,一个唰的一下就加载出来了,另一个白屏转圈转了半天内容才出来, ...
- 【Go API 开发实战 7】基础 3:记录和管理 API 日志
记录和管理 API 日志 本节核心内容 Go 日志包数量众多,功能不同.性能不同,本教程介绍一个笔者认为比较好的日志库,并给出原因 介绍如何初始化日志包 介绍如何调用日志包 介绍如何转存(rotate ...
- Performance API
一.写在前面 Performance api用于精确度量,控制,增强浏览器的性能表现.这个API为了测量网站性能,提供以前没有办法做到的精度. 比如:为了得到脚本运行的准确时间,需要一个高精度时间戳. ...
- 浅谈浏览器对象——Performance API
为了得到脚本运行的精确耗时,需要一个高精度时间戳,传统的做法是使用Date对象的getTime方法,其不足之处在于: 1) getTime方法及Date对象的其他方法只能精确到毫秒级别,无法得到更小的 ...
- 性能分析工具和 Performance API
性能分析 灯塔(lighthouse)指标详解 性能名词解释 FCP (First Contentful Paint) LCP (Largest Contentful Paint) TBT (Tota ...
- java aws s3 文件上传_java-用于在S3中上传文件并在DB中写入记录的AWS API
我需要限制一个AWS后端API,该API允许我的移动应用程序的用户在Amazon S3中上传文件(图像). 创建与Amazon S3直接接口的API并不是一种选择,因为我将无法将上传的文件与Dynam ...
- 详解网页性能参数 performance API
详解网页性能参数 performance 浏览器核心工作 performance 对象 performance 方法 本文要点: 介绍浏览器核心工作流程: 介绍 performance 对象及方法.通 ...
- performance API 中什么指标可以衡量首屏时间
performance.timing.loadEventEnd:返回当前网页 load 事件的回调函数运行结束时的 Unix 毫秒时间戳.如果该事件还没有发生,返回 0. performance.ti ...
最新文章
- 大中型企业的天网:Apache Geode
- 单张图像就可以训练GAN!Adobe改良图像生成方法 | 已开源
- Campus Address
- [模板]平面最近点对
- Hadoop0.20.2版本在Ubuntu下安装和配置
- 苏宁双11战报:0点~1点 线上订单同比增72%
- 深信服单点登入代理服务取AD
- 发那可g10_fanuc系统中的G10格式会根据输入的数据不同而不同
- 阿里巴巴分布式服务框架HSF
- 蜂鸣器常见错误电路分析
- Scarlett~スカーレット 有感,新的价值观
- html中图片旋转木马,教你怎么用CSS3做一个图片的旋转木马效果
- JavaScript 对象大全
- HDOJ题目分类大全
- 4.Python数据结构与算法分析课后习题__chapter4
- css布局-多行文字垂直居中
- 【Matlab】三次样条插值实现
- LeetCode二叉树系列——515.最每个树行中找最大值
- vSphere6.7备份工具的比较
- DHT11温湿度传感器学习笔记
热门文章
- 云计算之路-试用Azure:数据库备份压缩文件在虚拟机上的恢复速度测试
- Openxml: 导出excel 设置 cell的格式
- JPress v2.0-rc.5 发布,同时新官网上线
- 【剑指offer】10A--求裴波那切数列的第n项,C++实现
- 1、Expect 远程登录linux系统
- 一个APP“感知”北京门头沟的城市智慧
- Android自定义View探索—生命周期
- android AsyncTask 的分析与运用
- CSS选择器(转载)
- [Android Training视频系列]2.4 Recreating an Activity