Home > Developer > JavaScript
It is well known that most browsers use a single process to handle multiple tasks, such as UI updates and JavaScript runs, and only one task can be executed at a time, so how long it takes for JavaScript to run means how long it will take for the user to wait for the browser to respond.
From a cognitive point of view, the parser parses an interface from top to bottom, which means how many <script> tags appear on the interface (whether inline or external), page download and parsing must stop waiting for the script to download and run to completion (note that this includes running), In this process, page parsing and user interaction are completely blocked.
The first rule of javascript: Put the script at the bottom.
As we all know, the browser does not render any part of the page until it encounters the <body> tag, and if we put the <script> tag all before the <body> tag, let's think about whether the interface is blank. The browser will not render the page until all JS is downloaded and executed, which is why all <script> tags are placed as close to the <body> as possible to the bottom of the </body>.
The second law of javascript: Package scripts in groups.
By reducing the number of references to external script files, it is believed that some large sites will need to request JavaScript files more than once to consolidate this file into a single file, because it requires only a <script> tag to reduce the performance penalty.
The book describes the run a <script> tag to load two JS files (but I did not test success, if there is know how to use, you can tell me, thank you!) ）
Here to illustrate
The bottom line is that when loading JS will block the page rendering, how to let the script does not block the page rendering, the only way is to start after the window.onload has been downloaded JS
JavaScript Third Law: Use non-blocking way to download JS.
The first method: Adds a defer property to script, and the script specified by the Defer property indicates that the scripts do not intend to modify the DOM, so the code can be executed later. But defer is not supported by all browsers . When the script file specified by defer is downloaded, it does not block other browser processing, so in fact defer the specified script file can be downloaded in parallel with other resources on the page. Any script file that is designated as defer must be executed before the DOM is loaded, that is, before the OnLoad event.
The second way: The dynamic creation of the script is to create a script by JS to specify its src to load the scripts file, this method makes the script download and run does not block other page handlers, so you can even put this dynamic script file in the head tag does not matter.
The dynamically created script JS looks like this:
The dynamic script created above will automatically execute the code in it if it is specified as SRC and append to document, so how do I get it to load and execute the callback function or if I want to load multiple JS files to qualify them in order?
Look at the code! Haha (because the dynamically loaded JS, the browser does not guarantee the order of loading)
Another way to get a script file in a non-blocking way is to use XHR (XMLHttpRequest script injection)
The main advantage of this approach is that you can download script files that are not executed immediately, but the downside is that the JS file you want to load dynamically must be in the same domain as the currently running page .
Here are a few dynamically loaded script libraries
lazyload-Multiple script files can be downloaded and guaranteed to be executed sequentially on all browsers. (although multiple files can be loaded dynamically, it is recommended to reduce the number of files as much as possible, as each download is still a separate HTTP request)
Labs.js Its script method is used to load the JS file, the Wait method is used to wait for the file to download and run after the execution of the callback function, through the Wait method allows you which files should wait for other files, specific usage can refer to the Labs use method
This is what I see in the first chapter of "High-performance JavaScript," which I think is important, and it's really nice to see this book in some highly recommended places. (One of the questions in the article hope that the great God will be able to mention a bit of me, here thank you Oh! ）
Interested can go to know lab.js and lazyload these two very useful. Ha ha! Or you can discuss it with me!
Load and run---High-performance JavaScript reading notes (1)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
