Shulou(Shulou.com)06/01 Report--

This article mainly explains "whether javascript can be loaded asynchronously". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "whether javascript can be loaded asynchronously".

JavaScript can be loaded asynchronously. Asynchronous loading means that while downloading and executing JavaScript, the browser will continue to process subsequent pages, which can optimize the loading of script files and improve the loading speed of pages; because it involves different mechanisms for parsing script files in each browser, asynchronous loading is more often used.

The operating environment of this tutorial: windows10 system, javascript1.8.5 version, Dell G3 computer.

Can javascript be loaded asynchronously?

1. First of all, we need to understand what async and synchronization are.

Synchronous loading: synchronous mode, also known as blocking mode, prevents subsequent processing by the browser and stops subsequent parsing, thus stopping subsequent file loading (such as images), rendering, and code execution.

Asynchronous loading: asynchronous loading is also called non-blocking, and the browser will continue to process subsequent pages while downloading and executing js.

In popular terms, synchronization means that you ask me to go to dinner, and when I hear it, I go to dinner with you; if you don't hear it, you keep screaming until I tell you you heard it.

Asynchronism means that you call me and then go to dinner by yourself. I may leave as soon as I get the news, or I may not go to dinner until after work. So, if you want me to treat you to dinner, use synchronous method, and if you want to invite me to dinner, use asynchronous method, so you can save money.

two。 Why use async?

Optimizing the loading of script files to improve the loading speed of pages has always been a very important way to improve the loading speed of pages. Because it involves different mechanisms for parsing script files in different browsers, and loading scripts will block the loading of other resources and files, asynchronous loading is more often used.

3. How to use async

The editor believes that there are three ways to use asynchronous loading.

Async, loaded and executed, can only load external scripts, can not write js in the script tag.

/ / 1.async can only load external scripts

The defer loads asynchronously, but it won't be executed until the dom document has been parsed. Only IE can be used with internal and external js.

/ / 2.defer can only be used by IE. It will not be executed until the parsing of the document is completed.

Load on demand, considering browser compatibility

/ / 3. Load on demand, considering browser compatibility with function loadScript (url,callback) {var script = document.createElement ("script") If (script.readyState) {IE browser is compatible with script.onreadystatechange = function () {if (script.readyState = = "complete" | | script.readState = = "loaded") {callback ()} else { Most browsers are compatible with script.onload = function () {callback ()}} script.src = url Document.head.appendChild (script)} loadScript ("08.js", function () {test ()}) / / external jsfunction test () {console.log ("hello world")}

Js load Timeline

1. Create a Document object and start parsing the web page. After parsing HTML elements and their text content, add Element objects and Text nodes to the document. This stage document.readyState = 'loading'.

2. When you encounter a link external css, create a thread to load and continue to parse the document.

3, encounter script external js, and do not set async, defer, browser load, and block, wait for js to load and execute the script, and then continue to parse the document.

4, encounter script external js, and set async, defer, browser creation thread load, and continue to parse the document. For scripts with the async attribute, the script is executed as soon as the script is loaded. (use of [xss_clean] () is prohibited asynchronously)

5. When you encounter img, first parse the dom structure normally, then the browser loads src asynchronously, and continues to parse the document.

6. When the document parsing is complete, document.readyState = 'interactive'.

7. After the document parsing is completed, all scripts with defer will be executed in order. (note that it is different from async, but the use of [xss_clean] () is also prohibited)

8. The document object triggers the DOMContentLoaded event, which also marks the transformation of program execution from the synchronous script execution phase to the event-driven phase.

9. When all async scripts are loaded and executed, and img and so on are loaded, the document.readyState = 'complete',window object triggers the load event.

10. From then on, the user input, network events, etc., are handled in an asynchronous response way.

Thank you for your reading, the above is the content of "whether javascript can be loaded asynchronously". After the study of this article, I believe you have a deeper understanding of whether javascript can be loaded asynchronously, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.