一、分析面板介绍

进行页面性能快速分析的主要是图中圈出来的几个模块功能:

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

二、分析步骤说明

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

调整好之后,我们切到 Performance 面板:

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

以京东的一个页面为例,勾选 disable cache,网络情况为 Fast 3G,点击2,然后就结果来说明一下,应该如何理解性能结果:

二、从网络面板分析

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

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

还可以考虑用上的一些性能优化手段有:

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

四、从性能面板分析

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

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

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

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

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

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

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

时间线&&内存情况

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

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

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

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

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

五、用Audits工具分析

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

整体情况

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

整体情况

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

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

  • 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 可优化项、手动诊断项、通过的审查项。本次的例子如下图:

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

可优化项有2个建议:

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

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

手动诊断项有6个建议:

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

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

通过的审查项

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

Accessibility辅助功能

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

辅助功能类别测试屏幕阅读器的能力和其他辅助技术是否能在页面中正常工作。例如:按元素来使用属性,标签使用是否规范,img 标签是否缺少 alt 属性,可辨别的元素命名等等。

页面性能分析-Chrome Dev Tools的更多相关文章

  1. 前端性能优化之利用 Chrome Dev Tools 进行页面性能分析

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

  2. chrome dev tools

    chrome dev tools介绍一下Chrome dev tools 的基本使用和一些意想不到的小技巧.\\Chrome Developer Tools 是Chrome内嵌的一系列编辑和调试的工具 ...

  3. Chrome Dev Tools :成为更高效的开发人员

    原文出处 http://blog.jobbole.com/22065/ 实时CSS Style编辑 选择一个Dom,可以对Dom进行编辑和操作,实时修改Css Style, 同时CssStyle可以保 ...

  4. 15个你不得不知道的Chrome dev tools的小技巧

    转载自:https://www.imooc.com/article/2559 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器.伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chro ...

  5. Web 页面性能分析笔记

    网页慢的原因不一定只是前端,所以需要结合Network一起看 如何评价一个页面打开得快不快,可以用两个指标描述,一个是ready的时间,另一个是load的时间. 如下示例表示,read时间是2.72s ...

  6. [Debug] Debug Node.js Application by using Chrome Dev tools

    For example you have a server.js file, and you want to debug some problems; What you can do is: node ...

  7. [Debug] How to Debug a NestJs Backend using the Chrome Dev Tools

    TO debug NestJS code with Chrome dev tool, we can run: node --inspect-brk dist/rest-api/src/main.js ...

  8. Chrome Performance 页面性能分析指南

    1.背景 性能优化是前端开发一个非常重要的组成部分,如何更好地进行网络传输,如何优化浏览器渲染过程,来定位项目中存在的问题.Chrome DevTools给我们提供了2种常用方式 Audits和Per ...

  9. chrome-performance页面性能分析使用教程

    运行时性能表现(runtime performance)指的是当你的页面在浏览器运行时的性能表现,而不是在下载页面的时候的表现.这篇指南将会告诉你怎么用Chrome DevTools Performa ...

随机推荐

  1. TensorFlow 卷积神经网络手写数字识别数据集介绍

    欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! 手写数字识别 接下来将会以 MNIST 数据集为例,使用卷积层和池 ...

  2. ThunderNet :像闪电一样,旷视再出超轻量级检测器,高达267fps | ICCV 2019

    论文提出了实时的超轻量级two-stage detector ThunderNet,靠着精心设计的主干网络以及提高特征表达能力的CEM和SAM模块,使用很少的计算量就能超越目前的one-stage d ...

  3. FME中按照ID值过滤块参照中的多个要素

  4. coding++ :javascript Date format (js日期格式化)

    方式一: // 对Date的扩展,将 Date 转化为指定格式的String // 月(M).日(d).小时(h).分(m).秒(s).季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1 ...

  5. Python python 函数参数:参数组合

    '''在Python中定义函数,可以用必选参数.默认参数.可变参数和关键字参数, 这4种参数都可以一起使用,或者只用其中某些 参数定义的顺序必须是:必选参数.默认参数.可变参数和关键字参数 ''' d ...

  6. 蓝桥杯 K好数(Java)

    越来越觉得自己菜,一道简单的动态规划写不出来,题解也是看了很多份才看懂了,所以尽量以图表的方式写了题解,希望我的题解能帮到其他人吧.(;´Д`) 首先是题目: 输入描述: 输入包含两个正整数,K和L. ...

  7. [ASP.NET Core MVC] 如何实现运行时动态定义Controller类型?

    昨天有个朋友在微信上问我一个问题:他希望通过动态脚本的形式实现对ASP.NET Core MVC应用的扩展,比如在程序运行过程中上传一段C#脚本将其中定义的Controller类型注册到应用中,问我是 ...

  8. H、Magic necklace

    链接:https://ac.nowcoder.com/acm/contest/3570/H 来源:牛客网 题目描述 There was a magic necklace. The necklace i ...

  9. 程序开发中的术语,如IDE,OOP等等

    我们在开发程序过程中,会用到一些与编译有关的术语,比如:[编辑器.编译器.调试器.连接器,链接器.解释器,集成开发环境(Integrated Development Environment,IDE). ...

  10. 解决VS项目程序运行完就自动关闭窗口

    VS的程序运行完会关闭窗口,需要设置工程属性 笔者虽然是Java开发者,但是学习用到了C++与C语言,之前使用的是dev与codeblock并没有这个情况,那么如何解决 首先你有这个hello,wor ...