Chrome DevTools 二: Performance 性能面板

Chrome DevTools 第二篇 Performance

主要介绍performance在我们日常开发中所起到的作用,以及如何利用performance 面板进行性能分析和相关优化建议。

性能面板 Performance

记录和分析页面运行中的所有活动,是解决前端性能问题的重要工具。

1. 控制栏功能

  1. 录制: 点击 Record (按Ctrl+E),开始录制。记录时按钮会变成红色。再次点击停止记录;
  2. 刷新: 刷新页面重新分析;
  3. 清除: 清除页面分析结果;
  4. 上下箭头: 用来上传和下载每一次性能检测报告;
  5. **Screendshots:**显示屏幕快照,是用来查看在每个时间段界面的变化;
  6. Memory: 存储调用栈的大小,在不同时间段的不同大小;
  7. Disable Javascript samples: 禁用 JavaScript 调用栈;
  8. Enable advanced paint instrumentation(slow): 记录渲染事件的细节;
  9. Network: 模拟不同的网络环境,网络环境配置是必须的,因为我们在做性能优化的方案时,需要有确定的网络环境来对比优化前后的量化指标。
  10. CPU: 模拟不同的CPU运行速度

2. 性能记录

准备记录之前,最好打开一个无痕模式下的chrome,避免我们安装的其他插件对结果造成影响。

运行时性能
  1. 首先进入目标页面,打开 performance 面板
  2. 点击 record 开始记录;
  3. 和页面的交互会被记录;
  4. 再次点击record 停止记录。

加载性能
  1. 首先进入目标页面,打开 performance 面板
  2. 点击 reload 开始记录;
  3. 开发者工具首先会前往 about:blank,以清除所有剩余的屏幕截图和跟踪记录。在页面重新加载时记录性能指标,然后自动停止。
网页活动内容

devtools会自动聚焦大部分活动的范围区间

各颜色代表意义
  • 蓝色 Loading:加载耗时
  • 黄色 Scripting:脚本执行耗时
  • 紫色 Rendering:渲染耗时
  • 绿色 Painting:绘制耗时
  • 灰色 Ohter:系统时间
  • 白色 Idle:空闲时间
FPS

图示蓝框里面的一条红色部分是FPS,也就是帧率 ,预期是帧率越高,动画效果越好,红色代表帧率下降较多,绿色代表帧率较高

CPU

CPU 图表中的颜色对应于"性能"面板底部的Summary 标签页中的颜色。CPU 图表充满了颜色这一事实意味着,在记录期间 CPU 已用尽。每当您看到 CPU 长时间达到上限时,系统就会提示设法减少工作量。

缩略图

鼠标悬浮在CPU或NET面板上会展示当前时刻的屏幕截图

选择区间范围
CSS选择器性能分析
Selector Stats
说明
用时(毫秒)Elapsed 浏览器匹配此 CSS 选择器所用的时间。此时间以毫秒 (ms) 为单位.
尝试匹配次数 浏览器引擎尝试与此 CSS 选择器匹配的元素数量。
匹配数 浏览器引擎与此 CSS 选择器匹配的元素数量。
慢路径不匹配项所占百分比 与此 CSS 选择器不匹配的元素与浏览器引擎尝试匹配的元素之间的比率,以及浏览器引擎使用优化程度较低的代码进行匹配的元素所占的比例。
选择器 匹配的 CSS 选择器。
样式表 包含 CSS 选择器的 CSS 样式表。

相关推荐
袁煦丞14 分钟前
9.12 Halo的“傻瓜建站魔法”:cpolar内网穿透实验室第637个成功挑战
前端·程序员·远程工作
universe_0136 分钟前
day27|前端框架学习
前端·笔记
沙尘暴炒饭38 分钟前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育1 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo1 小时前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端
yinuo1 小时前
Uni-App跨端实战:支付宝小程序WebView与H5通信全流程解析(02)
前端
GISer_Jing2 小时前
sqb&ks二面(准备)
前端·javascript·面试
谢尔登2 小时前
【Webpack】模块联邦
前端·webpack·node.js
Bottle4142 小时前
深入探究 React Fiber(译文)
前端
汤姆Tom2 小时前
JavaScript Proxy 对象详解与应用
前端·javascript