Can javascript be loaded asynchronously?

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

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

Can JavaScript be loaded asynchronously

1. First of all, we must understand what asynchronous and synchronicity are

Synchronous loading: synchronous mode, also known as blocking mode , will prevent the browser's subsequent processing and stop subsequent parsing, thus stopping subsequent file loading (such as images), rendering, and code execution.

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

To put it in layman’s terms: synchronization means that if you ask me to go to dinner, I will go to eat with you if I hear you; if you don’t hear me, you will keep calling me until I tell you that I heard you, and then I will go with you. Have a meal.

Asynchronous means that you call me and then go to eat by yourself. I may leave immediately after getting the news, or I may wait until after get off work to eat. Therefore, if you want me to treat you to a meal, use the synchronous method, and if you want to treat me to a meal, use the asynchronous method, so that you can save money.

2. Why should we use asynchronous

to optimize the loading of script files and improve the page loading speed? It has always been very important to improve the page loading speed. Because each browser has different mechanisms for parsing script files, and loading scripts will block the loading of other resources and files, asynchronous loading is more commonly used.

3. How to use asynchronous

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

async, execute after loading, only external scripts can be loaded, js cannot be written in the script tag.

//1.async  只能加载外部脚本
<script src="js/index.js" async="async"></script>

defer is loaded asynchronously, but it will not be loaded until the dom document is fully parsed. implement. Only IE can use internal and external js.

//2.defer  只能IE使用，文档解析完成以后才会去执行
<script src="js/index.js" defer="defer"></script>

Load on demand, consider browser compatibility

//3.按需求加载，考虑浏览器兼容
    function loadScript(url,callback){
            var script = document.createElement("script");
            
            if(script.readyState){  IE浏览器兼容
                script.onreadystatechange = function(){
                    if(script.readyState == "complete" || script.readState == "loaded"){
                        callback()
                    }
                }
            }else{         大部分浏览器兼容
                script.onload = function(){  
                    callback()
                }
            }
            script.src = url;
            document.head.appendChild(script)
        }
        loadScript("08.js",function(){
            test()
        })
//外部js
function test(){
    console.log("hello world")
}

js loading timeline

1. Create a Document object and start parsing web page. Add Element objects and Text nodes to the document after parsing HTML elements and their text content. At this stage document.readyState = ‘loading’.

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

3. When the script external js is encountered, and async and defer are not set, the browser loads and blocks, waits for the js to be loaded and executes the script, and then continues to parse the document.

4. When encountering script external js and setting async and defer, the browser creates a thread to load and continues to parse the document. For scripts with async attributes, they are executed immediately after the script is loaded. (It is forbidden to use document.write() asynchronously)

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

6. When the document parsing is completed, document.readyState = ‘interactive’.

7. After the document parsing is completed, all scripts set with defer will be executed in order. (Note that it is different from async, but the use of document.write() is also prohibited);

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

9. When all async scripts are loaded and executed, and img, etc. are loaded, document.readyState = ‘complete’, the window object triggers the load event.

10. From now on, user input, network events, etc. will be processed in an asynchronous response manner.

Related recommendations: javascript learning tutorial

The above is the detailed content of Can javascript be loaded asynchronously?. For more information, please follow other related articles on the PHP Chinese website!