上报相关performance对象初略介绍

最新推荐文章于 2025-06-26 20:37:24 发布
最新推荐文章于 2025-06-26 20:37:24 发布
阅读量667 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/formyth/article/details/42496575

概述

最近在做一个上报相关的需求，该需求指定上班的内容中包含页面记载的事件、请求花费的事件、以及DOM渲染所要完成的时间等。
为此查阅了大量的文档，收集了很多资料，所以趁热打铁，把自己所了解的记录下来，方便以后查询。

performance对象介绍

浏览器暴露给js的一个接口，可以通过这个接口查看用户访问网站的连接建立时间、dns时间等信息。使用该api时需要在页面完全加载完成之后才能使用，最简单的办法是在window.onload事件中读取各种数据，因为很多值必须在页面完全加载之后才能得出。

浏览器支持情况

IE9和chrome6以上的版本都支持：

pc端

  1. window.performance : ie9
  2. window.webkitPerformance : chrome6-9
  3. window.performance : chrome10+

移动端

  1. android4.0

performance是ECMAScript5中新增的一个特性，对于该特性，所支持的浏览器并不多。

属性和方法

属性
  • performance.timing ：performance对象的timing属性指向一个对象，它包含了各种与浏览器性能有关的时间数据，提供浏览器处理网页各个阶段的耗时，这也是本文介绍的重点。
  • performance.navigation ：网页导航的相关对象。
  • performance.memory ：浏览器内存情况相关对象。
方法
  • performance.getEntries ：浏览器获取网页时，会对网页中每一个对象（脚本文件、样式表、图片文件等等）发出一个HTTP请求。
  • performance.mark：mark方法用于为相应的视点做标记。
  • performance.now：performance.now方法返回当前网页自从performance.timing.navigationStart到当前时间之间的微秒数（毫秒的千分之一）

上报相关内容

上报相关的内容，大部分在performance.timing里面，performance.timing中包含的属性有：

  • 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.timing各个属性的差值组成的，常用的有：

  • DNS查询耗时 ：domainLookupEnd - domainLookupStart
  • TCP链接耗时 ：connectEnd - connectStart
  • request请求耗时 ：responseEnd - responseStart
  • 解析dom树耗时 ： domComplete - domInteractive
  • 白屏时间 ：responseStart - navigationStart
  • domready时间 ：domContentLoadedEventEnd - navigationStart
  • onload时间 ：loadEventEnd - navigationStart

帮助文档

performance对象：高精度时间戳

window.performance 详解

使用简洁的 Navigation Timing API 测试网页加载速度（不完全译文）

Chrome Developer Tools之网络监控与调优

关键字搜索：performance.timing 、performance 上报

formyth
关注
前端性能优化之自定义性能指标及上报方法详解
LuckyWinty的博客
01-14 902
背景性能优化是所有前端人的追求，在这条路上，方法多种多样。这篇文章，说一下利用浏览器的一些API，可以怎样进行自定义性能指标及上报。PS：后面会出一篇利用chrome开发者工具进行性能分...
performance对象1
08-08
- `performance.timing`：这是一个包含了与浏览器性能相关时间数据的对象，提供了从页面开始加载到完全渲染完成各个阶段的时间信息，如`navigationStart`、`redirectStart`、`redirectEnd`、`fetchStart`、`...
web计时机制——performance对象
weixin_33725722的博客
03-09 352
前面的话 　　页面性能一直都是Web开发人员比较关注的领域。但在实际应用中，度量页面性能的指标，是javascript的Date对象。Web Timing API改变了这个局面，让开发人员通过javascript就能使用浏览器内部的度量结果，给出了页面加载和渲染过程的很多信息，对性能优化非常有价值。本文将详细介绍web Timing API——performance对象   简述 　　We...
前端性能优化利器：深入解读 window.performance
最新发布
mutuyxy的博客
06-26 906
window.performance 是浏览器提供的用于获取网页性能数据的接口，帮助开发者分析页面加载速度、资源请求时间、脚本执行效率等关键指标。
Performance前端性能监控利器
zhxh0376的专栏
03-29 1160
Performance前端性能监控利器,前端性能监
performance-report页面性能、资源、错误、ajax，fetch请求上报插件 完善小巧
weixin_34195364的博客
04-17 266
performance-report只做页面性能数据的采集和上报，是比较完整和健全的数据上报插件，它可以帮你完成以下功能：当前页面URL (data.page)上一页面URL （data.preUrl）当前浏览器版本信息 （data.appVersion）页面性能数据信息 （data.performance），例如：页面加载时间，白屏时间，dns解析时间等当前页面错误信息 （data.errorL...
window.performance（前端性能监控并进行上报）
编码世界
09-25 1657
Web Performance提供了可以通过的函数（performance 属性提供）测试当前网页或者 web应用的性能，获取更为精确的原始数据，以毫秒为单位。一般放在window.onload事件中读取各种数据，有些值必须在页面完全加载之后才能得出。
.NET性能调优之一：ANTS Performance Profiler的使用介绍
10-27
本系列文章主要会介绍一些.NET性能调优的工具、Web性能优化的规则（如YSlow）及方法等等内容。成文前最不希望看到的就是园子里不间断的“哪个语言好，哪个语言性能高”的争论，不多说，真正的明白人都应该知道这样的...
performance
03-03
Jenkins 中使得Jmeter插件
Performance Plugin
07-23
通过Jenkins实现性能测试持续集成插件，使用此插件可满足测试报告等要求，专业、安装简单，欢迎下载~欢迎转载~
Performance — 前端性能监控利器 使用示例
huangkang1995的博客
11-20 648
Performance — 前端性能监控利器 使用示例 转载 https://blog.youkuaiyun.com/blueblueskyhua/article/details/78830692 Performance 方法详解 可点击此处查看 还记得在我上一家公司中，某一大佬做了一个监控系统，牛逼哄哄，挺想研究他到底是怎么搞出来的。当然我们也不是拍拍脑袋干活的人，总不能人家咋干我们就咋干。下面先就介绍下，这样的平台到底有啥好处。 背景 首先我们为什么要做前端系统呢，先看下面这张表，可以很显然的看出，前端的性能对于产
详解网页性能参数 performance API
杏子
01-13 9749
本文要点： 1. 介绍浏览器核心工作流程； 2. 介绍 performance 对象及方法。通过 performance 对象详解网页各项资源耗时及内存占用情况（精确到每个资源的DNS 解析时间，TCP连接时间等）。
Web API——Performance属性了解和使用
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
12-15 3755
详细介绍在做性能监控时，要了解的Web API——performance的属性和使用
window.performance对象
haoyanyu_的博客
03-10 620
通过window.onpageshow的事件对象的persisted属性可以判断页面是否是从缓存读取的。 但试了几次，不管刷新还是前进后退persisted都是false。 查了一下看到一个新对象 window.performance属性如下： 其中有个navigation属性，里面的type也是来标记当前页面是刷新还是前进后退打开的 memory表示js占用的内存情况； navigation....
打开网页一瞬间样式没加载出来_网页性能检测performance
weixin_39579483的博客
12-12 325
网页性能检测-performance上一篇讲到看懂Chrome浏览器自带的Performance性能监控,但很多时候我们希望的是主动收集客户端的数据，浏览器的调试工具就有些无法满足了。推荐使用window.performance对象。一、performance是什么允许网页访问某些函数来测量网页和Web应用程序的性能，包括 Navigation Timing API和高分辨率时间数据。来...
window.performance对象里各个属性详解+js监听后退操作
陈坚泓的博客
11-18 2636
window.performance对象详解 window.performance是W3C性能小组引入的新的API，允许网页访问某些函数来测量网页和Web应用程序的性能，包括Navigation Timing API和高分辨率时间数据。 目前IE9以上的浏览器都支持。 一个performance对象的完整结构如下图所示：(下方有详细介绍) 详见下述说明： // 获取 performance 数据...
测试篇：性能监测之Performance、LightHouse 与性能 API
2401_84092574的博客
04-11 967
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！[外链图片转存中…(img-LTEeurDg-1712798155935)][外链图片转存中…(img-ZaAwJufL-1712798155936)]
深入理解前端性能监控
weixin_33916256的博客
04-08 671
在同样的网络环境下，有两个同样能满足你的需求的网站，一个唰的一下就加载出来了，另一个白屏转圈转了半天内容才出来，如果让你选择，你会用哪一个？ 页面的性能问题是前端开发中一个重要环节，但一直以来我们没有比较好的手段，来检测页面的性能。直到W3C性能小组引入的新的API window.performance，目前IE9以上的浏览器都支持。它是一个浏览器中用于记录页面加载和解析过程中关键时间点的对...
Performance对象
04-03
### JavaScript Performance API 使用方法及属性介绍 #### 1. `performance.now` 方法 `performance.now()` 是一种高精度的时间测量工具，它返回自页面加载以来经过的毫秒数，精确到微秒级别。这种方法非常适合用于性能分析中的时间差计算[^1]。 ```javascript const start = performance.now(); // 执行一些操作... for (let i = 0; i < 1e7; i++) {} const end = performance.now(); console.log(`执行耗时: ${end - start} ms`); ``` --- #### 2. 获取导航性能数据 通过调用 `performance.getEntriesByType('navigation')` 可以获取关于页面导航的信息，例如加载时间和重定向次数等[^2]。 ```javascript const navigationData = performance.getEntriesByType('navigation'); if (navigationData.length > 0) { console.log(navigationData[0].type); // 导航类型（如 'navigate', 'reload'） console.log(navigationData[0].duration); // 页面加载总耗时 } ``` --- #### 3. 支持的资源类型 Performance API 提供了多种类型的性能指标，这些类型可以通过 `PerformanceObserver.supportedEntryTypes` 属性查询。以下是常见的几种： - **Navigation**: 表示整个页面的加载过程。 - **Resource**: 记录外部资源（如图片、脚本）的加载情况。 - **Paint**: 跟踪首次绘制和内容可见的时间点。 - **Long Task**: 检测主线程上超过 50ms 的阻塞任务。 具体实现如下所示[^3]: ```javascript console.log(PerformanceObserver.supportedEntryTypes); // 输出可能为 ["element", "event", ..., "navigation", "paint", "resource"] ``` --- #### 4. 创建 Performance Observer 实例 为了监听特定事件并捕获其性能记录，可以创建一个 `PerformanceObserver` 对象实例。这有助于实时监控某些性能度量的变化。 ```javascript new PerformanceObserver((list, observer) => { list.getEntries().forEach(entry => { if (entry.entryType === 'paint') { console.log(`${entry.name}: ${entry.startTime}`); } }); }).observe({ type: 'paint', buffered: true }); ``` 上述代码片段会观察所有的 paint 类型条目，并打印它们的名字及其启动时间。 --- #### 5. 测量标记之间的间隔 利用 `performance.mark`, `performance.measure` 和其他关联函数能够定义自定义时间段以便更精细地控制性能评估流程。 ```javascript performance.mark('start-mark'); function heavyComputation() { let sum = 0; for (let i = 0; i < 1e8; ++i) { sum += Math.random(); } } heavyComputation(); performance.mark('end-mark'); performance.measure('computation-time', 'start-mark', 'end-mark'); const measures = performance.getEntriesByName('computation-time'); console.log(measures[0].duration); // 清理已使用的 mark/measure 数据 performance.clearMarks(); performance.clearMeasures(); ``` 此段程序展示了如何设置两个标志位以及衡量两者间所花费的实际运算周期长度。 --- ### 总结 JavaScript Performance API 不仅提供了丰富的接口来帮助开发者深入了解应用的表现状况，还允许我们针对不同场景采取相应的优化策略。无论是简单的计时还是复杂的网络请求追踪，都可以借助这一强大功能完成高效调试工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值