Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > Introduction to the execution order of Javascript code when the page is loaded_Basic knowledge

Introduction to the execution order of Javascript code when the page is loaded_Basic knowledge

WBOY

Release： 2016-05-16 17:34:54

Original

1147 people have browsed it

1. Method of embedding Javascript in HTML
1. Directly place the Javascript code between the tag pairs <script> and </script>
2. Marked by

5.document.write() will write the output to the location of the script document. After the browser parses the content of the document where documemt.write() is located, it will continue to parse the content output by document.write(), and then Continue parsing the HTML document.

Copy code The code is as follows:

');
 document.write( '');
 //]]>
 

The content of test.js is:

Copy code The code is as follows:

var tmpStr = 1;
alert(tmpStr);

•The order of the pop-up values in Firefox and Opera is: 1, 2, I am 1, 3
•The order of the pop-up values in IE is: 2, 1, 3, and the browser reports an error: tmpStr is not available The reason for defining
may be that IE did not wait for the Javascript code in SRC to be loaded before executing the next line during document.write, so 2 popped up first and executed to document.write('document.write(" When I called tmpStr, "tmpStr)'), tmpStr was not defined and an error was reported.

To solve this problem, you can use the principle of HTML parsing to parse one HTML tag and then execute the next one, and split the code to achieve this:

Copy code The code is as follows:

');
 //]]>
 ');
 //]]>
 

This way the value is output under IE and other browsers The order is always the same: 1, 2, I am 1, 3.

3. How to change the execution order of Javascript on the page
1. Use onload

to copy the code The code is as follows:

The output value sequence is 2, 1.

It should be noted that if there are multiple winodws.onload, only the most effective one will take effect. The solution is:

Copy code The code is as follows:

window.onload = function(){f();f1();f2();....}

Use level 2 DOM event types

Copy code The code is as follows:

if(document.addEventListener ){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}else{
window .attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}

2. defer can be used in IE , the function of defer is to load the code and not execute it immediately. It will be executed after the document is loaded. It is somewhat similar to window.onload, but it does not have the limitations of window.onload. It can be reused, but it is only valid in IE, so The above example can be modified to

Copy code The code is as follows:

');
document.write('');
//]]>

This way IE will not An error was reported, and the order of the output values became: 1, 3, 2, I am 1

When the HTML parser encounters a script, it must normally terminate parsing the document and wait for the script to execute. To solve this problem, the HTML4 standard defines defer. Use defer to prompt the browser to continue parsing the HTML document and delay execution of the script. This delay is very useful when a script is loaded from an external file, so that the browser does not have to wait for all external files to be loaded before continuing execution, which can effectively improve performance. IE is currently the only browser that supports the defer attribute, but IE does not implement the defer attribute correctly because deferred scripts are always delayed until the end of the document, rather than only delayed to the next non-delayed script. This means that the execution order of delayed scripts in IE is quite confusing, and any functions and variables that are not required by subsequent non-delayed scripts cannot be defined. The execution time of all defer scripts in IE should be after the HTML document tree is established and before window.onload.

3. Use Ajax.
Because xmlhttpRequest can determine the loading status of external documents, it can change the loading order of the code

Related labels：

javascript code Execution order

source：php.cn

Previous article：JavaScript implements multiple method instances of classes_javascript skills Next article：Examples of efficient methods for converting Json strings into JS objects_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn