Chrome F12开发者工具 DevTools性能(Performance)说明

摘要:Performance(性能)面板可以查看页面加载过程中的详细信息,比如在什么时间开始做什么事情,耗时多久等等。相较于 Network(网络)面板,不仅可以看到通过网络加载资源的信息,还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息。

DevTools,即 Chrome 开发者工具,Chrome 开发者工具是一套内置于 Google Chrome 中的 Web 开发和调试工具,可用来对网站进行迭代、调试和分析。

性能(Performance)

    Performance(性能)面板可以查看页面加载过程中的详细信息,比如在什么时间开始做什么事情,耗时多久等等。相较于 Network(网络)面板,不仅可以看到通过网络加载资源的信息,还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息。

    Chrome F12开发者工具 DevTools性能(Performance)说明

    面板主要的区域划分:

  • Controls(控制区域) - 分为控制条和复选框,控制条包含录制、刷新页面分析、清除结果等一系列操作;
  • Overview(概述区域) - 页面性能的汇总,高度概括随时间线的变动,包含 FPS、CPU、NET;
  • Flame Chart(火焰图区域) - 线程面板,在火焰图上看到三条(绿色的有好几条)垂直的虚线。蓝线代表 DOMContentLoaded 事件,绿线代表首次绘制的时间,红线代表 load 事件;
  • Details(细节区域) - 在 Flame Chart(火焰图区域)中,选择了某一事件后,这部分会展示与这个事件相关的更多信息。如果选择了某一帧,这部分会展示与选中帧相关的信息;如果既没有选中事件也没有选中帧,则这部分会展示当前记录时间段内的相关信息。

Chrome F12开发者工具 DevTools性能(Performance)说明

Controls(控制区域)

    Chrome F12开发者工具 DevTools性能(Performance)说明

  • Screenshots(屏幕截图):默认勾选,每一帧都会截图;
  • Memory(内存):勾选后可以看到各种内存消耗曲线;
  • Disable JavaScript samples(禁用 JavaScript 示例):减少在手机运行时系统的开销,模拟手机运行时勾选;
  • Network(网络):可以模拟在 3G、4G 等网络条件下运行页面;
  • Enable advanced paint instrumentation(slow)(启用高级画图检测工具(慢速)):捕获高级画图检测工具,带来显著的性能开销;
  • CPU(CPU 限制性能):主要为了模拟低 CPU 下的运行性能。移动设备的 CPU,与台式机和笔记本电脑相比,功率要小得多,因此可以使用 CPU 限制减速来模拟页面在移动设备上的表现。
  • 开始记录

  • 首先点击控制条左边的第一个圆圈,开始记录日志;
  • 等待几分钟(正常操作页面);
  • 点击 Stop 按钮,Devtools 停止录制,处理数据,然后显示性能报告。

Overview(概述区域)

    Chrome F12开发者工具 DevTools性能(Performance)说明

  • FPS(Frames per second):每秒帧数,是用来分析动画的一个主要性能指标。绿色竖线越高,FPS 越高。
  • CPU:此面积图指示消耗 CPU 资源的事件类型。在 CPU 图表中的各种颜色与 Summary(摘要)面板里的颜色是相互对应的,CPU 图表中的各种颜色代表着在这个时间段内,CPU 在各种处理上所花费的时间。如果你看到了某个处理占用了大量的时间,那么这可能就是一个可以找到性能瓶颈的线索。
    • CPU 资源面积图颜色划分

      颜色执行内容
      蓝色(Loading)网络通信和 HTML 解析
      黄色(Scripting)JavaScript 执行
      紫色(Rendering)样式计算和布局,即重排
      绿色(Painting)更改外观而不会影响布局,重绘
      灰色(other)其它事件花费的时间
      白色(Idle)空闲时间
    • 重绘是当节点需要更改外观而不会影响布局的,比如改变 color 就叫称为重绘;
    • 重排(回流)是布局或者几何属性需要改变;
    • 重排必定会发生重绘,重绘不一定会引发重排;
    • 重排所需的成本比重绘高的多,改变深层次的节点很可能导致父节点的一系列重排;
    • JS 修改 DOM 结构或样式 -> 计算 Style -> Layout(重排) -> paint(重绘) -> composite(合成)。
  • NET:每条彩色横杠表示一种资源,横杠越长,检索资源所需的时间越长(HTML:蓝色;CSS:紫色;JS:黄色;图片:绿色)。
    每个横杠的浅色部分表示等待时间(从请求资源到第一个字节下载完成的时间),深色部分表示传输时间(下载第一个和最后一个字节之间的时间)。

Flame Chart(火焰图区域)

Flame Chart(火焰图区域)详细的分析某些任务的详细耗时,从而定位问题。

    Chrome F12开发者工具 DevTools性能(Performance)说明

  • 蓝线代表 DOMContentLoaded 事件;
  • 红线代表 load 事件;
  • 绿线代表首次绘制的时间。
    • FP(First Paint):首次绘制;
    • FCP(First Contentful Paint): 第一次丰富内容的绘图;
    • FMP(First Meaningful Paint):第一次有意义的绘图;
    • LCP(Largest Contentful Paint):最大区域内容绘制。
  • DOMContentLoaded:就是 DOM 内容加载完毕,什么是 DOM 内容加载完毕?
    当你打开一个网页输入 URL,页面的展示首先是空白的,然后过一会,页面会展示出内容,但是页面的有些资源,比如说图片资源还无法看到,此时页面是可以正常的交互,过一段时间后,图片才完成显示在页面。从页面空白到展示出页面内容,会触发 DOMContentLoaded 事件,而这段时间就是HTML文档被加载和解析完成。
  • load:页面上所有的资源(图片,音频,视频等)被加载以后才会触发 load 事件,简单来说,页面的 load 事件会在 DOMContentLoaded 被触发之后才触发。

    Main(主线程)

    看下主线程,Devtools 展示了主线程运行状况。

  • X 轴代表着时间,每个长条代表着一个 event(事件),长条越长就代表这个 event 花费的时间越长。
  • Y 轴代表了调用栈(call stack),在栈里,上面的 event 调用了下面的 event。
  • Google 官方文档的例子:

    Chrome F12开发者工具 DevTools性能(Performance)说明

    如上图:click(点击)事件触发了 script_foot_closure.js 第 53 行的函数调用,Function Call(函数调用)可以看到一个匿名函数被调用,然后调用 Me() 函数,然后调用 Se(),依此类推。

    DevTools 为脚本分配随机颜色,在上图中,来自一个脚本的函数调用显示为浅绿色,另一个脚本的调用被渲染成米色。较深的黄色表示脚本活动,而紫色的事件表示渲染活动,这些较暗的黄色和紫色事件在所有记录中都是一致的。

  • 在性能报告中,有很多的数据,可以通过双击,拖动等等动作来放大缩小报告范围,从各种时间段来观察分析报告;
  • 在事件长条的右上角处,如果出现了红色小三角,说明这个事件是存在问题的,需要特别注意;
  • 双击带有红色小三角的事件,在 Summary(摘要)面板会看到详细信息。注意 reveal 这个链接,双击它会让高亮触发这个事件的 event。如果点击了这个链接,就会跳转到对应的代码处。

Details(细节区域)

一般要配合 Flame Chart(火焰图区域)一起使用。

    Chrome F12开发者工具 DevTools性能(Performance)说明

  • Summary(摘要):饼状图,汇总了各个事件类型所耗费的总时长;
  • Bottom-Up(自上而下):查看直接花费最多时间的活动时使用;
  • Call Tree(调用树):查看导致最多工作的根活动时使用;
  • Event Log(事件日志):查看按记录期间的活动顺序时使用。
  • Performance(性能)接口可以获取到当前页面中与性能相关的信息,它是 High Resolution Time API 的一部分,同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。

    实质上来说 Performance(性能)对象就是专门用于性能监测的对象,内置了几乎所有常用前端需要的性能参数监控,详细说明请浏览 Performance API 这篇文章。

分节内容

版权声明:本文为博主原创文章,未经博主允许不得转载。http://www.dedenotes.com/html/devtools-performance.html
(1)
打赏 微信扫一扫 微信 支付宝 QQ 扫码打赏

防止表单重复提交的 4 种方法

Dedenotes 赞(3)

平时开发的项目中可能会出现下面这些情况:由于用户误操作,多次点击表单提交按钮;由于网速等原因造成页面卡顿,用户重复刷新提交页面;黑客或恶意用户使用 Postman 等工具重复恶意提交表单(攻击网站)。

meta

Dedenotes 赞(3)

meta 是 html 语言 head 区的一个辅助性标签,位于文档的头部,不包含任何内容,标签的属性定义了与文档相关联的名称/值对。meta 标签可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

HTTP消息结构 HTTP请求报文和响应报文的格式

Dedenotes 赞(3)

HTTP 协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,基于 TCP/IP 通信协议来传递数据(HTML 文件, 图片文件, 查询结果等),所有的 WWW(World Wide Web)文件都必须遵守这个标准。