JavaScript Performance

JavaScript Performance Layouts and Reflows Exercise

Learning Paths:
Topics:
Steve Kinney
Steve Kinney
Temporal
Check out a free preview of the full JavaScript Performance course:
The "Layouts and Reflows Exercise" Lesson is part of the full, JavaScript Performance course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, students examine how changing elements in a web page create additional render time within a browser.

Get Unlimited Access Now

Transcript from the "Layouts and Reflows Exercise" Lesson

[00:00:00]
>> Steve: We're gonna play with this for a little bit. We're gonna take a look at this example.
>> Steve: We'll go to the page, very cool. This is a really silly example that takes a bunch of divs, and you can hit this double-sized button, and you know what's gonna happen?

[00:00:20] They're all going to double in size. Whoa, crazy, right? I'm a data visualist, all right, [LAUGH]. It's very cool, I'm doing data vis now. And they all double in size. What I want you to do is fire up your Chrome Tools, and go ahead and hit this Performance button here, the Performance tab up here.

[00:00:43] And see this little record button? You're gonna hit that, and it's gonna record and you're gonna double the size of the bars. One time, two times, three times. And then, we're gonna look at what we got from the tools right after that. So let me give you about three minutes to do that and then we'll kind of look at it together, and you kind of explore it first.