admin管理员组文章数量:1582685
系列文章目录-性能测试
性能测试-基础+中级(一)【概述+流程+工具+模型+mysql事务】
文章目录
- 系列文章目录-性能测试
-
- 性能测试-基础+中级(一)【概述+流程+工具+模型+mysql事务】
- 7. 前端性能测试
-
- 7.1 以ShopXO商城为例分析
- 7.2 前端在线测试工具-GTmetrix
- 7.3 输入URL分析性能-GTmetrix
- 7.4 GTmetrix性能报告
-
- 7.4.1 GTmetrix Grade and Web Vitals(GTmetrix等级和Web核心指标)
- 7.4.2 The Summary Tab(总结选项卡)
-
- 7.4.2.1 Speed Visualization(速度可视化)
- 7.4.2.2 Top Issues(重要问题)
- 7.4.2.3 Page Details(页面详情)
- 7.4.2.4 More from GTmetrix(更多的关于GTmetrix对改进页面性能的提示和建议)
- 7.4.3 The Performance Tab(性能选项卡)
-
- 7.4.3.1 Performance Metrics(性能指标)
- 7.4.3.2 Browser Timings(浏览器计时)
- 7.4.4 The Structure Tab(结构选项卡)
- 7.4.5 Other Tabs(其他..)
-
- 7.4.5.1 Waterfall Tab(瀑布选项卡)
- 7.4.5.2 Video Tab(视频选项卡)
- 7.4.5.3 History Tab(历史选项卡)
7. 前端性能测试
影响前端性能因素:网络连接,下载资源,js加载,前端页面渲染等…针对前端的性能测试,基本上都是B/S架构的系统。
7.1 以ShopXO商城为例分析
ShopXO商城
使用谷歌浏览器自带开发者工具检查
可以看到加载时间最长的资源耗时1.56s,请求数67,通过网络传输1.4MB,页面加载的4.5MB资源,2.45s请求全部结束(finish),DOMContent加载耗时2.17s(DOMContentLoaded),页面加载耗时2.26s(Load)。
上图可以看到有些资源是存放在缓存中的。
若多次重新加载页面发现加载时间越来越短,需要网络传输的资源也越来越少。
我们选择【禁用缓存】选项
选择【禁用缓存】,clear,重新加载商城页面,发现与结论一致。
下图,查看其中一个请求的waterfall,可以看到该请求发送和接受的全过程耗时。
- Queued at 172.33ms
- 该请求在172.33ms的时候添加入队列。
- Started at 294.20ms
- 在队列中,该请求在294.20ms的时候开始预备发送。
- Resource Scheduling-Queueing-DURATION 121.87 ms
- 该请求排队时间耗时121.87 ms。
- Connection Start-Stalled-DURATION 4.52 ms
- 在发送之前,该请求准备4.52 ms。
- Request/Response-Request sent-DURATION 0.13 ms
- 发送该请求耗时0.13ms。
- Request/Response-Waiting for server response-DURATION 42.67 ms
- 等待服务器返回该请求的响应耗时42.67ms。
- Request/Response-Content Download-DURATION 3.89 s
- 响应的数据下载耗时3.89ms。
以上,从该请求进入队列开始,到响应数据下载完毕:
总耗时:4.06s ≈ 121.87ms(排队时间耗时) + 4.52ms(请求发送准备耗时) + 0.13ms(请求发送耗时) + 42.67ms(等待响应耗时) + 3.89s(数据下载耗时)
对于前端的性能测试,我们主要关注这些请求的大小和加载时间,并做相应的优化。
开启缓存,我们会发现有内存缓存(memory cache)和磁盘缓存(disk cache),内存缓存加载不耗费时间,而磁盘缓存耗时。
7.2 前端在线测试工具-GTmetrix
在实际工作中,如果用浏览器的开发者工具去检查,效率较低,可以使用GTmetrix帮助我们提高测试效率。
前端在线测试工具:GTmetrix,注册账号,并登录(最好使用谷歌浏览器进行测试)。
GTmetrix has undergone its biggest change yet, replacing the PageSpeed/YSlow libraries with Lighthouse, the industry standard in web performance.
GTmetrix经历了它最大的变化,用Lighthouse(网络性能的行业标准)取代了过去的PageSpeed/YSlow。
注册登录完成,看到以下页面
浏览器开发者工具附带了lighthouse性能分析,也可以直接用它直接分析页面性能。
其他主流测试工具>【性能优化】性能测量工具-WebPageTest
7.3 输入URL分析性能-GTmetrix
继续以ShopXO商城为例进行分析,将系统前端URL输入GTmetirx性能分析框进行分析。
如上,得到一份性能分析报告。
与之相比较,百度的前端性能就比较好。
7.4 GTmetrix性能报告
查看上面这份性能分析报告,具体指标可参照 Everything you need to know about the new GTmetrix Report (powered by Lighthouse)
7.4.1 GTmetrix Grade and Web Vitals(GTmetrix等级和Web核心指标)
第一部分:1. 新的GTmetrix等级(一个从新的性能和结构分数中衍生出来的加权等级,它取代了旧的PageSpeed和YSlow分数)和 2.Web核心指标(Web Vitals)
- GTmetrix Grade(GTmetrix等级)
1.GTmetrix评分是对你的整体页面性能的评估;它既反映了用户加载页面的速度,又反映了构建页面的性能;
2.GTmetrix评分基于一个简单的公式,目前为性能(Performance)和结构(Structure)评分分别分配了70/30的权重;
3.结构评分指标可以看作是更好的web性能的指导手册,而性能评分指标则是你实际web性能的跑表。- Performance(70%)(性能)
- The Performance Score(性能评分)
1.性能评分从用户的角度告诉您页面的执行情况;
2.性能分数本质上是您的Lighthouse性能分数。由GTmetrix测试捕获,包括我们的浏览器、硬件规格和指定的分析选项(AdBlock、连接速度等);
3.性能评分由6个指标组成。- Loading performance (45%)(加载性能)
- First Contentful Paint (10%)(开始内容绘制)
1.First Contentful Paint(FCP)与页面加载速度相关,用来衡量访问者浏览到页面上实际内容=(即文本、图像、视频等)的速度;
2.FCP是从开始加载页面到在屏幕上开始显示内容所花费的总时间;
3.较低的FCP时间可以让用户有较好的使用体验。 - Speed Index (10%)(速度指数)
1.Speed Index(SI)依赖于浏览器视图端口的大小,用来衡量页面在视觉上的完成速度;
2.SI是一种计算的结果,通过对页面加载行为逐帧分析,反映了访问者的页面体验;
3.SI与其他页面加载时间密切相关,这使其成为评估网站整体性能的一个有用的总体基准。 - Largest Contentful Paint (25%)(最大内容绘制)
1.Largest Contentful Paint(LCP)衡量的是页面上最大的“内容元素”(例如,英雄图片、标题文本等)在访问者的屏幕显示所需的时间,用于衡量用户的感知加载体验;
2.LCP也是作为谷歌的Web Vitals指标之一。
- First Contentful Paint (10%)(开始内容绘制)
- Interactivity (40%)(交互性)
- Time to Interactive (10%)(交互的时间)
1.Time to Interactive (TTI)衡量页面的加载响应性,并帮助识别页面看起来交互式但实际上不是的情况;
2.TTI测量在第一次内容绘制(FCP)之后,当页面可靠地为用户交互做好准备时的最早时间;
3.更快的TTI有助于确保页面可用。 - Total Blocking Time (30%)(总阻塞时间)
1.Total Blocking Time(TBT)衡量的是网页被阻塞的总时间,用于阻止用户与页面交互;
2.TBT量化了页面对用户输入的加载响应,是仅字段的首次输入延迟(FID)度量的替代品,在PageSpeed Insights中可以看到;
3.TBT也是作为谷歌的Web Vitals指标之一。
- Time to Interactive (10%)(交互的时间)
- Visual Stability (15%)(视觉稳定性)
- Cumulative Layout Shift (15%) (累计布局偏移)
1.Cumulative Layout Shift(CLS)用于衡量网页呈现时网页元素的意外变化。然后将该测量值量化为页面上所有单个布局移位的总分;
2.CLS用于衡量页面压力的视觉稳定性。
3.CLS也是作为谷歌的Web Vitals指标之一。
- Cumulative Layout Shift (15%) (累计布局偏移)
- Loading performance (45%)(加载性能)
- The Performance Score(性能评分)
- Structure(30%)(结构)
- Structure Score(结构评分)
1.结构评分是页面构建的最佳性能评分,结构得分的好坏反映了站点为实现最佳性能而构建的好坏;
2.处理结构审计可以作为一个很好的起点,从总体上去优化页面加载时间。此外,有些审计是相关的,因此,修改一个审计可能会影响其他的审计;
3.结构审计包括:标准的Lighthouse审计+自定义GTmetrix审计。- 标准的Lighthouse审计
- 自定义GTmetrix审计
- Enable Keep-Alive(开启keep-Alive)
1.只会在没有检测到Keep-Alive on指令的使用HTTP/1.1的页面上触发。如果检测到您的页面正在使用HTTP/2,此项不作影响。
2.对于HTTP/1.1请求,启用Keep-Alive可以减少延迟并提高页面性能。浏览器可能使用多个TCP连接从服务器检索页面的文件,如果在传递初始文件时关闭了原始连接。这会增加延迟和加载页面的时间。启用Keep-Alive允许使用同一个TCP连接传输多个文件,从而获得更快的加载页面。 - Combine images using CSS sprites(使用CSS sprites组合图像)
1.如果您的页面提供多个小的、spritable类型的图像,则会触发此审计;注意,根据页面是使用HTTP/1.1还是HTTP/2,此审计具有不同的阈值。
2.使用CSS sprites组合图像可以减少往返请求的数量,从而提高页面的性能。这种方法主要是指小图像,如图标、徽标和其他图形元素,可以组合成单个图像,然后通过CSS在页面上定位。减少所加载的图像数量有助于提高页面性能,因为它减少了请求的数量,从而减少了浏览器加载图像所花费的时间。 - Use a Content Delivery Network (CDN)(使用内容分发网络(CDN))
1.使用“内容分发网络(CDN)”可以提高您的网站在全球不同地区的性能;
2.CDN本质上是一个遍布世界各地的服务器网络。每个CDN“节点”位于不同的区域,并缓存页面的静态内容,比如图像,css/js文件等。当用户访问您的页面时,资源来自最近的CDN节点的缓存,而不是您的原始服务器,减少延迟并为您的访问者提供快速的页面体验,无论他们位于何处。 - Avoid CSS @import(避免使用CSS @import)
1.尽可能避免使用CSS @import,因为浏览器遇到的任何导入指令(不带deferattribute)都会立即下载、解析并执行,这可能会阻碍页面其余部分的呈现;
2.CSS @import是从另一个CSS文件中调用样式表/CSS文件的过程。这种方法导致浏览器按顺序加载每个CSS文件,而不是并行加载。因为CSS是呈现阻塞的,默认情况下,这可能会影响页面性能。所以,应尽量避免使用CSS @import来加快页面加载速度,提高访问者的页面体验。
- Enable Keep-Alive(开启keep-Alive)
- Structure Score(结构评分)
- Performance(70%)(性能)
- http/1.x keep alive是为了解决每次请求都会重新建立和断开TCP连接的问题(服务器在发送完一个http相应后,会断开tcp连接,这样做的原因,是因为:极大的减轻服务端的压力,但这个问题在于:比如打开一个网页要加载很多资源,像js/css文件,图片等,那么每请求一个资源,就创建一个连接,然后关闭,这样做就代价实在太大了。于是便通过使用keep-alive,使连接能够在短时间内得到复用,同时SSL的开销也可以避免。)
- HTTP 1.0 中默认关闭,需在http头加入"Connection: Keep-Alive",启用Keep-Alive;
- HTTP 1.1 中默认启用Keep-Alive,需加入"Connection: close ",可关闭。
- http/2.0 连接都是持久化的,客户端与服务器之间只需要一个连接(每个域名一个连接),不再依赖多个TCP实现多流并行,每个数据流都拆分成互不依赖的帧,这些帧可以乱序发送,也可分优先级,然后在另一端将它们重新组合起来,连接可以承载数十或数百个流的复用(多路复用)。
引用:
https://zhuanlan.zhihu/p/89471776
https://wwwblogs/caoweixiong/p/14720254.html
- Web Vitals(Web重要指标)
1.谷歌已经确立了Web Vitals作为核心指标,它是对页面性能影响最大的关键指标。
2.Web Vitals在你的GTmetrix等级和性能/结构分数部分出现,Web Vitals是对页面进行基准测试的好方法,因为它们关注的是对性能感知影响最大的一小部分关键指标,专注于一小组关键指标来评估您的页面体验,有这么多的时间和审计来评估页面性能,这个小集合代表了最具影响力的指标,以简化web性能的世界;
3.每个指标都代表了页面体验的一个关键方面,即加载、交互性和视觉稳定性。- LCP(Largest Contentful Paint,LCP,最大内容绘制):显示最大内容元素所需的时间。
- TBT(Total Blocking Time,TBT,总阻塞时间):页面加载过程中的脚本阻塞时间。
- CLS(Cumulative Layout Shift,CLS,累计布局偏移):您的用户在页面加载期间经历了多少布局移位。
7.4.2 The Summary Tab(总结选项卡)
第二部分:总结选项卡
- 包括4部分,如下:
Speed Visualization,(速度可视化),Top Issues(重要问题),Page Deta
版权声明:本文标题:性能测试-基础+中级(二)【前端性能测试】 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1727901530a1136973.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论