性能工具之前端分析工Chrome Developer Tools性能标签

简介: 【2月更文挑战第22天】性能工具之前端分析工Chrome Developer Tools性能标签

一、前言

但在我参与过的性能相关的场合都会被问到前端性能如何分析。
虽然在项目中,我们会经常做前端性能分析动作,也会给出相应的结论,只是这些在性能瓶颈的问题中所占的比重仍然不高。其原因是压力工具都是大部分模拟接口的。
虽然在性能工具中,也会模拟前端资源的下载动作,但对浏览器下载了资源之后的渲染过程仍然是无法模拟的。

本文就再细化一些描述下去。我们从 Chrome Developer Tools 的性能标签说起。

先来看一下这个界面。在 chrome 浏览器中,打开 view - Developer - Developer Tools,选择 performance 标签,就会出现这个界面。

image.png

这个界面是针对当前所在的浏览器 tab 页生效的,关闭了 tab 页,这个界面也会跟着关闭。

下面我们一一解释一下这里面的内容。

二、第一部分

image.png

在 performance 界面的第一部分,最上面的是时间线。
时间线下面依次是FPS、CPU、NET、HEAP。

  • FPS:frame per second,每秒帧数。这部分和页面的动画性能相关,如果出现了红色的长条,说明这部分有卡帧的情况,需要进行优化。而绿色的长条说明性能好,绿色的长条越长说明性能越好。
  • CPU:显示了加载的过程中,各个阶段对 CPU 的消耗,占的时间越多则是越要被优化的部分。其中不同的颜色对应着不同的部分。颜色的含义是:
    • 蓝色(Loading):代表网络通信和 html 解析消耗的CPU。
    • 黄色(Scripting):代表 JavaScript 执行消耗的CPU。
    • 紫色(Rendering):代表样式计算、布局、css的解析消耗的CPU。
    • 绿色(Painting):代表绘图消耗的 CPU。
    • 灰色(System):代表系统等其他事件消耗的 CPU。
    • 白色(Idle):代表空闲时间所消耗的驼背。
  • NET:代表了请求的顺序以及花费的时间。颜色越深,优先级越高。它对应着第二部分中的 network 中的数据,在第二部分中可以查看更具体的顺序和耗时。
  • HEAP:代表JS堆内存大小。

了解这些内容之后,在分析时就要多观察哪部分颜色占的比重大。CPU 也会对应着 performance 界面的下面部分,在第二部分中有更细的数据。我们后面会再描述。

三、第二部分

image.png

这部分数据较多,最上面仍然是时间线。在这里有不同颜色的虚线。含义如下:

  • 蓝色:DOM加载完的时间点。
  • 绿色:绘制开始的时间点。
  • 红色:页面加载完成的时间点。

各线程的工作内容和时间线也有详细的描述。

Network:下面 network 部分对应着第一部分中的 NET 部分。展开之后,可以看到更细的数据。如下:

image.png

页面中的每一个资源,都对应着顺序和花费的时间长短,放大缩小时间线时,都会有对应的变动。

Frames:在这一部分中,可以显示一个页面的各重要的时间点。

image.png

各简写如下:

  • FP (First Paint) 首次绘制
  • FCP (First Contentful Paint) 首次内容绘制
  • LCP (Largest Contentful Paint) 最大内容渲染
  • DCL (DomContentloaded)DOM加载解析完成
  • FMP(First Meaningful Paint) 首次有效绘制
  • L (onLoad)依赖资源全部加载
  • TTI (Time to Interactive) 可交互时间
  • TBT (Total Blocking Time) 页面阻塞总时长
  • FID (First Input Delay) 首次输入延迟
  • CLS (Cumulative Layout Shift) 累积布局偏移
  • SI (Speed Index)显示页面速度

Main:这部分就重要了,有个倒立的火焰图。

image.png

图的上面时间包含下面的时间。要看懂这个倒也不复杂,只要写过代码的就可以理解,父调用时间会有两个部分:自身时间和子调用时间。还有一点重要的是,倒立火焰图越平坦,则消耗时间越长,如果都是尖尖的样子,同时父调用的时间又长,则是因为子调用过多,需要优化掉子调用。

其他线程:

image.png

要了解这一部分,建议去看看 Blink 的架构。对于我们做性能分析的来说,主要看各线程的工作时间即可。

四、第三部分

image.png

对应js堆内存、文档、节点、监听器和GPU趋势图。
显然是越高性能越差。

五、第四部分

image.png

这部分给出了摘要图和树状图,可以看到每个函数消耗的时间,以及函数所在代码的行号。可以直接点击并跳转到相应的行号上,以便定位。

六、小结

以上就是 Chrome 开发者工具中的 Performance 页面的所有内容。这些内容对我们分析前端的性能有很大的帮助。

但前端的性能不止在这个页面中得到体现 ,还有更多的工具可以参照。

目录
相关文章
|
7天前
|
前端开发
Github项目分享——免费的画图工具drow,最新前端面试题整理
Github项目分享——免费的画图工具drow,最新前端面试题整理
|
9天前
|
前端开发 Android开发 iOS开发
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
【4月更文挑战第30天】Flutter 框架实现跨平台移动应用,通过一致的 UI 渲染(Skia 引擎)、热重载功能和响应式框架提高开发效率和用户体验。然而,Android 和 iOS 的系统差异、渲染机制及编译过程影响性能。性能对比显示,iOS 可能因硬件优化提供更流畅体验,而 Android 更具灵活性和广泛硬件支持。开发者可采用代码、资源优化和特定平台优化策略,利用性能分析工具提升应用性能。
【Flutter前端技术开发专栏】Flutter在Android与iOS上的性能对比
|
6天前
|
资源调度 JavaScript 前端开发
Vite:下一代前端构建工具的快速上手
Vite 是由 Vue.js 的作者尤雨溪开发的下一代前端构建工具,它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。Vite 通过利用浏览器原生的 ES 模块导入功能,提供了几乎即时的开发环境启动速度和高度优化的开发体验。
23 2
|
9天前
|
Web App开发 缓存 前端开发
如何优化前端网页加载速度:最佳实践和工具推荐
本文探讨了如何通过采用最佳实践和利用先进的工具来优化前端网页加载速度。从压缩资源到使用CDN,从减少HTTP请求到利用缓存策略,我们将介绍一系列提高网页性能的技术手段。同时,我们还将推荐一些广受好评的工具,帮助开发者更轻松地实施这些优化策略。
|
9天前
|
缓存 前端开发 JavaScript
如何优化前端性能:最佳实践与工具推荐
在当今互联网时代,用户对网页加载速度和性能的要求越来越高。本文将介绍一些优化前端性能的最佳实践,包括代码压缩、资源合并、懒加载等技术,并推荐一些实用的工具,帮助开发者提升网页加载速度和用户体验。
|
9天前
|
前端开发 数据安全/隐私保护 计算机视觉
前端 基础标签
前端 基础标签
6 0
|
9天前
|
Web App开发 JSON 数据格式
一键自动化博客发布工具,chrome和firfox详细配置
blog-auto-publishing-tools博客自动发布工具现在已经可以同时支持chrome和firefox了.
一键自动化博客发布工具,chrome和firfox详细配置
|
9天前
|
存储 前端开发 JavaScript
【Web 前端】如何找到所有 HTML select 标签的选中项?
【5月更文挑战第2天】【Web 前端】如何找到所有 HTML select 标签的选中项?
|
9天前
|
前端开发 持续交付 开发工具
【专栏:工具与技巧篇】版本控制与Git在前端开发中的应用
【4月更文挑战第30天】Git是前端开发中的必备工具,它通过分布式版本控制管理代码历史,支持分支、合并、回滚等操作,促进团队协作和冲突解决。在前端项目中,Git用于代码追踪、代码审查、持续集成与部署,提升效率和质量。优化协作包括制定分支策略、编写清晰提交信息、定期合并清理分支及使用Git钩子和自动化工具。掌握Git能有效提升开发效率和代码质量。
|
9天前
|
Web App开发 前端开发 JavaScript
【专栏:工具与技巧篇】网页调试工具(Chrome DevTools)的使用
【4月更文挑战第30天】Chrome DevTools是谷歌浏览器内置的网页调试利器,提供Elements(查看编辑HTML/CSS)、Console(JavaScript调试)、Sources(JS/CSS文件调试)、Network(网络请求分析)和Performance(性能瓶颈排查)等面板。通过掌握这些功能,开发者能有效优化网页性能和用户体验。本文详细介绍了各面板的使用方法,助力开发者高效工作。