performance.mark and performance.measure for improved DevTools profiling - a podcast by Kent C. Dodds

https://stackoverflow.com/a/46780568/971592
Hello there friends. Sorry, it's been a little bit of a break but I was
working 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 profile
it. And it's always so frustrating to like try and find the part of the
code that you're trying to profile in that flame graph.
It's really kind of a confusing area. And I remembered that there's the
performance 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 to
measure 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 it
didn't work right away and I looked up and found a stack overflow post that
showed exactly how to do this and so I'll link to that in the notes of this
episode.But basically, it's a combination of the mark and measure APIs on the
performance object. So you say performance dot mark and you give it astring to label that mark.And then another performance you do whatever it
is 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 I
think 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 test
this 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 after
that 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. And
then 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 dev
tools 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 you
actually care about.Unfortunately, I don't know whether this works very well for asynchronous
code. So, I cure it's we're gonna do an await here and then afterThat away
I don't think that's gonna work very well But for synchronous code it works
great And actually if we're talking about async code and there is some
performance profiling metrics that you can do with React app specificallyand they do have the ability to do some sort of timings for that with
asynchrony.It's actually very cool and I teach you about it on epic react. So if
you're if you're not done the performance workshop yet, or the actually the
performance 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.

Further episodes of 3 Minutes with Kent

Further podcasts by Kent C. Dodds

Website of Kent C. Dodds