Detailed explanation of Javascript loading and execution_Basic knowledge

First of all, I want to talk about the loading and execution of Javascript. Generally speaking, browsers have two major characteristics for running Javascript: 1) it is executed immediately after loading, 2) when executed, it will block the subsequent content of the page (including the rendering of the page and the downloading of other resources). Therefore, if multiple js files are introduced, then for the browser, these js files are loaded serially and executed in sequence.

Because javascript may operate the DOM tree of the HTML document, browsers generally do not download js files in parallel with downloading css files in parallel, because this is caused by the particularity of js files. Therefore, if your javascript wants to operate the subsequent DOM elements, basically the browser will report an error saying that the object cannot be found. Because when Javascript is executed, the subsequent HTML is blocked, and there is no subsequent DOM node in the DOM tree. So the program reported an error.

The traditional way

So, when you write in code write the following code:

Copy code The code is as follows:

What do you think is the order of alerts? You can try it in different browsers. Here is the test page you want to close: Example 2.

script’s defer and async attributes

IE has supported defer tags since IE6, such as:

Copy code The code is as follows:

For IE, this tag will cause IE to download the js file in parallel and hold its execution until the entire DOM is loaded (DOMContentLoaded). Multiple defer <script> will also be executed in the order in which they appear. to run. The most important thing is that after <script> is added to defer, it will not block subsequent DOM rendering. But because this defer is only for IE, it is generally used less. </p> <p>Our standard HTML5 also adds an attribute for asynchronous loading of javascript: async. No matter what value you assign to it, as long as it appears, it will start loading js files asynchronously. However, asynchronous loading of async has a serious problem, that is, it faithfully implements the military rule of "execute immediately after loading". Therefore, although it does not block the rendering of the page, you cannot control it. The order and timing of his execution. You can take a look at this example to get a feel for it. </p> <p>Browsers that support async tags are: Firefox 3.6, Chrome 8.0, Safari 5.0, IE 10, Opera does not support it yet (from here), so this method is not very good. Because not all browsers can do it. </p> <p>Dynamic creation of DOM</p> <p>This method is probably the most commonly used. </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="53194" class="copybut" id="copybut53194" onclick="doCopy('code53194')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code53194"> <br> function loadjs(script_filename) {<br> var script = document.createElement('script');<br> ​ script.setAttribute('type', 'text/javascript');<br> ​ script.setAttribute('src', script_filename);<br> ​ script.setAttribute('id', 'coolshell_script_id');<br> <br> ​ script_id = document.getElementById('coolshell_script_id');<br> If(script_id){<br>            document.getElementsByTagName('head')[0].removeChild(script_id);<br> }<br> Document.getElementsByTagName('head')[0].appendChild(script);<br> }<br> <br> var script = 'http://coolshell.cn/asyncjs/alert.js';<br> loadjs(script);<br> </div> <p>This method has almost become the standard way to load js files asynchronously. For a demonstration of this method, please see: Example 3. This method has also been exploited by JSONP, that is, I can specify a background script (such as PHP) for the src of the script, and this PHP returns a javascript function whose parameter is a json string, and returns Call our predefined javascript function. You can take a look at this example: t.js (This example is a small example of asynchronous ajax call that I solicited on Weibo before) </p> <p>Load js asynchronously on demand</p> <p>The above example of DOM method solves the problem of asynchronous loading of Javascript, but it does not solve the problem of us wanting it to run at the timing we specify. Therefore, we only need to tie the above DOM method to a certain event. </p> <p>For example: </p> <p>Tie to window.load event - Example 4</p> <p>You must compare the execution differences between Example 4 and Example 3. I specifically used a code highlighting javascript in both examples to see the execution and execution of the code highlighting script. You will know the difference based on the execution of my alert.js) </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="34632" class="copybut" id="copybut34632" onclick="doCopy('code34632')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code34632"> <br> window.load = loadjs("<a href="http://coolshell.cn/asyncjs/alert.js">http://coolshell.cn/asyncjs/alert.js</a>")<br> </div> <p>Tie to a specific event - Example 5</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="16878" class="copybut" id="copybut16878" onclick="doCopy('code16878')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code16878"> <br> <p style="cursor: pointer" onclick="LoadJS()">Click to load alert.js </p><br> </div> <p>This example is very simple. When you click on a DOM element, our alert.js will actually be loaded. </p> <p>More</p> <p>However, binding to a specific event seems to be a bit too much, because the js will only be actually downloaded when clicked, which would be too slow. Okay, here we come to our ultimate question - we want to asynchronously download the js file to the user's local area, but not execute it, only execute it when we want to execute it. </p> <p>It would be great if we had something like this: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="43581" class="copybut" id="copybut43581" onclick="doCopy('code43581')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code43581"> <br> var script = document.createElement("script");<br> script.noexecute = true;<br> script.src = "alert.js";<br> document.body.appendChild(스크립트);<br> <br> //나중에 할 수 있습니다<br> script.execute();<br> </div> <p>안타깝게도 이것은 단지 아름다운 꿈일 뿐입니다. 오늘날 우리의 Javascript는 여전히 상대적으로 원시적이며 이 "JS 꿈"은 아직 실현되지 않았습니다. </p> <p>따라서 우리 프로그래머는 해킹 방법만을 사용하여 이를 수행할 수 있습니다. </p> <p>일부 프로그래머는 비표준 스크립트 유형을 사용하여 자바스크립트를 캐시합니다. 예: </p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="63471" class="copybut" id="copybut63471" onclick="doCopy('code63471')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code63471"> <br> <스크립트 유형=cache/script src="./alert.js"></script>