获取页面性能相关信息-Performance

已于 2023-11-03 17:06:13 修改
阅读量30 收藏
点赞数
文章标签： 前端
于 2023-11-03 17:04:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69699689/article/details/134207088
版权

Performance 接口可以获取到当前页面中与性能相关的信息

详情可见：Performance - Web API 接口参考 | MDN

使用：获取某个操作运行的时间

const startTime = performance.now()
// 此处是进行的操作
console.log(performance.now() - startTime,'xxxxx')

是三三啊～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js获取页面的性能指标
liuhao9999的博客
05-19 489
getPerformanceData() { const { timing } = window.performance as any; const { navigationStart = 0, // 准备加载页面的起始时间 // unloadEventStart = 0, // 如果前一个文档和当前文档同源,返回前一个文档开始unload的时间 // unloadEventEnd = 0, // 如果前一个文档和当前文档同源,返回前一个文档开始.
前端性能优化-Performance详解
liuhao9999的博客
11-18 1344
Performance接口可以获取到当前页面中与性能相关的信息。 它是 High Resolution Time API 的一部分，同时也融合了Performance Timeline API、Navigation Timing API、User Timing API和Resource Timing API。 该类型的对象可以通过调用只读属性Window.performance来获得。 注意：除了以下指出的情况外，该接口及其成员在Web Worker中可用。此外，还需注意，perfo...
前端性能监控利器-performance
happy任的博客
10-04 1592
一、前言 最近在阅读Vue源码时，发现了Vue当中使用到了performance的mark&measure方法，针对此api特此深入研究了一下performance的使用方法以及其作用。 二、performmance介绍 Performance对象里出现了4个属性： 1、timing对象提供了各种与浏览器处理相关的时间数据。具体如下表 名称 作用（这里所有时间戳...
前端性能监控API-performance
weixin_45938101的博客
06-23 282
前端监控包括性能、错误、轨迹、热点等，之前用过的也就百度统计hmjs，其它知道的也就badjs、fundebugjs、frontjs等。估计很多大公司都有自己编写的库。 今天学习一下前端性能监控的API-performance。随便打开一个网页，然后控制台打印一下这个performance， memory：内存使用情况，是 Chrome 添加的一个非标准扩展，这个属性提供了一个可以获取到基本内...
html页面性能分析,前端性能监控之performance
weixin_42463480的博客
06-03 1274
如果我们想要对一个网页进行性能监控，那么使用window.performance是一个比较好的选择。我们通过window.performance可以获取到用户访问一个页面的每个阶段的精确时间,从而对性能进行分析。一、页面性能监控1、利用performance.timing来监控网页的性能网页的整个生命周期PerformanceTiming属性如下PerformanceTiming.navigati...
Gitlab性能测试工具--Gitlab Performance Tool（GPT）
weixin_42681866的博客
04-10 1817
文章目录GPT相关文献测试环境搭建关于option配置的详解总结   Gitlab的升级迭代是非常快的，为了应对这么快的迭代发布，它也提供了一个非常好用的性能测试工具：Gitlab Performance Tool，简称GPT，通过GPT当我们需要搭建一个线上可靠的Gitlab高性能平台时，可以通过它来测试一些性能。   GPT虽然好用，但有个限制就是仅支持12.5及12.5版本后的Gitlab，而且一共推出了两个版本；经测试，两个版本都有同样的限制，这限制主要是其有个项目数据需要导入gitlab，然后基于
推荐使用：@shopify/react-native-performance - 让你的React Native应用性能飙升！
gitblog_00034的博客
05-17 331
推荐使用：@shopify/react-native-performance - 让你的React Native应用性能飙升！ 项目地址:https://gitcode.com/Shopify/react-native-performance 在构建高性能的React Native应用程序时，监控和优化性能是至关重要的。为此，我们向您推荐@shopify/react-native-performa...
Performance：前端页面性能监控
南乔几经秋、的博客
01-17 2103
Performance 接口可以获取到当前页面中与性能相关的信息。该类型的对象可以通过调用只读属性 Window.performance 来获得。 1、属性 （1）Performance.navigation 提供了在指定时间内发生的操作相关信息，包括redirectCount和type两个属性：     redirectCount：重定向属性，返回当前页面发生了几次重定向。     t...
前端性能监控-window.performance
hb_zhouyj的博客
05-06 2278
在同样的网络环境下，有两个同样能满足你的需求的网站，一个唰的一下就加载出来了，另一个白屏转圈转了半天内容才出来，如果让你选择，你会用哪一个？ Performance是一个做前端性能监控离不开的API，最好在页面完全加载完成之后再使用，因为很多值必须在页面完全加载之后才能得到。最简单的办法是在window.onload事件中读取各种数据。 页面的性能问题是前端开发中一个重要环节，但一直...
page-performance:页面性能
06-10
开发者通常会使用Chrome DevTools等工具来监测页面性能，其中包含的Timeline或Performance面板能记录页面从加载到完全展现的每一个阶段所耗费的时间。这些信息有助于识别性能瓶颈，比如DOM解析、脚本执行、样式计算...
performance-sdk:页面性能监控sdk
05-24
页面性能监控sdk 浏览器兼容性 请参考： 优势 浏览器原生支持，准确性高 能够获取到更多的数据，例如DNS解析时间、重定向时间、白屏时间、首屏时间等 支持页面首次渲染时间的采集 可定制化程度高 支持在网页加载完成...
meteor-performance-test:流星性能测试演示
06-02
开发者可以通过运行这些测试，获取性能数据，并根据结果优化流星应用的性能。同时，这个项目也可以作为其他流星开发者学习如何进行性能测试的参考。 总的来说，"meteor-performance-test"项目是一个深入理解流星...
mage-eav-option-performance-fix:目录产品页面和列表的性能瓶颈
06-22
标题"mage-eav-option-performance-fix:目录产品页面和列表的性能瓶颈"指向了Magento平台在展示产品目录和列表时可能遭遇的性能问题，特别是与EAV模型相关的优化问题。 描述提到的性能修复集中在Magento的EAV模块，...
Performance Timing Test:使用此附加Firefox获取任何页面的准确性能计时-开源
05-15
使用Web API测量任何网页的计时性能。 您可以立即将图表测试结果保存在文件系统中，以便与其他后续测试进行比较。 获取Opera扩展：http://bit.ly/1O9OvRx获取Firefox扩展：http://mzl.la/1Vs0UV2 ==安装== 1.单击...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 388
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1241
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1732
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 403
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
window.performance 性能监控
06-08
开发人员可以利用这些信息来优化页面性能，提高用户体验。比如可以使用 performance.timing 来获取页面加载时间，使用 performance.memory 来获取内存占用情况，还可以使用 performance.mark 和 performance.measure...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值