【第1156期】Chrome DevTools - 性能监控

转载 2018年01月02日 00:00:00

前言

去年,其实也就前几天的事情看到的时候还蛮惊讶的,现在浏览器的自带工具都做的这么完善了,秒啊。特别是现在很多H5的动画,在不同的设备上性能差异很大,可以通过这样的工具来了解“毛病”。今日早读文章由@Cherry翻译分享。

正文从这开始~

你是否经常需要 JavaScript 或者 CSS 进行优化,但是不能找到一个简单的方式来衡量优化的效果?

当然,你可以使用时间轴来记录,但是在大多数情况下,时间轴只记录数据,并不是实时更新的。在这点还有其他的性能测量技巧,Chrome DevTools 添加了 “Performance Monitor(性能监控)” 选项卡,可以体现实时性能:

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1

这些都是在 Chrome 稳定版本中可用的并且可以进行以下性能监控:

  1. 打开 URL:“chrome://flags/#enable-devtools-experiments”

  2. 将 “Developer Tools experiments” 选项设置为“启用”

  3. 点击 “Relaunch now” 来重启 Chrome

  4. 打开 Chrome DevTools (快捷键为 CMD/CTRL + SHIFT + I)

  5. 打开 DevTools “Setting” -> “Experiments” 选项

  6. 点击 6 次 SHIFT 显示隐藏的选项

  7. 选中 “Performance Monitor” 选项

  8. 重启 DevTools (快捷键 CMD/CTRL + SHIFT + I )

  9. 点击 “Esc” 打开附加面板

  10. 选择 “Performance monitor”

  11. 单击启用/禁用

  12. 开始使用性能监控吧 ?


0?wx_fmt=jpeg

这里有很多不同的性能选项,大部分都是非常实用的并且我们在 Chrome 中用一些方法进行度量(例如时间轴,性能选项等)。

但是我想要分享一些新内容:

  • “Layouts / sec”

  • “Style recalcs / sec”

允许你实时的检测你的 CSS 性能,例如:感谢 csstriggers.com,我们知道,改变 CSS 的 top left属性会触发整个像素渲染流程:绘制,布局和组合。如果我们将这些属性用于动画,它将每秒触发几十次/上百次操作。

但是如果你使用 CSS 的 transform 属性的 translateX/Y 来切换动画,你将会发现,这并不会触发绘制和布局,仅仅会触发组合这一阶段,因为这是基于 GPU 的,会将你的 CPU 使用率降低为基本为 0%。

所有的这些都在 Paul Irish 的文章 为什么使用 Translate() 移动元素优于 Top/left。为了测量差异,Paul 使用“时间轴”,展示了触发绘制和布局动作。但是近些年,Paul 正在致力于使用 Chrome DevTools 进行改良,这并不令人惊讶,我们终于有了一个合适的方法来衡量实时 CSS 性能。(我 fork 了他动画切换的示例代码)

0?wx_fmt=jpeg

示例

一般来说,Chrome 中的性能监视器有很多用途。现在,你可以获得实时的应用程序性能数据啦。

最后,为你推荐

【第843期】前端性能优化

【第564期】移动前端负责人朱海源:移动端电商类展示页面性能优化实战

关于本文

译者:@Cherry

译文:https://juejin.im/post/5a37b2f56fb9a0451e3fe73d(掘金翻译)

作者:@malyw

原文:https://hospodarets.com/chrome-devtools-performance-monitor

校对者:@萌萌、@noahziheng

0?wx_fmt=jpeg

昨晚回到厦门,打开公众号后台看到有这么一条信息让人看了莫名的感动,谢谢。

@Leung:希望早读君2018能睡多点 身体健康

@Leung童鞋,看到消息后请联系我,送你一本《CSS世界》作为礼物。

Chrome DevTools(4):推荐几款DevTools插件

关于DevTools插件 应用于Chrome开发者工具的插件不同于普通的Chrome应用或者插件,它是给你的Chrome DevTools扩展更多的功能,方便你查看和调试web程序。它的安装方法...
  • GuoYahong
  • GuoYahong
  • 2015年04月22日 16:42
  • 1747

ChromeDevTools 教程

http://discover-devtools.codeschool.com/   对于前端工程师来说,掌握ChromeDevTools是一项必备技能。而大多数前端开发工程师也承认,即使天天都在...
  • otong
  • otong
  • 2013年05月29日 09:03
  • 2888

chrome devtools打开空白解决办法

1、adb连接正常,打开手机USB调试 2、第一次使用的时候一定要保证翻墙!翻墙!翻墙 3、谷歌浏览器中打开chrome://inspect/#devices 4、打开微信小程序,刷新谷歌ins...
  • r455678
  • r455678
  • 2017年01月20日 10:54
  • 2840

Chrome DevTools:在 Profile 性能分析中显示原生 javascript 函数

原生函数(native function)是 JavaScript 语言的一部分,这些函数有别于开发者编写的自定义函数。当我们在 profiler 中查看代码的调用栈时,这些函数是被过滤掉的。我们在 ...
  • JustJavaC
  • JustJavaC
  • 2017年03月29日 12:49
  • 1808

Chrome DevTools的使用

今天要聊的开发技巧并不是要让各位产品大拿们转岗成为开发,来抢我的饭碗。只是想告诉大家,如果知道这些技巧,也许会对你的工作带来一些方便,就像学会了茴香豆的茴字有四种写法。 Chrome...
  • hopewtc
  • hopewtc
  • 2016年01月28日 12:31
  • 3937

在chrome devtools里调试js

以前调试js只是在console里,偶然看到这样一种调试方式,就查了一下
  • CCLOVETT
  • CCLOVETT
  • 2014年09月06日 12:03
  • 2551

如何用好 Chrome devtools

相信绝大部分的前端是使用Chrome进行开发的,一方面Chrome浏览器确实做得好,更重要的一方面是因为Chrome有一个无法匹敌的调试工具。用好这个调试工具可以提高编程效率,帮助快速地定位问题。 ...
  • zgrkaka
  • zgrkaka
  • 2017年07月13日 18:02
  • 516

谷歌浏览器开发调式工具devTools最新教程(完整版)

基本说明谷歌浏览器chrome devTools最新教程(完整版)google浏览器chrome已超越IE成为最流行的浏览器.chrome之所以受到人们的喜爱,是因为其轻,快,同时也非常安全. 对于...
  • songtaoxy
  • songtaoxy
  • 2017年11月26日 00:46
  • 260

chrome devtool extension debug 方法

需要调试的页面,写到options_page 属性中 { "name": "Sample", "version": "0.1.0", "description": "Sample Dev...
  • xiongzhengxiang
  • xiongzhengxiang
  • 2014年02月13日 16:46
  • 1353

vue-devtools chrome 开发工具

1.github下载地址:https://github.com/vuejs/vue-devtools 有Git的同学直接 git clone https://github.com/vuejs/v...
  • u013362969
  • u013362969
  • 2017年06月02日 16:01
  • 3890
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【第1156期】Chrome DevTools - 性能监控
举报原因:
原因补充:

(最多只允许输入30个字)