If you use a picture to interpret the characteristics of these types of script loading, it should be like this:
Combined with the pictures, we can summarize the characteristics of the three methods as follows:
<script>: When encountering a script tag during HTML parsing, the browser interrupts HTML parsing, then downloads the script file, executes the script immediately after completion, and resumes HTML parsing after the execution is complete<script async>: When encountered during parsing HTML script tags, not interrupted HTML parsing, while parallel download the script file, the download is complete interrupt HTML parsing and execute script, and then continue to complete the implementation of HTML parsing (The execution order of the script is not necessarily in the order of appearance of the script tags, but depends on the order in which the script download is completed)<script defer>: When encountered during parsing HTML script tags, not interrupted HTML parsing, while parallel download script files, HTML parsing is complete until then execute script (script execution order of the script tag in order of appearance consistent )
We can verify the above conclusions through a small project.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script>
console.time('timer');
console.timeLog('timer', '--- Start parsing HTML');
document.addEventListener('DOMContentLoaded', function () {
console.timeLog('timer', '--- Document loaded');
});
</script>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam
obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima.
</p>
<!-- 此处省略500行重复元素 -->
<script>console.timeLog('timer', '--- Start loading 1.js')</script>
<script src='./1.js'></script>
<script>console.timeLog('timer', '--- Start loading 2.js')</script>
<script src='./2.js'></script>
<script>console.timeLog('timer', '--- Start loading 3.js')</script>
<script src='./3.js'></script>
<!-- 此处省略1500行重复元素 -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam
obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima.
</p>
<script>
console.timeLog('timer', '--- End parsing HTML')
</script>
</body>
</html>1.js:
const text1 = `
// 超长文本
`
text1.split(' ');
console.timeLog('timer', '--- 1.js excuted');2.js:
const text2 = `
// 超长文本
`
text2.split(' ');
console.timeLog('timer', '--- 2.js excuted');1.js:
const text3 = `
// 超长文本
`
text3.split(' ');
console.timeLog('timer', '--- 3.js excuted');We use normal, async and defer methods to load 1.js, 2.js, and 3.js respectively, and observe the printed results of the console:
Normal:
Conclusion: When the script appears, will interrupt the HTML loading, and the script will be loaded and executed sequentially, and the HTML will be parsed after all scripts are executed.
Async:
Conclusion: HTML parsing and script download synchronously with , script execution will interrupt HTML parsing; script execution order and tag appearance order may not be the same; script may be executed document loaded.
Defer:
Conclusion: HTML parsing and script download will be performed synchronously with ; script will be HTML parsing is completed, 1612d0090ed88c and document is loaded, and the execution order is the same as the tag appearance order.
From the above experiment, it can be seen that if you use the common method, it is usually recommended to put the script <body> the end of 0612d0090ed8b0, so as not to block the HTML parsing and affect the opening speed of the webpage. The the defer relative the async advantage, does not block the HTML parsing and script execution order can be predicted, some need to pre-download execution script can be used the defer way <head> reference.
The code address of this article: https://github.com/MudOnTire/script-normal-async-defer-loading
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。