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

1. Method of embedding Javascript in HTML
1. Directly place the Javascript code between the tag pairs <script> and </script>
2. Marked by <script></script> The src attribute specifies an external js file
3. Place it in the event handler, for example:

Click me

> ;
4. As the main body of the URL, this URL uses the special Javascript: protocol, such as: Click me< ;/a>
5. Use the document.write() method of javascript itself to write new javascript code
6. Use Ajax to asynchronously obtain the javascript code, and then execute it

The Javascript written in the 3rd and 4th methods needs to be triggered in order to be executed, so unless it is specially set, it will not be executed when the page is loaded.

2. The order in which Javascript is executed on the page
1. The Javascript code on the page is part of the HTML document, so the order in which Javascript is executed when the page is loaded is the order in which the introduction tag <script></script> appears. External JS inside the <script></script> tag or introduced through src are executed in the order in which their statements appear, and the execution process is part of the document loading.
2. The global variables and functions defined by each script can be called by scripts executed later.
3. The call to a variable must have been declared previously, otherwise the obtained variable value will be undefined.

Copy code The code is as follows:

4. In the same script, the function definition can appear after the function call, but if it is in two pieces of code and the function call is in the first piece of code, it will Report function undefined error.

Copy code The code is as follows:

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