Performance API

[00:00:00]
>> Todd Gardner: So capturing these metrics. So talked about a lot of different metrics. How do we actually gather any of these up? How do we actually see any of these in a real situation? So let's talk about that. All the performance metrics are available to us programmatically. We can get these things out of the browser and we can figure out.

[00:00:20]
We can capture them programmatically in whatever way we want. And there's two main things that are interesting for capturing performance metrics. The Performance API and the PerformanceObserver API. Both of these are available on npm, and we're gonna do just a brief overview of what you need to do with them.

[00:00:39]
Most the time, you're probably gonna use tooling of some kind to gather these performance metrics. You're probably not rolling your own performance-logging tool. But if you are, this is how you go about interacting with them. So just briefly, the Performance API has a couple of key things that are interesting on it.

[00:00:57]
One, it has a now method, so we can get a current timestamp. It allows us to getEntries, which are essentially all of the information in the Chrome Network tab. We can get at that information. We can also mark and measure specific events, which is all about capturing custom performance metrics.

[00:01:17]
So performance now is a high-resolution timestamp relative to the start of the page. So for example, if we do Date.now(), which isn't a performance API, that just gives us a timestamp. And it's a timestamp to the millisecond, I think, to the second. But if we give performance.now, we have a much higher resolution.

[00:01:42]
We have fractions of seconds. We have microseconds in performance.now. So if you're trying to measure detailed interactions, like the user clicks on this and how long does each phase of a thing take, performance.now gives you the tools to do that. Now, performance.now isn't a full timestamp, it's just how many microseconds have happened.

[00:02:05]
How many fractional milliseconds have happened since the start of the page? When was the start of the page? We get that off performance.timeOrigin. That gives us a high-resolution timestamp, similar to Date.now, but represents when the page first started. So sometimes shortly after, or what essentially represents start when the user first began the navigation.

[00:02:31]
So we can get the kind of the equivalent of Date.now in a high-precision format by just adding the two together, timeOrigin + performance.now.
>> Todd Gardner: Yeah.
>> Speaker 2: Is there any API to modify that to the timestamp that you want? Like if you wanted to peg performance.now to something else?

[00:02:56]
>> Todd Gardner: What's the use case?
>> Speaker 2: So for example, if you have a high-precision clock in a network that you tie to, that's giving you timestamps. That say this thing happened at this exact time, could you set performance.now to that exact?
>> Todd Gardner: You cannot, because performance.now is too high-precision.

[00:03:20]
The time delay to talk to your clock is way higher than the precision of performance.now. The precision of performance.now is measuring the microseconds on the local machine of the browser. So it's like if you wanted to measure whether or not your JavaScript function took 600 microseconds or less.

[00:03:42]
That's what you use performance.now for. If you're trying to synchronize with other systems, the network delay of talking to another system is way higher than the precision that we're talking about. So you're probably better off building your own concept of mysystem.latesttimestamp, which is at a granularity of probably 10 milliseconds or something like that.

[00:04:09]
Whatever you need to account for the delays between talking between systems.
>> Todd Gardner: Right, so the second part of performances. It run getEntries. So this is timing information for the page itself. So how long did the HTML document take? What are all the timings of DNS time, SSL time, TCP handshake time?

[00:04:32]
You can get all that. How long did this image take to run? How long did the JavaScript take to download? How long did that fetch resource take to run? All the performance events, any custom events you build. I'm gonna briefly just kinda take a look at that just so you know what it looks like.

[00:04:49]
So if we pop over to a page. So let's just pop open the dev console here on my local one. And I'm gonna go to the Console and just type performance, which is where the API is, so I can get now, like we talked about. Performance.getEntries returns a great big list of things.

[00:05:09]
It's everything that's in the network panel. If we were capturing the network during the load and a bunch of other stuff. So we can see, for example, the first one is almost always the PerformanceNavigationTiming. Here's how long the initial navigation event took. The TCP connection started at 2.5 milliseconds.

[00:05:30]
It completed at 3.29 milliseconds. Here's when domContentLoaded. Event was originally fired. And when all of the JavaScript callbacks were done responding to domContentLoaded, it was about one millisecond later. So here's all the really low-level details about the request. So, if you're trying to spin up your own kind of detailed logging, this is an API that you would use to interact with that.

[00:05:58]
There's all kinds of other ways you can do it. You can get specific performance entries, drill in on details, that sort of thing.