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

最新推荐文章于 2024-08-15 21:59:30 发布

前端早读课

最新推荐文章于 2024-08-15 21:59:30 发布

阅读量3.6k

点赞数

前言

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

正文从这开始~

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

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

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

打开 URL：“chrome://flags/#enable-devtools-experiments”
将 “Developer Tools experiments” 选项设置为“启用”
点击 “Relaunch now” 来重启 Chrome
打开 Chrome DevTools (快捷键为 CMD/CTRL + SHIFT + I)
打开 DevTools “Setting” -> “Experiments” 选项
点击 6 次 SHIFT 显示隐藏的选项
选中 “Performance Monitor” 选项
重启 DevTools (快捷键 CMD/CTRL + SHIFT + I )
点击 “Esc” 打开附加面板
选择 “Performance monitor”
单击启用/禁用
开始使用性能监控吧 ?

这里有很多不同的性能选项，大部分都是非常实用的并且我们在 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 了他动画切换的示例代码）