利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)


Posted in Javascript onFebruary 24, 2021

背景

我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据如何解读。

分析面板介绍

利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

上图是 Chrome Dev Tools 的一个截图,其中,我认为能用于进行页面性能快速分析的主要是图中圈出来的几个模块功能,这里简单介绍一下:

  • Network : 页面中各种资源请求的情况,这里能看到资源的名称、状态、使用的协议(http1/http2/quic...)、资源类型、资源大小、资源时间线等情况
  • Performance : 页面各项性能指标的火焰图,这里能看到白屏时间、FPS、资源加载时间线、longtask、内存变化曲线等等信息
  • Memory : 可以记录某个时刻的页面内存情况,一般用于分析内存泄露
  • JavaScript Profiler : 可以记录函数的耗时情况,方便找出耗时较多的函数
  • Layers : 展示页面中的分层情况

分析步骤说明

首先,我们在分析的时候,建议使用隐身模式打开页面,排除一些插件等因素对页面性能情况的影响。然后,我们把页面缓存勾选去掉,要测 disable cache 的情况,再把网络情况调整一下,我们用电脑打开页面的时候一般都连着 wifi 等,要更真实一些去测页面的性能,还是把网络调到 3G 等情况比较好,如图:

利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

调整好之后,我们切到 Performance 面板,这里先说明一下一些按钮的作用:

利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

上图,从左到右分别代表的是:

  • 手动开始记录,开始后需要手动结束
  • 自动重启页面,并记录整个页面加载的过程。这个是最常用的,一般大概分析页面性能的时候都是点这个就够了
  • 清除性能录制的记录
  • 上传页面性能录制的数据
  • 下载页面性能录制的数据
  • 选择要展示的性能记录。你可能进行了多次分析,这里可以切换去看每次的结果
  • 是否捕捉页面加载过程的截图,这个一般都要勾选
  • 是否记录内存变化,这个一般都要勾选
  • 垃圾回收,点击了即进行一次垃圾回收

这里,我以京东的一个页面为例,勾选 disable cache,网络情况为 Fast 3G,来说明一下,应该如何理解性能结果,找出优化点。

从网络面板分析

我们来看看网络面板,看看都有哪些信息。如下图所示:

利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

从图中可以看出,页面中有的一些性能优化手段有:

  • 页面直出,输入https://wq.jd.com/wxportal/index_v6 ,页面加载回来的 document 就是一个渲染好的 html 页面
  • 图片优化,部署在不同的CDN域名下,用webp/dpg等格式图片,图片切割等
  • http 协议有部分采用 http2,多路复用,加快资源加载
  • 小 logo 使用base42来处理
  • 按需加载,菜单先加载第一屏的图标,滑动到第二屏时再加载第二屏的图标

而从图片,个人认为,还可以考虑用上的一些性能优化手段有:

  • html 的大小为138kb,Content Download的时间为七百多毫秒,感觉可以拆分一下页面,非一二屏的内容分开加载。
  • TTFB(Time To First Byte)为五百多毫秒,在下载第一个字节之前等待的时间过久,不过这里主要是用户网络情况影响,可以做的比较少。如DNS解析优化,减少后端服务处理时间等
  • 合并雪碧图,大轮播图下面的菜单分类那里的图标,可以用一张雪碧图来集合这些图标
  • 顶部轮播图,在首次加载时,可以先加载第一帧的图片,后面几帧延后一下
  • 图片较多,可以的话,都用 http2 协议

从性能面板分析

切到 Performance 面板,点击自动重启页面,并记录整个页面加载的过程,然后来分析结果~​

网络&&白屏

性能面板,有很多很多的参数,我们要看一些比较常见的。首先看白屏时间和网络加载情况,如下图:

利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

上图,我们可以看几点信息:

  • 本次页面加载的白屏时间约为 1000 ms
  • FPS 曲线没有标红,如果有很多标红的则说明页面存在渲染卡顿多的地方
  • 从网络资源加载情况来看,图片没有启用 http2,因此每次可以同时加载的图片数有限,未被加载的图片有等待过程
  • 资源的加载时间也可以看到,比如轮播的背景图加载了近 700 毫秒,时间有点长

另外,我们可以看一下资源加载有没有空白期,虽然上图没有,但是如果资源加载之间存在空白期,说明没有充分利用资源加载的空闲时间,可以调整一下。

火焰图

火焰图,主要在 Main 面板中,是我们分析具体函数耗时最常看的面板,我们来看一下,如图:

利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

首先,面板中会有很多的 Task,如果是耗时长的 Task,其右上角会标红(图中没有,说明页面首屏的逻辑处理分配得还不错),这个时候,我们可以选中标红的 Task (这里就随手选中一个),然后放大(选中,滑动鼠标可放大),看其具体的耗时点。

放大后,这里可以看到都在做哪些操作,哪些函数耗时了多少,这里代码有压缩,看到的是压缩后的函数名。然后我们点击一下某个函数,在面板最下面,就会出现代码的信息,是哪个函数,耗时多少,在哪个文件上的第几行等。这样我们就很方便地定位到耗时函数了。

还可以横向切换 tab ,看它的调用栈等情况,更方便地找到对应代码。具体大家可以试试~

时间线&&内存情况

在 Timings 的区域,我们可以看到本次加载的一些关键时间,分别有:

  • FCP: First Contentful Paint
  • LCP: Largest Contentful Paint
  • FMP: First Meaningful Paint
  • DCL: DOMContentLoaded Event
  • L: Onload Event

我们可以选区(选择从白屏到有内容的区域,代表本次的页面加载过程),可以对照着看一下上面的时间,截图如下:

利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

另外,我们可以看到页面中的内存使用的情况,比如 JS Heap(堆),如果曲线一直在增长,则说明存在内存泄露,从图中可以看出,相当长的一段时间,内存曲线都是没有下降的,这里是有发生内存泄露的可能的,在 Onload 之后,内存才得到释放。更多内存泄露产生的原因及分析方法,可以参照我的这篇文章《Chrome 浏览器垃圾回收机制与内存泄漏分析》

最下方就是页面的一个整理耗时概况,如果 Scripting 时间过长,则说明 js执行的逻辑太多,可以考虑优化js,如果渲染时间过长,则考虑优化渲染过程,如果空闲时间过多,则可以考虑充分利用起来,比如把一些上报操作放到页面空闲时间再上报等。

其他面板

以上就是性能面板可以看的一些信息。另外,我们可以借助 Layers面板来查看页面分层情况的3D视图,Rendering面板(点击more tools->Rendering即可打开),勾选Layer Bordersk可以看到复合层、RenderLayer区域,可以帮助分析动画卡顿、是否开启GPU加速等问题,而 Memory 面板 和 JavaScript Profiler 面板主要是分析内存泄露的,这里就不说了,可以看我另一篇文章《Chrome 浏览器垃圾回收机制与内存泄漏分析》

用Audits工具分析

Audits 其实就是 LightHouse,LightHouse 是Google开源的一个自动化测试工具,它通过一系列的规则来对网页进行评估分析,最终给出一份评估报告。它的面板是这样的:

利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

整体情况

Audits主要从5个方面来给网页打分,当然你也可以去掉某些方面的评估。在选择了设备、评估方面、网络情况等选项后,点击 Run Audits ,我们将会得到一份报告。

利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

上图是一个总体报告,可以看出,这个页面的性能不太合格。当然一次的测试也说明不了什么问题,只能做个参考。我们看它的性能指标分别有:

  • First Contentful Paint:内容首次开始绘制。
  • First Meaningful Paint:可以简单理解为用户看到网页主要内容的时间,分数越低,页面显示其主要内容的速度就越快。图中例子,网页首次有效绘制时间为2.5s。
  • Speed Index:速度指标是一个页面加载性能指标,向你展示明显填充页面内容的速度,此指标的分数越低越好。
  • First CPU Idle:首次 CPU 空闲时间
  • Time to Interactive:可互动时间,页面中的大多数网络资源完成加载并且CPU在很长一段时间都很空闲的所需的时间。此时可以预期cpu非常空闲,可以及时的处理用户的交互操作。
  • Max Potential First Input Delay:最大的输入延迟时间,输入响应能力对用户如何看待你应用的性能起着关键作用。应用有 100 毫秒的时间响应用户输入。如果超过此时间,用户就会认为应用反应迟缓。

这些时间,都可以点击图中红框切换展示方式,会附上对应的时间解释,然后可以点击 Learn more 来查看详细的指标介绍。在文档中,每一项指标都会明确的分为三个部分:为什么说此审查非常重要;如何通过此审查;如何实现此审查;

性能指标优化建议解读

性能建议主要分为3类, Opportunities 可优化项、手动诊断项、通过的审查项。本次的例子如下图:

利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

图中的每一项都可以展开来看明细解释,其中:

可优化项有2个建议:

  • 延迟会阻塞渲染的资源加载,这里是一个 navfoot.6bf68af7.css
  • 延迟视口外的图片加载,这里列举了不必要加载的图片(和我上文提的优化建议一致,哈哈)

这项里面的内容指的是LightHouse发现的一些可以直接优化的点,你可以对应这些点来进行优化。

手动诊断项有6个建议:

  • 最小化主线程工作
  • 减少JavaScript执行时间
  • 避免DOM太大
  • 通过有效的缓存策略缓存一些静态资源
  • 避免链接关键请求
  • 保持低请求数量和小传输大小

这些项目表示LightHouse并不能替你决定当前是好是坏,但是把详情列出来,由你手动排查每个项目的情况

通过的审查项

这里列出的都是做的好的地方,本文例子共有16条,不过即使做的好,依然值得我们进去仔细看一下,因为像所有条目一样,这里的每个条目也有一个showmore,我们可以点进去仔细学习背后的知识和原理!

Accessibility辅助功能

辅助功能指的是那些可能超出"普通"用户范围之外的用户的体验,他们以不同于你期望的方式访问你的网页或进行交互,本文的例子建议如下图:

利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

辅助功能类别测试屏幕阅读器的能力和其他辅助技术是否能在页面中正常工作。例如:按元素来使用属性,标签使用是否规范,img 标签是否缺少 alt 属性,可辨别的元素命名等等。这一项我们不展开讲,但是还是建议大家按照审计建议修改一下网页。

其他几项,本文的例子最佳实践评分挺高的,而例子不支持PWA,也不需要考虑SEO,这里就不展开说明了,有对应需求的可以自己详细看看即可。

总结

最后总结一下,我们利用Chrome Dev Tools 进行页面性能分析有以下指标可以参考:

  • 从网络面板分析
  • 从性能面板分析
  • 从Memory面板等分析内存泄露
  • 用Audits工具分析

而这些分析方法,本文都详细写了。可以认真看看~

到此这篇关于利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)的文章就介绍到这了,更多相关 Chrome Dev Tools 页面性能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 Javascript
Nest.js散列与加密实例详解
Feb 24 #Javascript
JS canvas实现画板和签字板功能
Feb 23 #Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 #Vue.js
js实现验证码干扰(动态)
Feb 23 #Javascript
js实现验证码干扰(静态)
Feb 22 #Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 #Javascript
nestjs返回给前端数据格式的封装实现
Feb 22 #Javascript
You might like
用PHP创建PDF中文文档
2006/10/09 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
php curl中gzip的压缩性能测试实例分析
2016/11/08 PHP
PHP学习笔记之session
2018/05/06 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
Javascript的一种模块模式
2010/09/08 Javascript
Javascript中的this绑定介绍
2011/09/22 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
使用 Python ssh 远程登陆服务器的最佳方案
2020/03/06 Python
Python如何定义有可选参数的元类
2020/07/31 Python
浅谈Python3中print函数的换行
2020/08/05 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
PHP开发的一般流程
2013/08/13 面试题
木马的传播途径主要有哪些
2016/04/08 面试题
商务英语专业应届毕业生求职信
2013/10/28 职场文书
给客户的道歉信
2014/01/13 职场文书
入股协议书范本
2014/04/14 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
房屋租赁协议书
2014/10/18 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
起诉意见书范文
2015/05/19 职场文书
起诉书范文
2015/05/20 职场文书
课题研究阶段性总结
2015/08/13 职场文书