chrome性能监视器使用

最新推荐文章于 2025-03-24 21:26:49 发布
最新推荐文章于 2025-03-24 21:26:49 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： 前端 文章标签： chrome 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42346558/article/details/130943769
版权
文章描述了一个前端页面因加载大量数据导致的卡顿问题。在问题排查中，发现进入页面时CPU使用率100%，DOM元素持续增加，尤其是有一个返回8w数据的接口。解决方案是延迟加载列表，实现分页，并确保退出时销毁DOM以减轻性能负担。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、问题背景

前端开发反映进入编辑页面卡顿，但是排查不出问题

2、问题排查

  • 模拟发现进入后整个浏览器卡顿，怀疑是有死循环或者大量数据加载导致cpu高

  • 打开性能监视工具
    在这里插入图片描述

  • 查看CPU和DOM-发现每次进入页面CPU100%，而且DOM是一直递增，怀疑前端一开始就加载大量数据并且每次退出没有销毁DOM

  • 在这里插入图片描述

  • 查看NetWork请求-发现有个接口返回8w数据，前端渲染列表
    在这里插入图片描述

  • 至此，问题比较清晰了，前端进入页面加载大量数据导致耗CPU高

3、解决方案

  • 一开始进入页面不加载列表，选中再加载并且列表需要改为分页
  • 退出页面要销毁DOM
使用Google开发工具实现性能监控
小小渔夫
05-06 2066
前言 性能监控能通过压缩平均恢复时间来减少应用程序的停机时间，或者记录某个应用程序从发生问题到恢复正常，一共花费了多久，并且能够通过检查识别性能瓶颈来提高应用程序性能。性能监控主要监控CPU、内存、数据包流量等方面，本文主要介绍使用Google开发工具对web端网页进行监控。 正文 1、首先打开稳定版Google浏览器，输入“chrome://flags/#enable-devtools-e......
JavaScript性能监视器
08-08
为了有效地使用JavaScript性能监视器，开发者应该了解如何解读这些指标，并根据结果调整代码。例如，如果FPS低，可能需要优化渲染逻辑；如果内存占用过高，可能需要找出内存泄漏的原因；CPU使用率过高，则可能需要...
Chrome DevTools - 性能监控
weixin_34261415的博客
12-18 290
原文地址：Chrome DevTools- Performance monitor 原文作者：malyw 译文出自：掘金翻译计划 本文永久链接：github.com/xitu/gold-m… 译者：Cherry 校对者：萌萌、noahziheng Chrome DevTools - 性能监控 你是否经常需要 JavaScript 或者 CSS 进行优化，但是不能找到一个简单的方式来衡量优化...
Chrome Performance 面板完全指南：从卡顿到丝滑的终极调试术
最新发布
mutuyxy的博客
03-24 1606
前端性能调试是优化网页加载速度和运行效率的关键步骤，Chrome DevTools 的 Performance 面板 是核心工具;
如何使用 Chrome DevTools 进行前端性能监控和调试？
wangbo_angel的博客
06-07 1400
通过这些工具和面板，你可以全面监控和调试前端性能，识别瓶颈，优化代码，提高网页的加载速度和运行效率。记得在开发过程中定期进行性能测试，确保优化措施的有效性。
chrome浏览器Performance性能监控火焰图详解
11-07 2226
使用前，我们最好打开Chrome的无痕模式。因为Chrome上一般有着大量的插件，会或多或少的影响页面的性能，所以我们关掉这个来避免对页面性能的影响。我们每一次的UI的变化，都要经历以下步骤：我们都知道像素管道有五步，。人的眼睛大约每秒可以看到 60 帧，那么就代表我们每 16.7ms 就要看到 1 帧，一帧就要经历上图的 5 步，说明我们的每一个任务（task） 不宜过长，这样就会导致用户对于界面感知的不友好性fps 是指页面每秒帧数fps = 60 性能极佳。
带你了解Chrome性能监测~
guoth的博客
10-14 2131
描述：通过勾选复选框展开表格项目单项，936ms将近1s的延迟后界面呈现效果【数据量大时可能延迟更高】。 表头40列，通过最后一列动态控制要渲染的表头数据，默认只展示了 14列。每页展示20条项目，展开后56条。 后台传过来的数据Array，每个Object中包含要使用的至少40个属性。 涉及公司项目，全部关键部分已模糊处理 一、工具： ​ Chrome、vue项目、ScreenToGIf软件 二、问题： （1）复选框状态改变和表格基本延迟后统一改变的； ​ 疑问：vue优先事件执行js，后渲染页面.
stats.js:JavaScript性能监视器
04-05
JavaScript性能监视器 此类提供了一个简单的信息框，可帮助您监视代码性能。 FPS在最后一秒内渲染的帧。 数字越高越好。 MS毫秒需要渲染的帧。 数值越低越好。 MB MB已分配的内存。 （使用--enable-precise-...
掌握JavaScript性能：使用性能监视器优化代码
性能监视器通常包括一系列的指标，如执行时间、内存使用情况、渲染时间和网络请求等，能够帮助开发者在开发过程中及时调整代码，优化性能。 JavaScript作为一门在浏览器端广泛使用的编程语言，其性能对用户体验有着...
gl-bench:GL具有CPUGPU负载的WebGL性能监视器
04-11
WebGL性能监视器，显示GPU / CPU负载的百分比。 屏幕截图 范例/ e2e测试 利弊 优点 缺点 CPU / GPU百分比负载 仅随ES6类提供 酷主题和记录器 尺寸不是那么小 图表显示无效页面或明显的性能下降 一圈进行两次或更多...
性能监视，托管扩展，和锁定工具栏.zip
06-19
例如，Windows操作系统中的任务管理器和Linux的top命令就是性能监视的常见工具。此外，还有很多第三方软件如SolarWinds PerfMon、Splunk和Zabbix等，提供更全面、详细的监控功能。 接下来是“托管扩展”，这是一个...
实时监控chrome进程
01-22
实时监控chrome进程，代码由c#编写，最多可以监控两个进程
Chrome 控制台 performance 性能分析
When you can't win by being better, you can win by being different.
06-20 5120
（4）FMP（First Meaningful Paint）首屏有意义的内容绘制，这个“有意义”没有权威的规定，本质上是通过一种算法来猜测某个时间点可能是 FMP。通过记录这些数据，开发者可以了解网页在不同阶段的性能表现，并找出可能存在的性能问题。通过性能面板，开发者可以记录和分析网页在运行时的性能数据，识别性能瓶颈，并进行针对性的优化。（3）FCP（First Contentful Paint）首屏内容绘制，首次绘制任何文本，图像，非空白canvas 或 SVG 的时间点。：每条彩色横杠表示一种资源。
chrome浏览器控制台性能监控
热门推荐
zem
02-28 1万+
要实现对性能的优化，首先就要做到能合理有效地监控性能，发现哪里的性能出现问题，才能更好地去优化性能，这里我们说说如何通过chrome进行性能监控 1. 通过使用performance monitor来监控 在控制台使用ctrl+shift+p打开command menu，输入performance monitor来监听 可以监听如图的内容 这里的数据比较直观，也就不多说了 2. perform...
监控谷歌浏览器CPU及内存使用情况
qq_39879126的博客
02-21 4606
【代码】监控谷歌浏览器CPU及内存使用情况。
浏览器Performance性能监控使用详解
开发要有产品的思维
01-04 9228
1.Performance 2.测试性能操作流程 3.Performance检测结果详解 区域1：controls【控制栏】 区域2：overview【网页性能总览图】 区域3：火焰图【各项指标的堆叠追踪可视化】 区域4：统计汇总【以图表的形式汇总数据】 4 其他监控性能小工具 4.1 Performance monitor面板：页面性能的实时监控 4.2 实时FPS面板：可以实时展示页面的FPS指标
chrome查看网页性能
月下lk山人的博客
02-02 2175
Performance和Network
【第1156期】Chrome DevTools - 性能监控
前端早读课
01-02 3698
前言去年，其实也就前几天的事情看到的时候还蛮惊讶的，现在浏览器的自带工具都做的这么完善了，秒啊。特别是现在很多H5的动画，在不同的设备上性能差异很大，可以通过这样的工具来了解“毛病”。今日早读文章由@Cherry翻译分享。正文从这开始~你是否经常需要 JavaScript 或者 CSS 进行优化，但是不能找到一个简单的方式来衡量优化的效果？当然，你可以使用时间轴来记录，但是在大多数情况下，时间轴只
深聊性能测试，从入门到放弃之： Windows系统性能监控(一) 性能监视器介绍及使用。
商务合作 | 面试培训 | 职场规划 ==>主页扫码
12-01 9552
感觉自己曾经错过了1个亿....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值