浏览器中performance的基本使用

最新推荐文章于 2024-07-26 16:19:42 发布
最新推荐文章于 2024-07-26 16:19:42 发布
阅读量895 收藏
点赞数
分类专栏： 插件 文章标签： 浏览器插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46547740/article/details/123055188
版权

1.最上面一排为控制按钮
2.overview：FPS、CPU、NET
3.火焰图：CPU的可视化（各种事件、各种network请求详情）
4.统计数据：summary:统计报表，Bottom-Up:事件时长顺序，Call Tree:事件调用顺序，Event log:事件发生的先后顺序

基本使用：
选中加载时长的task
在下面事件调用顺序处查看耗时最长的事件
下面右侧可查看事件调用顺序
找出耗时最长的事件，cv到代码中进行优化
在这里插入图片描述

Gordon-Liu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【走进浏览器】谈一谈浏览器渲染的基本原理
web15085181368的博客
03-02 256
浏览器渲染基本原理 浏览器对于前端工程师，就相当于赛车于赛车手，想要更好的在赛道上驰骋，就需要对自己的赛车有更深入的了解，甚至人车合一，所以本篇文章我们就来打开浏览器的大门，一起努力吧！ 前言 一篇文章很难将所有的细节覆盖，同时我们也不需要将所有流程和每一个环节都摸透，我们就依照脉络来聊一聊浏览器的渲染过程。 我们都知道一个页面通常由三个部分组成，即HTMl+CSS+JS，并通过一系列的步骤转换。 HTML 的内容是由标记和文本组成 CSS 称为层叠样式表，是由选择器和属性组成 JS 是可以使网页的内
chrome浏览器开发工具的基本使用
weixin_44949860的博客
11-09 1185
查看浏览器的版本：chrome://version/ 快捷键 打开内容 Command+ Option+ c Elements Command+ Option+ j Console Command+ Option+ i 打开你之前打开的最后一个面板 command+ [ 或者 command + ] 工具栏左右切换 command + shift + p command列表（里面有很多小功能）值得一提这个截图功能，太强大了 一个扁平的目录ElementsConsoleNe
浏览器performance
weixin_42600407的博客
12-28 303
performance(性能)是指浏览器在处理网页请求、渲染网页以及执行脚本时的效率。一个浏览器的performance可以影响用户体验，因此浏览器开发商会致力于提升浏览器的performance。 有许多因素会影响浏览器的performance，包括： 硬件性能：浏览器会使用计算机的处理器和内存来处理请求和渲染网页，因此计算机的硬件性能会影响浏览器的performance。 网络速度：访问网...
浏览器Performance性能监控使用详解
开发要有产品的思维
01-04 7290
1.Performance 2.测试性能操作流程 3.Performance检测结果详解 区域1：controls【控制栏】 区域2：overview【网页性能总览图】 区域3：火焰图【各项指标的堆叠追踪可视化】 区域4：统计汇总【以图表的形式汇总数据】 4 其他监控性能小工具 4.1 Performance monitor面板：页面性能的实时监控 4.2 实时FPS面板：可以实时展示页面的FPS指标
浏览器的 performance 中多个指标的含义
最新发布
qq_42880714的博客
07-26 1006
浏览器的 performance 中多个指标的含义
浏览器工作原理与实践--页面性能工具：如何使用Performance？
echohuangshihuxue的博客
04-22 907
好了，本节内容就介绍到这里，下面我来总结下本文的主要内容：本节我们首先介绍了如何去配置Performance并生成报告页，然后我们将焦点放在了如何解读报告页上。之后我们介绍了报告页面主要分为三个部分，概览面板、性能面板和详情面板。我们可以通过概览面板来定位问题的时间节点，然后再使用性能面板分析该时间节点内的性能数据。不过在分析数据时，我们需要弄明白性能面板内各项数据指标的含义，要了解这些，需要了解浏览器渲染流水线、浏览器的进程架构等知识点，因此结合这些知识点，我们接下来分析了性能面板的各项指标的含义。
performance的使用
weixin_45449964的博客
02-19 2489
performance工具的使用performance任务管理器performance工具内存的变化TimeLineGC回收堆块照查找分离DOM performance performance是一种用于监控浏览器运行的时候性能变化的工具，他可以帮助我们观察页面运行时内存的变化，渲染的时长；并分析需要改进优化的地方。 任务管理器 通过shift+esc，我们可以调出浏览器的任务管理器。通过任务管理器我们可以观察页面的 内存占用空间 cpu使用率 网络情况 进程ID 这里我们使用较多的时内存的占用以及cp
使用 Performance 看看浏览器在做些什么
lengye7的博客
07-22 190
前言 Chrome 浏览器的 Performance 面板为我们提供了检测页面性能的能力，但其提供的远不止一些性能数据。本文将从工作原理的视角，结合实际工程的录制结果，探一探性能面板向我们透露的其他信息。 性能面板 关于面板的功能与使用方法，可以参考这篇文章。本节主要介绍浏览器架构与性能面板的关系。 因为尚未决出最终的标准架构，各大浏览器的实现细节各有不同。这里我们以 Chrome 的架构为例，对照其架构与性能面板的关系。 由下图我们可以看到性能面板呈现的几个主要线程。性能面板并不包含架构中全部
Chrome DevTools Performance 功能详解
小陈的博客
07-29 2773
本文整理介绍ChromeDevToolsPerformance面板的所有功能，以便使用其分析页面加载时/运行时性能，找出性能瓶颈。若内容存在谬误，请帮忙指正。后续准备更新一篇非常详细的首屏6大性能指标的优化教程，帮你提高页面的ChromeDevToolsLighthouse跑分分数。...
在 UI 自动化中调用浏览器 API 的方法与使用场景
weixin_42686892的博客
01-14 1492
事情的背景是最近在新项目中做 UI 自动化， 就想调研一下如何与浏览器的 API 交互获取一些额外的信息以在 case 失败的时候获取一些额外的信息帮助 debug。 后来就又慢慢延伸到了前端性能测试，弱网测试等场景上去了。 所以把调研的结果记录在这里。 主要是为了解决以下的问题： 测试的时候总会遇到一些偶发的 bug，发现自动化 case 失败以后再去页面上操作也很难复现。 所以如果能拿到失败的时候页面里所有请求的 request 和 response 有利于排查问题。 相当于调用了 chrome de
浏览器Performance工具
qt的博客
12-06 213
为什么使用Performance GC的目的是为了实现内存空间的良性循环 良性循环的基石是合理使用 时刻关注才能确定是否合理 Performance提供多种监控方式 通过Performance时刻监控内存 打开浏览器输入目标网站 进入开发人员工具面板，选择性能 开启录制功能，访问具体界面 执行用户行为，一段时间后停止录制 分析界面中记录的内存信息 内存问题的体现 界面出现延迟加载或经常性暂停 界面持续性出现糟糕的性能 界面的性能随着时间延迟越来越差 监控内存的方式 标准 内存泄漏：是内存的持续升高 内存膨胀
浏览器原理 39 # 页面性能工具：如何使用 Performance？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
07-06 1487
说明 浏览器工作原理与实践专栏学习笔记 Audits vs Performance Performance 可以记录站点在运行过程中的性能数据，有了这些性能数据，就可以回放整个页面的执行过程，这样就方便定位和诊断每个时间段内页面的运行情况，从而有效帮助我们找出页面的性能瓶颈。 不同于 Audits，Performance 不会给出性能得分，也不会给出优化建议，它只是单纯地采集性能数据，并将采集到的数据按照时间线的方式来展现。需要我们自己依据原始数据来分析 Web 应用的性能问题。 不同于 Audits 只能
Performance使用教程：分析运行时性能
神以灵的博客
10-25 6541
原文链接：https://developers.google.cn/web/tools/chrome-devtools/evaluate-performance Get started 在本教程中，你在一个在线的页面打开DevTools，使用Performance面板在页面上查找性能瓶颈。 1.打开隐身模式下的chrome浏览器，确保chrome运行在一个干净的状态下。如果你安装了许多的拓展插...
Chrome 控制台 performance 性能分析
不知道并不可怕，可怕的是自己不知道 “自己不知道”。
06-20 2468
（4）FMP（First Meaningful Paint）首屏有意义的内容绘制，这个“有意义”没有权威的规定，本质上是通过一种算法来猜测某个时间点可能是 FMP。通过记录这些数据，开发者可以了解网页在不同阶段的性能表现，并找出可能存在的性能问题。通过性能面板，开发者可以记录和分析网页在运行时的性能数据，识别性能瓶颈，并进行针对性的优化。（3）FCP（First Contentful Paint）首屏内容绘制，首次绘制任何文本，图像，非空白canvas 或 SVG 的时间点。：每条彩色横杠表示一种资源。
浏览器 Performance 工具的使用
weixin_51457459的博客
04-05 509
性能监测工具内存问题的体现内存的问题监控内存的方式1. 任务管理器监控内存2. Timeline 记录内存3. JS 堆快照查找分离DOM 内存问题的体现 在假设网络没有问题的前提下 页面延迟加载，经常性的暂停 页面持续性出现糟糕的性能 页面在使用过一段时间，出现卡顿。 内存的问题 内存泄漏：内存使用持续升高，没有下降的节点，证明代码中存在内存泄漏问题。 内存膨胀：内存的膨胀的鉴定首先需要确认时设备的问题，还是程序的问题。如果在多个主流设备上，程序都出现了糟糕的表现，可以确定为内存膨胀的问题。 频繁的
使用 Performance 看看浏览器在做什么
zz_jesse的博客
06-25 650
前言Chrome 浏览器的 Performance 面板为我们提供了检测页面性能的能力，但其提供的远不止一些性能数据。本文将从工作原理的视角，结合实际工程的录制结果，探一探性能面板向我们透露的其他信息。性能面板关于面板的功能与使用方法，可以参考这篇文章[1]。本节主要介绍浏览器架构与性能面板的关系。因为尚未决出最终的标准架构，各大浏览器的实现细节各有不同。这里我们以 Ch...
chrome-performance页面性能分析使用教程
weixin_30247159的博客
05-29 278
一、模拟移动设备的CPU 移动设备的CPU一般比台式机和笔记本弱很多。当你想分析页面的时候，可以用CPU控制器（CPU Throttling）来模拟移动端设备CPU。 在DevTools中，点击 Performance 的 tab。 确保 Screenshots checkbox 被选中 点击 Capture Settings（⚙️）按钮，DevTools会展示很多设置，来模拟各种状况...
Chrome Performance 页面性能分析
Andrew_Chenwq的博客
05-21 4750
首先在新的无痕窗口打开网页，打开Chrome DevTools 切换到 Performance 下可以看到以下画面1上图1、3区域按钮可以用来触发性能数据记录，黑色按钮可以记录交互阶段的性能数据，圆形箭头按钮用来记录加载阶段的性能数据。上图2区域 可以设置当前页面的网络加载速度与cpu运算速度。下面我们点击黑色按钮来生成一份交互阶段的性能报告Loading：加载时间Scripting：js计算时间Rendering：渲染时间Painting：绘制时间Other：其他时间Idle。
浏览器调试工具怎么使用
05-18
3. 在调试工具中切换到需要使用的功能标签页，如 Elements、Console、Sources、Network、Performance 等。 4. 根据需要使用各种功能进行调试和分析。 需要注意的是，不同浏览器的调试工具可能略有不同，但基本上都...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值