Mastering Chrome Developer Tools Challenge 3: The Timeline

Topics:

Dev Tools

This course has been updated! We now recommend you take the Introduction to Dev Tools, v3 course.

Check out a free preview of the full Mastering Chrome Developer Tools course:

The "Challenge 3: The Timeline" Lesson is part of the full, Mastering Chrome Developer Tools course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, you will spend some time profiling a webpage. You can run a page audit and record the page loading with the Timeline panel. Look through the profiling information to locate any places where the page could be optimized.

Get Unlimited Access Now

Transcript from the "Challenge 3: The Timeline" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Jon: This one's a little bit more open ended as far as the challenges go. I have this profiling page here and there's a lot of stuff wrong with it. It's super, super slow but I thought it would be a good opportunity for everybody to take 10 or 15, do the audit on it, see what it comes back with do a timeline.

[00:00:23] So go to timeline and hit refresh and record and like just kind of start peeking around and seeing like what kind of stuff is a problem like is too much painting, is it too much JavaScript. Can you maybe click through and figure out you what painting or what JavaScript it is?

[00:00:37] Just kind of familiarizing yourself with the timeline and the audit panel. Yeah.
>> Speaker 2: One quick question from John online. Can you explain what each level means is the top level the main processing thread?
>> Jon: Okay, so as far as like this stuff goes this is all within the main thread, this is just a call stack.

[00:00:58] It's another way of visualizing the call stack. So like in the sources were doing the debugging it was just flat and it went all the way down. This is like that, except the width of each method is determined by actually how long it took. So kind of imagine instead of that nice pretty table you've got these like shapes.

[00:01:14] And then however, if you minimize the main thread you can actually see stuff that was like tossed off of the GPU and a bunch other stuff we're going to cover that a little bit later but basically like I don't know if you've ever heard like if you do a CSS animation the GPU can help accelerate it.

[00:01:31] Where as like JavaScript animations they can stuff like that so there's like a work that can be tossed off to the GPU when available. So yes you can see kind of what works going on on the GPU side as well. But yeah this is all a single threaded so this is the one thread it's just a call stack going down.

[00:01:48] So again like tall functions are not what you want to worry about.