Transcript from the "Resource Loading, Frames, & Interactivity" Lesson
[00:01:23] In the network layer, Let me refresh so we can get the full waterfall. Let me get off of the screenshot so we have more space, like so. We could see at some point, I'm not sure if it's easy to see here, but maybe here, that logo.png file didn't start the download process, Before the script finishes downloading.
[00:02:04] Can you see that? So that's typically a case of, A problem like this. For example, if I open my index.html and I have more scripts like so, I can even add the hack like this, you will see how performance gets worse and worse, because it will wait for this one.
[00:02:30] It's not going to download more files in parallel, it will go in sequence, one by one. That was ten years ago, there was best practice in web development that was saying, move all your script to the end. Have you seen that? That is both because let's defer that to the end so we don't block the rendering, okay?
[00:03:22] Even CSS that is not going to be applied right now, or even if the CSS it has a media query and the media query is currently false, it's going to download everything. It's going to parse the CSS, and only at that moment it will start rendering things on the screen.
[00:03:41] And we know that most of the core web has to do with rendering, with seeing things on the screen. Well, and the last thing is frames and interactivity. That is just showing you this particular slide diagram that has to do with animation. So after the page was loaded, the browser has an animation loop, even if nothing moves on the page, there is an animation loop.
[00:05:20] So that means the animation will be bad, you won't get 60 frames per seconds, and you get into performance penalties, okay? So this is just, again, just how the browser works.