From the course: Vanilla JavaScript: Web Performance Optimization APIs
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Use the Resource Timing API - JavaScript Tutorial
From the course: Vanilla JavaScript: Web Performance Optimization APIs
Use the Resource Timing API
- [Instructor] Do you remember that we saw this diagram with all the available timings for a document load? What happens with each resource, each JavaScript file, CSS file, webfont, image, SVG, or any document that you are loading? We do have an additional API known as Resource Timing API, and in this case, we have a simplified version of the diagram because there is no HTML, there is no parsing, where we can also get the information per resource. So let's see this in action. Now going back to the code, you can load 03_03 > Begin from the Exercise Files and after we have already played with the Navigation Timing API, we are going to add, after that, Resource Timing API. So the Resource Timing API is pretty simple. We also have to get the entries, so let's call this resEntries from resources. And in this case, we are going to getEntriesByType and the type's going to be resource. And here, we need to go through all the entries, so I'm going to use forEach, entry, similar to what we did…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
Measuring our websites4m 18s
-
(Locked)
Add the Navigation Timing API5m 7s
-
(Locked)
Use the Resource Timing API4m 45s
-
(Locked)
Create custom user timing6m 7s
-
(Locked)
Get paint timing4m 31s
-
(Locked)
Detect long tasks3m 44s
-
(Locked)
Detect frame rate drops2m 39s
-
(Locked)
Add server timing information4m 11s
-
-
-
-