Chrome Devtool 使用指南

article/2025/9/29 1:42:12

Chrome Devtool Performance使用指南

  • 运行时性能表现（runtime performance）指的是当你的页面在浏览器运行时的性能表现，而不是在下载页面的时候的表现。这篇指南将会告诉你怎么用Chrome DevToos Performance功能去分析运行时性能表现。在RAIL性能评估模型下，你可以在这篇指南中可以学到怎么去用这个performance功能去分析Response, Animation, 以及 Idle 这三个性能指标。
让我们开始吧
  • 在这篇指南中，我们会用Performance工具去分析一个现有的在线DEMO，然后教会你怎么去分析，从而找到性能瓶颈。
  • 打开Chrome的匿名模式。匿名模式可以保证Chrome在一个相对干净的环境下运行。比如说，你安装了许多chrome插件，这些插件可能会影响我们分析性能表现。
  • 在匿名模式下打开右边这个链接，DEMO，这个网页就是我们要用来分析的DEMO。这个页面里都是很多上下移动的蓝色小方块。
    按下Command+Opiton+I（Mac）或者Control+shift+I (Windows, Linux) 来打开Devtools
模拟移动设备的CPU

移动设备的CPU一般比台式机和笔记本弱很多。当你想分析页面的时候，可以用CPU控制器（CPU Throttling）来模拟移动端设备CPU。

  • 在DevTools中，点击 Performance 的 tab。
  • 确保 Screenshots checkbox 被选中
  • 点击 Capture Settings（⚙️）按钮，DevTools会展示很多设置，来模拟各种状况
  • 对于模拟CPU，选择2x slowdown，于是Devtools就开始模拟两倍低俗CPU
设置DEMO

为了使得这个DEMO有相对统一的运行表现（不同的读者，机器的性能千差万别）。这个DEMO提供了自定义功能，用来确保这个DEMO的统一表现。

  • 一直点击 Add 10 这个按钮直到你能很明显看到蓝色小方块移动变慢，在性能比较好的机器上，大概要点击20次左右。
  • 点击 Optimize按钮，你会发现蓝色小方块会变的很快而且动画变得平滑。
  • 点击 un-optimize 按钮，蓝色小方块又会变成之前的模样。
记录运行时性能表现

在之前的DEMO中，当你运行优化模式的时候，蓝色小方块移动地非常快。为什么呢？明明两个模式都是移动了同样数量的小方块而且移动的时间也一样。那么现在我们在Performance界面下录制下发生的一切，并且学习如何分析这个记录，从而找到非优化模式下的性能瓶颈。

  • 在DevTools中，点击 Record 。这时候Devtools就开始录制各种性能指标
    在这里插入图片描述
  • 等待几分钟
  • 点击Stop按钮，Devtools停止录制，处理数据，然后显示性能报告
    在这里插入图片描述
分析报告

一旦你得到了页面的性能表现报告，那么就可以用它来分析页面的性能，从而找到性能瓶颈。

分析每一秒的帧

FPS（frames per second）是用来分析动画的一个主要性能指标。能保持在60的FPS的话，那么用户体验就是不错的。

  • 观察FPS图表，如果你发现了一个红色的长条，那么就说明这些帧存在严重问题，有可能导致非常差的用户体验。一般来说，绿色的长条越高，说明FPS越高，用户体验越好。
    在这里插入图片描述
  • 就在FPS图表下方，你会看到CPU图表。在CPU图表中的各种颜色与Summary面板里的颜色是相互对应的，Summary面板就在Performance面板的下方。CPU图表中的各种颜色代表着在这个时间段内，CPU在各种处理上所花费的时间。如果你看到了某个处理占用了大量的时间，那么这可能就是一个可以找到性能瓶颈的线索。
    在这里插入图片描述
  • 把鼠标移动到FPS，CPU或者NET图表之上，DevToos就会展示这个时间点界面的截图。左右移动鼠标，可以重发当时的屏幕录像。这被称为scrubbing, 他可以用来分析动画的各个细节。
    在这里插入图片描述
  • 在Frames图表中，把鼠标移动到绿色条状图上，Devtools会展示这个帧的FPS。每个帧可能都在60以下，都没有达到60的标准。
    在这里插入图片描述
    当然这个对于DEMO，可以相当容易观察到性能的问题。但是在现实使用场景下，就不是那么容易观察到了。所以要把常常使用这些工具来分析页面。

小功能：显示实时FPS面板

另外一个好用的小工具就是实时FPS面板，它可以实时展示页面的FPS指标

  • 按下 Command+Shift+P（Mac）或者 Control+Shift+P(Windows, Linux) 打开命令菜单
  • 输入Rendering，点选Show Rendering
  • 在Rendering面板里，激活FPS Meter。FPS实时面板就出现在页面的右上方。
    在这里插入图片描述
  • 关闭FPS Meter只要按下Escape就可以了。这篇指南里暂时用不上这个功能。
定位瓶颈

现在已经确定到这个页面的动画性能表现不太好，那么下一步就是找到为什么

  • 注意Summary面板，你会发现CPU花费了大量的时间在rendering上。因为提高性能就是一门做减法的艺术，你的目标就是减少rendering的时间
    在这里插入图片描述
  • 展开Main图表，Devtools展示了主线程运行状况。X轴代表着时间。每个长条代表着一个event。长条越长就代表这个event花费的时间越长。Y轴代表了调用栈（call stack）。在栈里，上面的event调用了下面的event。
    在这里插入图片描述
  • 在性能报告中，有很多的数据。可以通过双击，拖动等等动作来放大缩小报告范围，从各种时间段来观察分析报告。
    在这里插入图片描述
  • 在事件长条的右上角出，如果出现了红色小三角，说明这个事件是存在问题的，需要特别注意。
  • 双击这个带有红色小三角的的事件。在Summary面板会看到详细信息。注意reveal这个链接，双击它会让高亮触发这个事件的event。如果点击了app.js:94这个链接，就会跳转到对应的代码处。
    在这里插入图片描述
  • 在app.update这个事件的长条下方，有很多被触发的紫色长条。如果放大这些事件长条，你会看到它们每个都带有红色小三角。点击其中一个紫色事件长条，Devtools在Summary面板里展示了更多关于这个事件的信息。确实，这里有很多reflow的警告。
  • 在summary面板里点击app.js:70链接，Devtools会跳转到需要优化的代码处
    在这里插入图片描述

译者博客：https://nicholaslee119.github.io/
原文出处：https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

基本概念概述

各种颜色代表的含义

在这里插入图片描述
在这里插入图片描述

  • 加载中（蓝色）——网络相关事件，如HTTP请求。它还包括诸如HTML解析、CSS解析、图像解码等活动。
  • 执行脚本（黄色）——与JavaScript相关的事件，包括特定于DOM的活动、垃圾收集、特定于网站的JavaScript、其他活动，等等。
  • 渲染（紫色）——与页面渲染相关的所有事件，包括将CSS应用于网页HTML等活动，以及会导致重新渲染的活动，例如由JavaScript触发的对页面HTML的更改。
  • 绘制（绿色）——与将布局绘制到屏幕上相关的事件，例如层合成和光栅化。
    在这里插入图片描述
HTML解析事件 / DOM就绪事件 / 关联的脚本活动

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 点击其中之一：
    在这里插入图片描述
jank
  • 页面性能的主要目标：最小化浏览器加载和渲染页面的时候
  • jank（单一的帧中占用了太多CPU时间）是元凶：jank是指交互和动画效果卡顿，或未能顺利渲染
  • 帧是浏览器在每秒显示时间内所做的工作量。这里的工作指的是前面描述的事件，例如加载、脚本执行、绘制和渲染。
  • Performance面板以毫秒为单位进行测量。一秒钟内有60帧和1000毫秒
    在这里插入图片描述
    在这里插入图片描述
  • 为属性设置动画时，animate会调用一个计时器，而正是这个计时器导致了一个相当小的jank
  • CSS过渡是CSS的一项原生技术，非常适合线性动画
标记时间线

在这里插入图片描述

在Chrome中对Javascript进行基准测试
  • console.time()
  • console.timeEnd()
    在这里插入图片描述

Chrome Devtool Network使用☞南

  • 模拟一个比较慢的网络环境
    在这里插入图片描述
  • 创建自定义网络节流配置
    在这里插入图片描述
    在这里插入图片描述
  • 禁用缓存
    选中Disable cache，首次访问一个网站时，不会有任何资源缓存，否则网站的资源将会从缓存中提供
    在这里插入图片描述

首字节时间和加载时间

  • 首字节时间（TTFB）：用户请求网页到响应的第一个字节到达之间的时间
  • 加载时间：资源完全完成下载所需的时间
  • TTFB值标记在Chrome中，发出请求之前还会执行一些步骤，例如排队请求、DNS查找、连接设置和SSL握手。
  • 为了消除DNS查找的延迟，浏览器会创建一个DNS查找缓存，如果一个域名的对应IP地址不在缓存中，则查找IP地址将导致延迟。但是重复请求时，IP地址将被缓存以消除后续请求的延迟。
    在这里插入图片描述

http://chatgpt.dhexx.cn/article/0eDOqPNT.shtml

相关文章

devtool使用

devtool使用

记录点没用的东西 1. 引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><version>2.3.2.RELEASE</version> </dependency> 2.pom中加入maven插件 <plugin…
阅读更多...
webpack devtool详解

webpack devtool详解

前言 devtool也是之前常用的一个配置&#xff0c;我们稍微了解下吧&#xff0c;不研究太深&#xff0c;毕竟现在都不怎配置他。 内容 devtool是配置sourceMap的。 sourceMap大家都知道&#xff0c;我们本地或者测试环境出了错误&#xff0c;可以在source中迅速定位错误&#x…
阅读更多...
devtool配置

devtool配置

devtool配置 一、devtool配置1.source map 源码地图2.webpack中的source map3.对于开发环境 一、devtool配置 1.source map 源码地图 本小节的知识与 webpack 无关 前端发展到现阶段&#xff0c;很多时候都不会直接运行源代码&#xff0c;可能需要对源代码进行合并、压缩、转换…
阅读更多...
dev-tool安装方法（手动安装版）

dev-tool安装方法（手动安装版）

记录一下vue调试神器dev-tool的安装过程&#xff0c;由于是在公司内网&#xff0c;也不方便挂梯子&#xff0c;所以手动安装——下载源码在本地编译&#xff0c;再添加扩展程序的方式安装。过程如下&#xff1a; 一、dev-tool源码获取 git地址&#xff1a;https://github.com/…
阅读更多...
一文彻底搞懂webpack devtool

一文彻底搞懂webpack devtool

为什么需要Source Map 首先根据谷歌开发者文档的介绍&#xff0c;Source Map一般与下列类型的预处理器搭配使用&#xff1a; 转译器&#xff08;Babel&#xff09;编译器&#xff08;TypeScript&#xff09;Minifiers&#xff08;UglifyJS&#xff09; 为什么呢&#xff1f;…
阅读更多...
OpenBmc开发8：devtool简介与使用

OpenBmc开发8：devtool简介与使用

1 简介 devtool是yocto中的一个工具&#xff0c;此命令行工具作为可扩展SDK&#xff08;eSDK&#xff09;的一部分&#xff0c;是基础组件。可以使用devtool来帮助构建&#xff0c;测试和打包eSDK中的软件。可以使用该工具有选择地将构建的内容集成到OpenEmbedded构建系统构建…
阅读更多...
怎么在navicat（Navicat for MySQL）中运行SQL代码

怎么在navicat（Navicat for MySQL）中运行SQL代码

1、首先在navicat中新建一个数据库&#xff08;之前已经建好数据库&#xff0c;忽略本步&#xff09; 2、点击上图中的“查询”命令 3、再点击“新建查询” 4、系统自动跳出如下图命令窗口 5、可以在命令行中敲代码或直接复制已有代码。如果代码是关于建表&#xff0c;执行成…
阅读更多...
使用SQL语句创建数据表

使用SQL语句创建数据表

写法一 create table student (sno char(10) primary key,sname varchar(20) not null,ssex char(2),sage smallint,sdept varchar(20),sid char(18) unique)写法二 create table student (sno char(10), sname varchar(20) not null, ssex char(2), sage smallint, sdept v…
阅读更多...
SQL代码自动生成器

SQL代码自动生成器

SQL代码自动生成器&#xff0c;效果图如下&#xff1a; 实现原理很简单&#xff1a; 通过数据库名&#xff0c;获取到数据表名&#xff0c;进而获取到数据字段。通过可视化的选择自定义的添加修改&#xff0c;一步一步完成SQL语句的编写。 其中对于常用的存储过程参数列表的书…
阅读更多...
sql语句智能提示插件

sql语句智能提示插件

1.下载安装 SqlPrompt10 及SQL.Prompt.Keygen注册码生成工具 链接: https://pan.baidu.com/s/1Oa3Ci6o2JjHZMjTXHdCkQg?pwdghew 提取码: ghew 2.修改hosts文件&#xff08;如若跳过此步骤&#xff0c;虽然可以成功&#xff0c;但是重启电脑之后&#xff0c;又得重新操作&a…
阅读更多...
sql server代码创建数据库详细过程

sql server代码创建数据库详细过程

1.先打开sql server 2.点击新建查询 3.创建 数据库 主数据文件的大小为5MB&#xff0c;文件【按兆字节】的方式增长&#xff0c;一次增长2MB&#xff0c;最大容量20MB&#xff1b; 事务日志文件大小为4MB&#xff0c;文件【按百分比】的方式增长&#xff0c;一次增长25%&#…
阅读更多...
vue实现codemirror代码编辑器中的SQL代码格式化功能

vue实现codemirror代码编辑器中的SQL代码格式化功能

vue实现codemirror代码编辑器中的SQL代码格式化功能 1、首先使用npm安装sql-formatter插件 npm install --save sql-formatter2、然后引入该sql-formatter.js文件 import sqlFormatter from "sql-formatter";3、接下来就是针对需要格式化的代码调用该方法就OK啦 /…
阅读更多...
SQL Server 代码颜色

SQL Server 代码颜色

今天初识SQL Server 随便敲了点代码、发现这代码真是五颜六色、既然有颜色就有寓意&#xff01; 原来有这么多颜色、真是学习了! _____________________________chenchen
阅读更多...
IDEA格式化SQL代码

IDEA格式化SQL代码

IDEA格式化SQL代码 写在前面1.1、建立连接&#xff0c;数据库服务器地址&#xff0c;账号&#xff0c;密码等..1.2、基本操作&#xff0c;很多&#xff0c;增删改查&#xff0c;控制台SQl编写等等 写在前面 IntelliJ IDEA集成了很多我们开发中常用的工具&#xff0c;Linux连接…
阅读更多...
SQL除法怎么用代码表示

SQL除法怎么用代码表示

SQL除法代码详解 前言一、除运算&#xff08;关系代数&#xff09;二、第一题&#xff1a;2.1导入数据到SQL Server&#xff1a;2.2理解&#xff1a;2.2.1代码&#xff1a;2.2.2↑代码理解和答案&#xff1a; 三、第二题&#xff1a;求使用了同“供应商S1所供应的全部零件”相同…
阅读更多...
VUE实现SQL在线编辑器，SQL分析器，SQL代码关键字提示

VUE实现SQL在线编辑器，SQL分析器，SQL代码关键字提示

1、首先使用npm安装CodeMirror插件,sql-formatter格式化插件 npm install --save codemirror npm install --save sql-formatter2、然后引入该文件 import codemirror/theme/ambiance.css import codemirror/lib/codemirror.css import codemirror/addon/hint/show-hint.cssc…
阅读更多...
数据库SQL（基础代码）

数据库SQL（基础代码）

启动、连接、断开和停止MySQL服务器 通过系统服务器和命令提示符（DOS）都可以启动、连接断开和停击MySQL，操作非常简单。 1.启动、停止MySQL服务器   启动、停止MySQL服务器，的方法有两种：系统服务器和命令提示符（DOS）。 (1)通过系统服务器启动、停止MySQL服务器   …
阅读更多...
html640设计稿,移动设备分辨率（终于弄懂了为什么移动端设计稿总是640px和750px）...

html640设计稿,移动设备分辨率（终于弄懂了为什么移动端设计稿总是640px和750px）...

在我开始写移动端页面至今&#xff0c;一直有2个疑问困扰着我&#xff0c;我只知道结果但不知道为什么 问题1&#xff1a;为什么设计师给的设计稿总是640px或750px(现在一般以Phone6为基准&#xff0c;给的750px) 问题2&#xff1a;为什么我们拿到640px和750px的设计稿&#xf…
阅读更多...
1px像素问题

1px像素问题

为什么会存在1px问题&#xff1f;怎么解决&#xff1f; - 掘金 作为前端&#xff0c;你应该了解的分辨率/逻辑像素/物理像素/retina屏知识&#x1f9d0; - 掘金 解决移动端1px边框问题的几种方法 - AhuntSun - 博客园 1、分辨率 分辨率x像素&#xff08;水平&#xff09; * …
阅读更多...
px和分辨率的关系总结

px和分辨率的关系总结

在相同的屏幕宽高下&#xff1a;如&#xff1a;15.6英寸&#xff08;396.24毫米&#xff09;的笔记本电脑&#xff1a; 每单位1920*xxx的分辨率1366*xxx的分辨率一毫米1920/396.244.8个px1366/396.243.4个px 高分辨率意味着大约每一毫米5像素点&#xff0c;像素点越多&#x…
阅读更多...
推荐文章

Copyright @ 2022~2023