前端性能分析工具

前段时间在工作中,需要判断模块bundle size缩减对页面的哪些性能产生了影响, 因此需要了解前端的性能指标如何定义的,以及前端有哪些性能分析工具, 于是顺便整理了一篇笔记, 以供前端小白对性能这块知识点做一个入门级的了解.

页面渲染

在了解性能指标和分析工具之前,有必要先弄清楚浏览器是如何渲染页面的.
Chrome 浏览器是多进程的, 每打开一个页面都会独立运行一个渲染器进程,从而保证如果其中一个页面无响应或崩溃不会影响其他页的活动.
● 浏览器进程(Browser Process):控制 chrome 应用程序,包括地址栏、书签、后退和前进按钮。还处理 Web 浏览器的不可见的特权部分,例如网络请求和文件访问。
● 渲染器进程(Renderer Process):控制页签中所有内容的显示, 渲染器进程包含GUI线程,主线程(js引擎线程),定时器触发线程,事件触发线程,异步http请求线程,合成线程,io线程
● 插件进程(Plugin Process):控制网站使用的任何插件,例如 flash。
● 图形处理器进程(GPU Process):独立于其他进程处理 GPU 任务。

渲染器进程的核心工作是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页,主要步骤如下:

  1. DOM 解析(Parsing) 渲染进程解析接收到的HTML数据并转化为DOM对象。
  2. 样式计算(Style calculation)主线程根据 CSS 样式选择器计算出的每个DOM元素应具备的具体样式。
  3. 布局(Layout)
    布局过程中主线程会遍历构建的DOM树,根据DOM节点的计算样式计算出一个布局树(layout tree)布局树上每个节点会有它在页面上的x,y坐标以及盒子大小(bounding box sizes)的具体信息。布局树与先前构建的DOM树差不多,不同的是只有那些可见的节点。
  4. 分层(Dividing into layers)
    分层的作用确定哪些元素需要放置在哪一图层,此过程主线程会遍历布局树来创建一棵层次树
  5. 绘制 (Paint)
    有了 DOM、样式和布局信息仍不足以呈现页面。比如某些元素设置了z-index,仅按照 HTML 元素的顺序会导致渲染的结果不正确,所以还需要知道绘制的顺序。主线程会遍历之前的布局树(layout tree)来生成一系列的绘画记录(paint records),从而得到了绘制的顺序。
  6. 合成(Compositing)
    合成是一种将页面分成若干层,分别对它们进行光栅化,然后在一个单独的线程 —合成线程(compositor thread)里合成为一个页面的技术。当用户滚动页面时,由于页面各个层都已经被光栅化了,浏览器需要做的只是合成一个新的帧来展示滚动后的效果
    ● note:
    渲染过程中,如果遇到

主流浏览器每16.6ms刷新一次。每次需要完成如下工作
JS脚本执行 ----- 样式布局 ----- 样式绘制
当JS执行时间过长,超出了16.6ms,这次刷新就没有时间执行样式布局和样式绘制了,因此就会造成页面掉帧,造成卡顿。

Chrome DevTools Performance

在了解了以上渲染知识点可以帮助我们更好的理解Performance面板上的一些指标在这里插入图片描述

● 控制面板(红色区域):控制性能分析相关功能的配置。
● 概览面板(蓝色区域):主要性能项目的图形化预览。可选择录制的某一个片段,默认为完整的录制片段。
● 视图面板(绿色区域):展示概览面板中选择的片段的其他指标数据。点击此面板中的内容可进行选择。
● 详情面板(黄色区域):展示视图面板中选择内容的详情。其中 Summary 选项卡为点选内容的数据总览,不同的点击项目展示的条目有所区别。而 Bottom-up、Call tree、Event log 选项卡主要与主线程活动相关,会在【Main】中做详细介绍。

控制面板

在这里插入图片描述

主要使用的按钮功能解释依次为:
● Record: 开始/停止记录页面运行时性能,再次点击结束记录并生成分析报告。
● Start profiling and load page: 点击后会重新加载页面并且声称记录, 需要产生分析报告必须点这个按钮
● Clear: 清空所有录制的分析内容。
● Load profile:上传之前保存的分析报告。
● Save profile:将当前记录的分析内容以 JSON 文件形式保存。每次记录都会生成一个性能分析报告可供下载;也可截取记录中的某段内容生成分析报告进行保存。
● Screenshots:是否启用屏幕截图 。启用后将会在录制时捕获每一帧的屏幕截图。可以通过这个选项查看页面是否支持ssr.
在这里插入图片描述

概览面板

GPU
CPU 资源使用情况,通常主要是 JavaScript(黄色)和css(紫色)。CPU 中面积图如果充满色彩就表示该时间段 CPU 已达到极限。当看到 CPU 长时间处于最大状态时就是需要寻找减少 CPU 工作量方法的提示。
在这里插入图片描述

视图面板

Network

在这里插入图片描述

资源网络请求的瀑布流。不同的颜色用于区分不同的资源类型(HTML、JS、Image等),鼠标悬浮可查看资源请求总耗时和优先级(Highest、High、medium、Low、Lowest)。鼠标点击某个资源请求可以在 Summary 选项卡中查看更详细的信息。
每个资源请求的图形中都存在一左侧线段、浅色矩形、深色矩形、右侧线段:
● 左侧线段:Request Sent 之前所有时间花费(Queueing ~ Proxy negotiation,后有详见👇🏻)。
● 浅色矩形:Request Sent + Waiting (TTFB)。从请求发出到浏览器接收到服务端响应的第一个字节花费的时间。
● 深色矩形:Content Download,内容下载耗时。
● 右侧线段:等待主线程的时间花费。

Timings

记录页面加载期间的重要阶段事件及其触发时间点。
在这里插入图片描述

其中几个长方形框表示的是常见的几个前端性能指标, 其中, Google 在20年五月提出了网站用户体验的三大核心指标:LCP、FID、CLS。
Frist Contentful Paint(FCP)
○ 页面上第一个元素绘制的时间点,对应白屏时间,「第一个元素」指的是文本、图像(包括背景图像)、 元素或非白色的元素。

Largest Contentful Paint(LCP)

最大内容绘制,指页面上最大的图片或文字绘制的时间点。该时间会随着页面渲染变化而变化, 因为页面中的最大元素在渲染过程中可能会发生改变,另外该指标会在用户第一次交互后停止记录
LCP可能被这四个因素影响:服务端响应时间, Javascript和CSS引起的渲染卡顿, 资源加载时间, 客户端渲染

Time to Interactive(TTI)

● 可流畅地响应用户交互的时间。
● 计算方式:
a. 从 FCP 开始
b. 找到第一个连续 5s 安静窗口(安静窗口指没有长任务且不超过两个 Get 请求)
c. 从安静窗口反推,找到最后一个长任务
d. 这个长任务结束的时间点就是 TTI

First Input Delay (FID)

FID 用户首次交互时间,值越低越好,记录在 FCP 和 TTI 之间用户首次与页面交互时响应的延迟, 就是看用户交互事件触发到页面响应中间耗时多少,如果其中有长任务发生的话那么势必会造成响应时间变长。推荐响应用户交互在 100ms 以内.

CLS

累计位移偏移,CLS(Cumulative Layout Shift),记录了页面上非预期的位移波动
文本移动了 25% 的屏幕高度距离(位移距离),位移前后影响了 75% 的屏幕高度面积(位移影响的面积),那么 CLS 为 0.25 * 0.75 = 0.1875。CLS 推荐值为低于 0.1,越低说明页面跳来跳去的情况就越少,用户体验越好
● 如何减少CLS
a. 给image,video或者其他具有长宽比的元素设置长宽值;
b. 尽量不要在已经渲染的内容前面插入内容;
c. 尽量选择transform animations属性去触发布局变动;

Total Blocking Time(TBT)

总阻塞时长,指的是 FCP 与 TTI 之间主线程被阻塞的总时长。
单个长任务阻塞时间 = 长任务时间(时间超过 50ms的任务) - 50ms,TBT 为这些阻塞时间的总和

Main

主线程活动。通过倒置的火焰图展示主线程上发生的活动,x 轴表示随时间的记录。y 轴代表调用堆栈。火焰图中顶部的事件会导致其下方的事件,火焰图顶层宽度越大就表示该活动可能存在性能问题。
火焰图顶部(根活动)由很多任务(Task)组成,使用灰色背景色区分。鼠标悬浮上去可以看到任务的总耗时。而超过50ms 的任务被称之为长任务,会被红色角标标记。因此 Main 视图中可查看导致掉帧的具体任务。
根活动是指那些导致浏览器做一些工作的活动,例如当单击一个页面时浏览器会触发一个 Event 作为根活动,这个 Event 可能会导致一系列的处理程序执行等。
在这里插入图片描述

详情面板

点击选择火焰图的某一活动或者选择某一时间段的活动,将在详情面板 Summary 选项卡中展示更多信息,结合详情面板的Call tree、Bottom-up、Event log 选项卡可以进行不同维度分析。
在这里插入图片描述

Summary

摘要,展示点选活动或某时间段所有活动的各阶段时间耗时
● Loading:网络请求与解析。
● Scripting: JS 执行时间。
● Rendering: 重排,主要包含样式计算、更新布局树、布局、分层等。
● Painting:重绘。更新分层、光栅化分层、合成等。
● System: 系统占用时间。
● Idle: 空闲时间。
● Total: 总计。

Call tree

调用树,通常用于查看选择的时间段中导致最多耗时的根活动。
下图中 Event 是一个根活动,嵌套结构表示表示调用栈,表示 Event 导致了 button.addEventListener,button.addEventListener 中执行了 b…
在这里插入图片描述

Bottom-up

自下而上,通常用于查看选择的时间段中直接花费时间最多的活动。
在这里插入图片描述

上面图例中可以看到几乎所有时间都花在了三个wait()的调用上。因此Bottom-up选项卡中的顶部活动是wait。

网站性能监测工具–lighthouse

Chrome扩展程序运行分析页面, 让开发人员根据生成的评估页面来进行网站优化和完善,提高用户体验。
(最好在无痕浏览器上生成分析报告)
在这里插入图片描述

性能优化测试的报告主要包括,Performance(页面性能)、Accessibility(可访性)、Best Practise(最佳实践)、SEO(搜索引擎优化)、Progressive Web App(渐进式应用)。我们点击其中的每一项都可以看到给出的具体优化建议. 你也可以在生成报告之前点击需要的类别来生成.
在这里插入图片描述
在这里插入图片描述

● 根据 Google 的说法,Lighthouse 会返回 0 到 100 之间的性能分数。100 是最高的分数,代表第 98 个百分位,即性能最佳的网站。50 分代表第 75 个百分位数。

Performance

这里我们只介绍和性能相关的Performance这一项, 我们以online landing page某个落地页为例,如下图:
在这里插入图片描述

● 性能测试结果会分成 Metrics,Diagnostic,Opportunities 三部分,但只有 Metrics 部分的指标项会对分数产生直接影响。

Metrics

● 影响评分的性能指标:First Contentful Paint, Time to Interactive, Speed Index, Largest Contentful Paint, 可以看到这个页面的最大内容绘制时间和流畅地响应用户交互的时间很长, 十分影响用户体验, 值得后续优化.

Opportunities

Lighthouse不仅能测试性能问题,还能告诉我们如何解决性能问题;Opportunities指的是优化机会,它提供了详细的建议和文档,来解释低分的原因,帮助我们具体进行实现和改进
在这里插入图片描述

展开随便一条可以看到给出的具体机会, 例如下图
可以对于第三方域, 建议我们使用preconnetc或者dns-prefetch提前与服务器建立链接
在这里插入图片描述

Diagonstics

Diagonstics指的是现在存在的问题, 为进一步改善性能的实验和调整给出了指导。

在这里插入图片描述

● lighthose 给出的建议是图片的高度宽度没有明确给定,导致渲染的时候一边计算一边渲染, 拖慢了渲染速度
在这里插入图片描述

note:
实上Lighthouse是一个性能测试工具,并不能完全代表用户的真实体验,当我们使用Lighthouse的时候,基于都是宿主机器的性能结果,虽然我们可以限制网速和CPU等等,但和现实还有有所差距。

参考文档:

https://segmentfault.com/a/1190000041753539
https://juejin.cn/post/7112544960934576136
https://juejin.cn/post/6844903971727884296
https://www.freecodecamp.org/chinese/news/front-end-engineering-performance-optimization/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/129575.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Minio多节点多驱动分布式部署官网文档翻译

原文链接: Deploy MinIO: Multi-Node Multi-Drive — MinIO Object Storage for Linux The procedures on this page cover deploying MinIO in a Multi-Node Multi-Drive (MNMD) or “Distributed” configuration. MNMD deployments provide enterprise-grade p…

Linux非root用户运行服务实践

前言 以前就知道如果Linux服务以非root的方式运行会增强系统的安全性,但如何去实践呢? Linux安全基础 安全设计原则 最小安全原则 一般应尽可能缩小权限的授予范围 技术手段 用户隔离rwx读写执行权限capability特权权限PAM体系pam_cap模块ACL等 简…

Windows Server 2016使用MBR2GPT.EXE教程!

什么是MBR2GPT.exe? MBR2GPT.exe是微软提供的专业工具,可在命令提示符下运行。使用该工具可以将引导磁盘从MBR转换为GPT分区样式,而无需修改或删除所选磁盘上的任何内容。 在Windows Server 2019和Windows 10(1703…

时间序列聚类的直观方法

一、介绍 我们将使用轮廓分数和一些距离度量来执行时间序列聚类实验,同时利用直观的可视化,让我们看看下面的时间序列: 这些可以被视为具有正弦、余弦、方波和锯齿波的四种不同的周期性时间序列 如果我们添加随机噪声和距原点的距离来沿 y 轴…

测试Whisper效果

先去官方上面看看,是否有对应的测试结果 简单找了一下,没找到对应的测试数据 去hugging face 上面找对应的数据集,发现没有现成的数据 找到了几个数据集,但是是收费的 101 Hours – Scene Noise Data by Voice Recorder 1,29…

#stm32整理(一)flash读写

以这篇未开始我将进行stm32学习整理为期一个月左右完成stm32知识学习整理内容顺序没有一定之规写到哪想到哪想到哪写到哪,主要是扫除自己知识上的盲区完成一些基本外设操作。 以stm32f07为例子进行flash读写操作 stm32flash简介 参考资料正点原子和野火开发手册 …

通过akshare获取股票分钟数据

参考:https://blog.csdn.net/qnloft/article/details/131218295 import akshare as ak 个股的 df ak.stock_zh_a_hist_min_em(symbol“000001”, start_date“2023-11-03 09:30:00”, end_date“2023-11-03 15:00:00”, period‘1’, adjust‘’) print(df) date_info df[‘…

6-3 堆排序

description 本题要求实现堆排序中的筛选函数&#xff0c;待排序列的长度1<n<1000。 函数接口定义&#xff1a; void HeapAdjust( HeapType H, int s, int m); 其中L是待排序表&#xff0c;使排序后的数据从小到大排列。 ###类型定义&#xff1a; typedef int KeyType…

自动曝光算法(第二讲)

序言 第一章说了&#xff0c;自动曝光算法的目的&#xff1a;已知当前raw图亮度、当前曝光时间、当前增益和目标亮度&#xff0c;当环境光发生变化的时候&#xff0c;是通过控制增益、曝光时间和光圈使raw图的亮度&#xff0c;保持在目标亮度附近。本章想讲一下目标亮度的相关…

【杂记-遇到的坑】mysql-查询条件不达预期

前言&#xff1a; 业务开发时&#xff0c;遇到的坑&#xff0c;栽进去了&#xff0c;写这个博客&#xff0c;涨点记性 1.连表查询 左连接为例子 A left join B 把A的数据全部取出&#xff0c;能够跟B对应的上&#xff0c;B表的扩展数据也跟着展示出俩 A有B没有的&#xff0c;B的…

路由器基础(九):防火墙基础

防火墙 (Fire Wall) 是网络关联的重要设备&#xff0c;用于控制网络之间的通信。外部网络用户的访问必须先经过安全策略过滤&#xff0c;而内部网络用户对外部网络的访问则无须过滤。现在的防火墙还具有隔离网络、提供代理服务、流量控制等功能。 一、三种防火墙技术 常见的…

hadoop进程启停管理(看这一篇就足够了!)

一、一键启停脚本 Hadoop HDFS组件内置了HDFS集群的一键启停脚本 $HADOP_HOME/sbin/start-all.sh,一键启动HDFS集群 执行原理&#xff1a; 在执行此脚本的机器上&#xff0c;启动SecondaryNameNode 读取core-site.xml内容(fs.defaultFS项)&#xff0c;确认NameNode所在机器&…

【MySQL索引与优化篇】数据库的设计规范

数据库的设计规范 文章目录 数据库的设计规范1. 范式2. 键和相关属性的概念3. 第一范式4. 第二范式5. 第三范式6. 小结7. 反范式化7.1 概述7.2 反范式的新问题7.3 反范式适用场景 8. 巴斯范式9. 第四范式、第五范式和域键范式 1. 范式 在关系型数据库中&#xff0c;关于数据表…

Qt实验室

前言 本系列文章是研究和记录Qt开发过程中遇到的各种问题的集合 由于Qt是一个庞大的开发体系&#xff0c;很难用有限的文案对其做全面深入细致的讲解&#xff0c;因此市面上大多数Qt开发相关的教程都显得极其粗浅入门&#xff0c;通常只能作为最基本的入门教程。但是实际项目…

Ubuntu安装Redis

目录 1. 更新软件包列表2. 安装 Redis3. 启动 Redis4. 验证 Redis 是否启动成功5. 配置 Redis6. 启用 Redis 开机启动7. 验证 Redis 是否可用8. 测试 Redis 在 Ubuntu 20.04 上安装 Redis 非常简单。只需按照以下步骤操作即可&#xff1a; 1. 更新软件包列表 sudo apt update…

解锁AI语言模型的秘密武器 - 提示工程

文章目录 一、LLM概念1.1 什么是LLMs1.2 LLMs类别1.3 如何构建LLM 二、提示工程简介2.1 基础提示2.2 使用提示词的必要性 三、 提示3.1 如何写好提示词3.1.1 使用分隔符3.1.2 结构化输出3.1.3 风格信息3.1.4 给定条件3.1.5 给出示例3.1.6 步骤分解3.1.7 不断迭代 3.2 提示工程3…

【Docker】Linux路由连接两个不同网段namespace,连接namespace与主机

如果两个namespace处于不同的子网中&#xff0c;那么就不能通过bridge进行连接了&#xff0c;而是需要通过路由器进行三层转发。然而Linux并未像提供虚拟网桥一样也提供一个虚拟路由器设备&#xff0c;原因是Linux自身就具备有路由器功能。 路由器的工作原理是这样的&#xff…

Qt控件 UI设计 QPushbutton、QToolButton、QMenu

Qt控件 UI设计 QPushbutton、QToolButton、QMenu 个人设计QToolButton效果设计效果运行效果 Chapter1 Qt控件 UI设计 QPushbutton、QToolButton、QMenu1.QPushbutton和QToolButton的关联和区别&#xff1a;2.QMenu 可以配合QPushbutton做个下拉菜单3.点击按钮的功能&#xff0c…

k8s:endpoint

在 Kubernetes 中&#xff0c;Endpoint 是一种 API 对象&#xff0c;它用于表示集群内某个 Service 的具体网络地址。换句话说&#xff0c;它连接到一组由 Service 选择的 Pod&#xff0c;从而使它们能够提供服务。每个 Endpoint 对象都与相应的 Service 对象具有相同的名称&am…

【C语言初学者周冲刺计划】5.1C语言知识点小总结

目录 1知识点一&#xff1a; 2知识点二&#xff1a; 3知识点三&#xff1a; 4代码&#xff1a; 5总结&#xff1a; 1知识点一&#xff1a; 1 C语言中要求对变量作强制定义的主要理由是( )。 便于确定类型和分配空间 2 【单选题】若有定义&#xff1a;int m7; float x…