如果用一张图片诠释这几种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小游戏开发