This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Paint Flashing and the Timeline" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Speaker 1: Okay, so now you've seen frames per second meter. It's all right, but it's not conclusive. How do we actually use the browser tools to sniff out some issues that we might be having? Well, there's one thing that I really like. Chrome's DevTools have this thing called Paint Flashing.
[00:00:21] You know what, I'll just show it to you. So we talked a bit how there's layout, there's painting, and there's compositing, right? Paint flashing, what it does is it shows us where things are being painted, not composited, not laid out. Look, the whole page is green. The whole page is being painted.
[00:00:42] That's not good. That's gotta cost money. So let's see what happens on my site when we do that. We're gonna enable the paint flashing. Notice on my site, only the hands are being flashed because they're using background position. But notice what happens when I use the sidebar. The sidebar flashes green when it moves, and then flashes green again when it stops moving, showing that it's being painted only at the beginning and end of its animation.
[00:01:09] That helps clarify how Chrome is handling those animations. So, it goes paint and then repaint. But notice, also, that more, this thing here, being sprite animation that I use background positioning on it, it stays green throughout its animation. What happens when we go to one of my other pages?
[00:01:31] Oop, see, it turned green once the page stopped. The page is animated using a transform. Technically, we combine this using the slowdown animations to really get a view. That's wrong one, back, go back, abort, abort.
>> Speaker 1: So we could use this to go back home. And notice how, when we slow things down, we can really see when those paints come into play.
[00:02:05]
>> Speaker 1: And then there's the timeline tool. And the timeline tool's kinda heavy hitter here.
>> Speaker 1: If you notice that something is being really janky in certain places, it's a good idea to use this tool if you can. I'm gonna go to Alice in Videoland and use it. And I'm gonna turn off the paint flashing because if you are painting things, that can also change your performance.
[00:02:32] I have seen two very different recordings. So what you're gonna do is you're gonna go to your Timeline tab. If it's not there, use the little arrows, go there. Or actually hang on, there's one thing I have to do. I'm afraid I've left it at 25%. I want to be at 100%.
[00:02:53] We'll come back to that in a moment. So we're gonna go down to
>> Speaker 1: Profiles
>> Speaker 2: Not in the dropdown.
>> Speaker 1: Timeline. Did it move that? Stop trying to be,
>> Speaker 2: When you click on it, it moves it up.
>> Speaker 1: Stop trying to be helpful, Chrome. You're not helping anybody.
[00:03:13] So let's do it like this. And, I'm gonna hit record. And it's got me this little buffer usage down here, which lets me know how long I have for recording.
>> Speaker 1: Or how long I'm recording. I'm gonna scroll. I'm gonna scroll this pretty fast cuz I want us get to one area where it can be problematic.
[00:03:34] And I click the down button. We're going down. And there she's kicking. We're gonna keep scrolling, scroll all the way to the down. And that should have fired something, but it's not. Might possibly be because we're recording it. Unfortunately, when we use tools like this which are really, really invasive, sometimes things don't behave the way we expect them to.
[00:04:01] Or it could be because my code is wrong. Who knows? Now, you can't hear it, but my fans are going, my computer is very hot. And there we go. Now we got something we can work with. So, check it out. We even get, man, but it, we're gonna have to I think break this out into its own window cuz it's that big.
[00:04:28] My God, we've got to look at the whole thing as huge. This will check it out. We can actually see a little screenshot of what's happening at any given time. I went to the Chrome Dev Summit. And I asked for this feature. I'm glad I did. It's a lot easier to see where these bottlenecks are if you can visually see what's happening at that time.
[00:04:46] Up here, you can see that we've got, at the very top of the bar, we can see that we've got these different mountain features in green. Those are measuring the FPS at any given time. And you can see, of course, where the FPS dropped. Here's a big dip.
[00:05:02] Let's see what's happening here. Well, it looks like that was just when the teacup sat there for a little bit. And I don't know why it was like that. But perhaps it was because, if we go down here, we can have a look at all the mounds of listeners that I am calling at the same time.
[00:05:18] Look, we can even, woh, this is Skrollr. Hi, Skrollr, good to see you. Yep.
>> Speaker 1: Does it not go past here? Does it not? Wow, you know what? Wow, this happened. So everybody, this should have shown the teacup dropping here. But Chrome actually trying to fell off the side of the wall on this one and stop taking screenshots, this happens sometimes.
[00:05:52] Chrome Canary might be a little bit more reliable. I'd recommend you try this tool on that one. But Chrome Canary also tends to the change a lot. So I like to use it in regular old Chrome when I'm demoing it. But anyway after around here where you start seeing these changes, we can't see it.
[00:06:10] But this is where events are happening, like where we're clicking on things. And you can find the actual triggers if you make your selection small enough, which I can't seem to get smaller. There we go, and we can actually see what's triggering some of these things.
>> Speaker 1: There we go.
[00:06:35] So we've got jQuery Waypoints fires right here. We can see that there's a little dip. Did this cause the issue? Can't be 100% sure. Might have also been caused by the scroll event. Got a lot happening at the same time. But if you see these big dips, you could come in here and see what's firing right before them.
[00:06:55] And that might be a tell that that event, whether it's a big repaint cuz repaints and such are listed in here too, whether or not that's the sorta thing that's causing it. And we can get rid of the screenshots and get rid of the JavaScript profile, or you can keep it.
[00:07:11] You can get rid of the memory. I actually like the memory area. It's so big. And we have a lot of different things, like timer, function call, to doScroll. You can get really deep. And that is how we can actually find not just the JavaScript but also the CSS things that might be slowing us down.
[00:07:37] Timeline tool is pretty complex. I do recommend you give it a look. But the best performance tip I can possibly, possibly give you is to not animate things that aren't visible. You might think that your browser is smart enough to not try to animate things when they're not onscreen.
[00:07:56] But the truth is, if you have something spinning off the side of the screen, maybe it's a couple screens down or something, you've got a spin or they're gonna around in circles, or maybe you have hundred of them there, the browser's actually paying attention to where those spinners should be when you finally get those spinners into view.
[00:08:13] So, if they're not in view, they shouldn't be animated. You can use libraries like Waypoints.js to keep an eye on what's in view. And you can use this to help trigger animations since they're only playing when they're in view. And we can do that using states which we were playing with earlier.
[00:08:31] States in view, I use the in view class quite a bit for triggering animations. Maybe one day, we'll have an even more above the board way to go about that.