window.performance参数详细解析

网页性能监测详解
最新推荐文章于 2025-06-26 20:37:24 发布
最新推荐文章于 2025-06-26 20:37:24 发布
阅读量516 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/canulook/p/9996347.html
本文深入讲解了网页性能监测的关键指标，包括performance API的各种方法和属性，如performance.mark(), performance.now(), 以及PerformanceTiming对象的详细属性说明，帮助开发者理解如何测量和优化网页加载速度。
方法
 
performance.mark( )  从navigetionStart事件发生时刻到记录时刻间隔的毫秒数
 
performance.now( ) 从navigetionStart事件发生时刻到调用该方法间隔的毫秒数
 
 
属性
 
performance.timing  是一个PerformanceTiming 对象，包含延迟相关的性能消息。
 
performance.navigation 是一个  PerformanceTiming 对象，表示在当前给定浏览上下文中网页导航的类型
 
 
performance.timing（单位：毫秒）
 
PerformanceTiming.navigationStart  
表征了从同一个浏览器上下文的上一个文档卸载结束时的UNIX时间戳，如果没有上一个文档，这个值和PerformanceTiming.fetchStart相同
 
PerformanceTiming.unloadEventStart
表征了unload事件抛出时的UNIX时间戳。如果没有上一个文档，这个值返回0
 
PerformanceTiming.unloadEventEnd
表征了unload事件处理完成时的UNIX时间戳。如果没有上一个文档，这个值返回0
 
PerformanceTiming.redirectStart
表征了HTTP重定向开始时的UNIX时间戳。如果没有重定向，或者重定向中的一个不同源，这个值返回0
 
PerformanceTiming.redirectEnd
表征了unload事件处理完成时（HTTP响应的最后一个比特直接被收到）的UNIX时间戳。如果没有重定向，或者重定向中的一个不同源如果没有上一个文档，这个值返回0
 
PerformanceTiming.fetchStart
表征了浏览器准备好使用HTTP请求来获取(fetch)文档的UNIX时间戳。这个时间点会在检查任何应用缓存之前
 
PerformanceTiming.domainLookupStart
表征了域名查询开始的UNIX时间戳，如果建立了持久连接，或者这个信息存储到了缓存或者本地资源上，这个值和PerformanceTiming.fetchStart相同
 
PerformanceTiming.domainLookupEnd
表征了域名查询结束的UNIX时间戳，如果建立了持久连接，或者这个信息存储到了缓存或者本地资源上，这个值和PerformanceTiming.fetchStart相同
 
PerformanceTiming.connectStart
返回了HTTP请求开始向服务器发送时的UNIX时间戳，如果建立了持久连接，这个值和PerformanceTiming.fetchStart相同
 
PerformanceTiming.connectEnd
返回了HTTP与服务器连接建立（所有的握手和认证过程全部结束）时的UNIX时间戳，如果建立了持久连接，这个值和PerformanceTiming.fetchStart相同
 
PerformanceTiming.secureConnectionStart
返回浏览器与服务器开始安全链接时的握手时的UNIX时间戳。如果当前网页不要求安全连接，则返回0
 
PerformanceTiming.requestStart
返回浏览器向服务器发出HTTP请求时（或者开始读取本地缓存时）的UNIX时间戳
 
PerformanceTiming.responceStart
返回浏览器从服务器收到（或者本地缓存/本地资源读取时）第一个字节的UNIX时间戳。如果传输层在开始请求之后失败并且连接被重开，该属性会成为新的请求的相对应的发起时间
 
PerformanceTiming.responceEnd
返回浏览器从服务器收到（或者本地缓存/本地资源读取时）最后一个字节（如果在此之前HTTP连接已经关闭，则返回关闭时）的UNIX时间戳。
 
PerformanceTiming.domLoading
返回当前网页DOM结构开始解析时（即Document.readyState属性变为‘loading’、相应的readystatechange事件触发时）的UNIX时间戳。
 
PerformanceTiming.domInteractive
返回当前网页DOM结构解析结束，开始加载内嵌资源时（即Document.readyState属性变为‘interactive’、相应的readystatechange事件触发时）的UNIX时间戳。
 
PerformanceTiming.domContentLoadedEventStart
返回当解析器发送DOMContentLoaded事件，即所有需要被执行的脚本开始被解析时的UNIX时间戳。
 
PerformanceTiming.domContentLoadedEventEnd
返回当解析器发送DOMContentLoaded事件，即所有需要被执行的脚本已经被解析完毕时的UNIX时间戳。
 
PerformanceTiming.domComplete
返回当前文档解析完成，即Document.readyState变为'Complete',对应的readystatechange 被触发时的UNIX时间戳。
 
PerformanceTiming.loadEventStart
表征了load事件抛出时的UNIX时间戳。如果这个事件还未发送，这个值返回0
 
PerformanceTiming.loadEventEnd
表征了load事件处理完成时的UNIX时间戳。如果这个事件还未发送，或者尚未完成，这个值返回
 
 
 

转载于:https://www.cnblogs.com/canulook/p/9996347.html

【JS】前端性能分析之 window.performance
YzzHA 的博客
05-17 1480
Web Performance 接口允许网页中的 JavaScript 代码可以通过具体的函数（由 window 对象的 performance 属性提供）测量当前网页页面或者 web应用的性能。它能提供高精度的时间戳，可以更加精准的计算脚本运行的时间 效果预览⬇️，参考简书的网页源代码实现，控制台切换成 H5 即可 API performance对象的timing属性指向一个对象，它包含了各种与浏览器性能有关的时间数据，提供浏览器处理网页各个阶段的耗时。我们在chrome中输入performanc..
Window Performance API
Bruce__taotao的博客
08-28 2184
Window Performance API 是一组浏览器提供的接口，用于收集和分析网页性能数据。它允许开发者精确地测量网页加载时间、资源加载时间、用户交互延迟等性能指标，从而优化用户体验。1. 主要接口1.1返回一个高精度时间戳，通常用于计算精确的时间差。例如，你可以用它来测量函数执行时间。使用场景: 精确计算代码段的执行时间。// 执行某个任务console.log(`执行时间:${// 执行某个任务 const end = performance . now();
window.performance
panying0903的专栏
05-27 5943
目前只在chrome中调研 在chrome控制台执行window.performance，会出现下面结果： 简单介绍performance中的属性： memory：{ jsHeapSizeLimit: 1136000000 // 内存大小限制 totalJSHeapSize: 16100000 // 可使用的内存 usedJSHeapSize:
前端性能优化利器：深入解读 window.performance
最新发布
mutuyxy的博客
06-26 910
window.performance 是浏览器提供的用于获取网页性能数据的接口，帮助开发者分析页面加载速度、资源请求时间、脚本执行效率等关键指标。
【性能优化】：window.open参数对页面响应速度的影响
本文重点探讨了浏览器的多窗口和弹窗机制，并详细分析了window.open函数的参数及其对页面性能的影响。通过对基础和高级参数的详解，文章揭示了参数设置如何影响页面打开方式和浏览器安全策略。同时，本文深入探讨...
【窗口管理艺术】：精通JavaScript中window.open参数的高级应用
本文详细介绍了window.open的常规参数、特殊功能参数以及安全性和隐私参数，深入解析了各类参数的作用、格式和应用。同时，探讨了window.open的高级功能实践，包括弹窗控制、动态内容加载和第三方库整合。为了提升...
Performance API
weixin_47450807的博客
04-04 1700
一、写在前面 Performance api用于精确度量，控制，增强浏览器的性能表现。这个API为了测量网站性能，提供以前没有办法做到的精度。 比如：为了得到脚本运行的准确时间，需要一个高精度时间戳。传统的做法是使用Date对象的getTime方法。 var start = new Date().getTime() let i = 100 while(i) { console.log('111') i-- } var now = new Date().getTime() var latency
利用window.performance.timing进行性能分析
01-05 838
利用window.performance.timing进行性能分析 性能分析。。。 window.performance.timing中相关属性语义： // .navigationStart 准备加载页面的起始时间 // .unloadEventStart 如果前一个文档和当前文档同源,返回前一个文档开始unload的时间 // .unloadEve...
window.performance（监控网页与程序性能）
u014481405的博客
07-17 4671
window.performance（监控网页与程序性能）performance对象的完整结构1. performance的memory属性对象2. performance的navigation属性对象3. performance的timing 属性对象timing属性的整体结构如下图timing 属性的解释timing 属性计算出网页性能数据4. performance.getEntries() 方法5. performance.now() 方法6. performance.mark()方法 perfor
window.performance（监控网页与程序性能分析）
m0_55720439的博客
07-27 2184
网页性能优化
window.performance（前端性能监控并进行上报）
编码世界
09-25 1657
Web Performance提供了可以通过的函数（performance 属性提供）测试当前网页或者 web应用的性能，获取更为精确的原始数据，以毫秒为单位。一般放在window.onload事件中读取各种数据，有些值必须在页面完全加载之后才能得出。
window.performance对象
haoyanyu_的博客
03-10 620
通过window.onpageshow的事件对象的persisted属性可以判断页面是否是从缓存读取的。 但试了几次，不管刷新还是前进后退persisted都是false。 查了一下看到一个新对象 window.performance属性如下： 其中有个navigation属性，里面的type也是来标记当前页面是刷新还是前进后退打开的 memory表示js占用的内存情况； navigation....
window.performance详解
weixin_39616739的博客
10-13 4512
performance的作用 浏览器暴露给js的一个接口，可以通过这个接口查看用户访问网站的连接建立时间、dns时间等信息。使用该api时需要在页面完全加载完成之后才能使用，最简单的办法是在window.onload事件中读取各种数据，因为很多值必须在页面完全加载之后才能得出。 浏览器支持情况 IE9和chrome6以上的版本都支持： pc端 window.performance : ie9 wi...
使用window.performance进行浏览器性能测试
ningzero123的专栏
08-29 2298
互联网产品开发过程中，想了解用户体验一直是一件比较困难的事情。之前很难使用js获得用户访问网站的连接建立时间、dns时间等信息，想得到这些信息一般是建立固定的监测点或者使用专门的测试客户端软件。不过，现在情况有所改变，IE9和chrome6以上的版本都支持了一个新的api：window.performance（ ie9中为window.msPerformance，chrome6-9为window.
前端性能监控-window.performance
Bright2017的博客
11-20 626
Performance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。
const largeObjectArray = this.createLargeObjectArray(); const newWatch = (callback) =>{ // table 打印时间 const tablePrintTime = this.calculateTime(() => { console.table(largeObjectArray); }); // 普通输出时间 const printLogTime = this.calculateTime(() => { console.log(largeObjectArray); }); // 有效时间检测（排除0值） if (tablePrintTime > 0 && printLogTime > 0) { // 动态阈值判断（当前值对比） if (tablePrintTime > printLogTime * 10) { console.log('时间对比新', tablePrintTime, printLogTime); callback(true); return; } } callback(false); }addListener(function(isOpen) { if (isOpen) { if ( document.body.innerHTML.indexOf('检测到非法调试,即将关闭此页面') < 0 ) { newWatch((isDetected) => { console.log('是什么', isDetected) if (isDetected) { document.body.innerHTML = '检测到非法调试,即将关闭此页面!'; alert('检测到非法调试,即将关闭此页面!'); window.location.href = 'about:blank'; if (window.history.replaceState) { window.history.replaceState( null, '', window.location.pathname + window.location.search, ); } } }); } } }); // 开始检测 launch(); // 禁用开发者工具 createLargeObject() { // 新 if (!this._largeObject) { this._largeObject = Array.from({length: 500}, (_, i) => ({ key: i, value: `${i}` }) ); } return this._largeObject; } // 创建大对象数组 createLargeObjectArray() { // 新 return Array(50).fill(this.createLargeObject()); } // 计算打印执行时间 calculateTime(func) { //新 const start = performance.now(); // 改用高精度时间 func(); return performance.now() - start; }以上代码在ie执行会报错么
03-15
- 影响范围：`newWatch`函数定义、回调函数参数 2. $\textcolor{red}{console.table()}$： - IE11及以下不支持此方法 - 会导致`TypeError`：执行到`console.table(largeObjectArray)`时会中断脚本 3. $\...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值