Asynchronous loading
First learn about synchronous loading:
We usually use this form of synchronous loading most often:
<script src="http://demo/script.js"></script>
Synchronous mode, also known as blocking mode, blocks subsequent processing by the browser, stops subsequent parsing, and therefore stops subsequent file loading (such as images), rendering, and code execution.
The reason why js needs to be executed synchronously is because js may have behaviors such as outputting document content, modifying dom, and redirecting, so it is safe to execute synchronously by default.
The general recommendation used to be to put <script> at the end of the page before </body> to minimize this blocking behavior and let the page show first.
Three options for asynchronous loading
1. defer Asynchronous loading, it will not be executed until all the DOM documents are parsed.
Compatible with IE9 and below, other browsers with lower versions are not compatible, it is recommended to use.
How to use: external js
<script type="text/javascript" src="demo.js" defer="defer"></script>
Internal js:
<script type="text/javascript" defer="defer">var i = 0;</script>
Specifically test yourself, some methods are useless! ! !
2. aysnc is loaded asynchronously and executed after loading. aysnc can only load external scripts and cannot write Js internally.
Not compatible with IE 9 and below
<script type="text/javascript" src="demo.js" aysnc = "aysnc"></script>
3. Insert into the DOM.
<script type="text/javascript" >
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'ku.js';//After executing this sentence, start downloading the js file
document.head.appendChild(script)
</script>
If you want to use the parameters in that script, you need to wait for it to download.
use
script.onload = function () {
//The event written here will be executed after it is downloaded,
//Do not execute low version IE
}
timeline
1. First create a Document object and start parsing the web page. document.readyState = "loading" at this stage.
2. When encountering the link external css, create a thread to load, and continue to parse the document.
3. When encountering script external js, and not setting async, defer, browser loading, and blocking, wait for js loading to complete and execute the script, and then continue to parse the document.
4. When encountering external js, and setting async, defer, the browser creates thread loading, and continues to parse the document.
For scripts with async attribute, they are executed as soon as the script is loaded. (Asynchronous loading prohibits the use of document.write)
5. When encountering img, etc., first parse the dom structure normally, then the browser asynchronously loads the src, and continues to parse the document.
6. When the document is parsed, document.readyState = 'interactive'.
7. 文档解析完成后，所有设置的defer的脚本会按照顺序执行。（）
8. 文档解析完成后，document对象触发DOMContentLoaded事件（没卵用）
9.当所有的脚本加载完成并执行后，img等加载完成后，document.readyState = "complete",window对象触发load 事件。
10.从此，以异步响应方式处理用户输入，网络事件等。页面按照你理解的顺序执行。
理解不了？背也要背下来！