• Chrome DevTools-Performance Monitor
  • Malyw
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Cherry
  • Proofreader: Meng Meng, Noahziheng

Chrome DevTools – Performance Monitoring

Do you often need JavaScript or CSS optimizations, but can’t find an easy way to measure the effect of your optimizations?

Of course, you can use a timeline to record, but for the most part, a timeline only records data, not updates in real time. As an additional Performance measurement tip at this point, Chrome DevTools has added the “Performance Monitor” TAB to show real-time Performance:

These are available in stable versions of Chrom and can be monitored for:

  1. Open URL: “Chrome ://flags/#enable-devtools-experiments”
  2. Set “Developer Tools Experiments” to “Enable”.
  3. Click “Relaunch Now” to restart Chrome
  4. Open Chrome DevTools (CMD/CTRL + SHIFT + I)
  5. Open DevTools “Setting” -> Experiments
  6. Click on the 6 timesSHIFTShows hidden options
  7. Select Performance Monitor
  8. Restart DevTools (CMD/CTRL + SHIFT + I)
  9. Click Esc to open the Add-on panel
  10. Select the “Performance monitor”
  11. Click Enable/Disable
  12. Start using performance monitoring 😀

There are a lot of different performance options, most of which are very practical and we measure them in Chrome in a few ways (timeline, performance options, etc.).

But I want to share something new:

  • And “Layouts/SEC”
  • “Style recalcs/SEC”

Allows you to check your CSS performance in real time, for example:

Thanks to CSStriggers.com, we know that changing the top and left attributes of CSS triggers the entire pixel rendering process: drawing, layout and composition. If we use these properties for animation, it will trigger dozens/hundreds of operations per second.

But if you use the translateX/Y of CSS’s Transform property to switch animations, you’ll see that this doesn’t trigger the drawing and layout phase, just the composition phase, because it’s GPU-based and will reduce your CPU usage to basically 0%.

All of this goes back to Paul Irish’s article on why use Translate() to move the element better than Top/left. To measure the difference, Paul uses a “timeline” that shows trigger drawing and layout actions. But in recent years, Paul has been working on improvements using Chrome DevTools, and it’s not surprising that we finally have a proper way to measure real-time CSS performance. (I fork his sample code for animation toggle)

The sample

In general, performance monitors in Chrome have many uses. Now you can get real-time application performance data.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.