Oh The Scripts We'll Load - A Performance Talk by Tim Kadlec
URL: https://www.youtube.com/watch?v=tr6aHw8I32M&list=PL58Wk5g77lF94tg-F3y5zRyDeLVhTDnTg&index=2
This session has started with the question "how to load a script." And I thought I obviously know how to load it, but I realized that I just knew how to write a script tag. In this session, Tim Kadlek discusses the priority of loading files and the parsing of networks according to their priority. Since I've never thought about the priority of loading files, I just thought I'd be learned how to load them which I thought I already knew a little bit. However, this session's lecture was a lecture that gave a detailed idea of how and in what order the files were loaded. And it was very informative, I feel like I'd like to know more about this in detail. And here's what I learned from it.
Priorty - dev tool: Network
I've never thought about the priority of loading files. I simply thought it takes a lot of files to configure an application. Long story short, to process and load pages efficiently, the browsers need to be able to determine which of the following is the most important, and the way to do this is to give these resources some priority. The higher the priority, the higher the resource is placed in the load queue. JavaScript is usually so high in the pecking order, it’s because JavaScript is capable of doing things like document.write().
Parsing and Blocking the parser
When the priority decided by browsers, the browser parses or blocks some files based on the priority they gave. When they come across a script by default they will pause parsing the HTML until that script has been downloaded and executed just in case it’s going to do something. So if the javascript file is located in the head tag. it will be parsed from the first line to the line before the script tag, and wait until the javascript has been downloaded. So users have to see a white blank page for a second until everything loaded. (because this is located before the body tag which contains contents)This, sometimes, would be quite uncomfortable from the perspective of user experience.
Async, differ attributes, and preload
Therefore, there are some attributes that can adjust the priority of the script file such as Async, differ attribute, and Preload. Using the Async attribute gives us a low priority in chrome(browser). so files you made all lined up they’re all being requested around the same time. And using differ, it arranges everything in parallel and does not run any scripts until you have completed parsing HTML and creating document object models. Finally, unlike the previous attributes, the preload is in the link property. It can be used when you want to both network priority and parser benefits. Preload eventually changes the priority back to high, allowing the network to be loaded as soon as the file arrives.
So how can I use these attributes in what circumstance?
Through this session, I learned that scripts can be loaded in various ways. Especially I learned that using certain elements determines the priority of script files. Priority was one of a bunch of things that I haven't noticed at all before. So some question still remains as to what attributes should be used in what circumstances. Tim Kadlec said we have to consider user experience, what I'm thinking is maybe I should study some aspects about user experience and the about loading scripts as well.
Top comments (0)