Home > Article > Web Front-end > 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
- WBOYOriginal
- 2016-05-16 17:34:541133browse
1. Method of embedding Javascript in HTML
1. Directly place the Javascript code between the tag pairs <script> and </script>
2. Marked by The src attribute specifies an external js file
3. Place it in the event handler, for example:
Click me4. 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 appears. External JS inside the 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.
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.
');
document.write( '');
//]]>
The content of test.js is:
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:
');
//]]>
');
//]]>
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
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:
window.onload = function(){f();f1();f2();....}
Use level 2 DOM event types
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
');
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 articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills