如果用一張圖檔诠釋這幾種script加載的特點，應該是這樣的：
結合圖檔我們可以将三種方式的特點總結如下：
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'); 3.js：
const text3 = `
// 超長文本
`
text3.split(' ');
console.timeLog('timer', '--- 3.js excuted'); 我們分别使用普通、async和defer的方式加載1.js、2.js、3.js，觀察控制台的列印結果：
普通結論：script出現會中斷HTML加載，且script會順序的加載、執行，所有script執行完成後再解析HTML。
Async 結論：HTML解析和script下載下傳同步進行，script執行會中斷HTML解析；script執行順序和tag出現順序不一定相同；script可能會在document loaded之後執行。
Defer 結論：HTML解析和script下載下傳同步進行；script會在HTML解析完成後和document loaded之前執行，且執行順序和tag出現順序一緻。
由以上實驗可知：如果使用普通方式時通常建議将script放到
的最後，以免阻塞HTML解析影響網頁打開速度。而defer相對于async更具優勢，不會阻塞HTML解析且script的執行順序可以預測，有一些需要預先下載下傳執行的script可以使用defer的方式在中引用。
如果你想開發小程式或者了解更多小程式的内容，可以通過第三方專業開發平台，來幫助你實作開發需求：
廈門在乎科技-專注
廈門小程式開發公司、app開發、網站開發、H5小遊戲開發
![Android中Webview使用經驗總結[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)