performance.mark and performance.measure for improved DevTools profiling

performance.mark and performance.measure for improved DevTools profiling

Released Friday, 4th June 2021
Good episode? Give it some love!
performance.mark and performance.measure for improved DevTools profiling

performance.mark and performance.measure for improved DevTools profiling

performance.mark and performance.measure for improved DevTools profiling

performance.mark and performance.measure for improved DevTools profiling

Friday, 4th June 2021
Good episode? Give it some love!
Rate Episode

https://stackoverflow.com/a/46780568/971592Hello there friends. Sorry, it's been a little bit of a break but I wasworking on something and I wanted to measure how fast it was but yeah andso I'm gonna use the Chrome DevTools profiling performance tab to profileit. And it's always so frustrating to like try and find the part of thecode that you're trying to profile in that flame graph.It's really kind of a confusing area. And I remembered that there's theperformance mark API and so you have the ability to add your own customtimings and so,You can say okay here's the start of what I'm trying tomeasure and here's the end. And how long did all of that take?And you can do like performance down now console log in and then likecompare and stuff. But I wanted to look at the flame graph. And so I itdidn't work right away and I looked up and found a stack overflow post thatshowed exactly how to do this and so I'll link to that in the notes of thisepisode.But basically, it's a combination of the mark and measure APIs on theperformance object. So you say performance dot mark and you give it astring to label that mark.And then another performance you do whatever itis you want to do So in my case I wanted to measure the reading time of ablog post and I'm using this module called reading hyphen time, which Ithink is what like all the gaps people logs and everything used for this.And so I call that function and I'm on a really big blog post and to testthis out. I call that function and then on the next line you sayperformance.mark and you give it another label and then you say right afterthat performance dot measure and you give three arguments the first is thelabel for.The measurement the second is for the start marker So whatever you put forthe first performance dot mark, that's what the second argument here. Andthen the last argument is whatever you put for the end. So you give it aname and then the start in the end and then that will show up in your devtools in the performance profiling tab and it just makes it so much easierto make sure that you're honing in on the area of the code that youactually care about.Unfortunately, I don't know whether this works very well for asynchronouscode. So, I cure it's we're gonna do an await here and then afterThat awayI don't think that's gonna work very well But for synchronous code it worksgreat And actually if we're talking about async code and there is someperformance profiling metrics that you can do with React app specificallyand they do have the ability to do some sort of timings for that withasynchrony.It's actually very cool and I teach you about it on epic react. So ifyou're if you're not done the performance workshop yet, or the actually theperformance section of the bookshelf app, then you may not have run upagainst that. But it's really cool. All right, hopefully that's helpful.I'll chat with you later.

Show More
Rate

Join Podchaser to...

  • Rate podcasts and episodes
  • Follow podcasts and creators
  • Create podcast and episode lists
  • & much more

Episode Tags

Do you host or manage this podcast?
Claim and edit this page to your liking.
,

Unlock more with Podchaser Pro

  • Audience Insights
  • Contact Information
  • Demographics
  • Charts
  • Sponsor History
  • and More!
Pro Features