如果用一张图片诠释这几种script加载的特点，应该是这样的：
联合图片咱们能够将三种形式的特点总结如下：
<script>: 当HTML解析过程中遇到script标签时，浏览器中断HTML解析，随即下载script文件，实现后立刻执行script，执行实现后再持续HTML解析<script async>: 当HTML解析过程中遇到script标签时，不会中断HTML解析，同时并行下载script文件，下载实现后中断HTML解析并执行script，执行实现后再持续HTML解析（script的执行程序不肯定依照script标签的呈现程序，而是取决于script下载实现的程序）<script defer>: 当HTML解析过程中遇到script标签时，不会中断HTML解析，同时并行下载script文件，直到HTML解析实现再执行script（script的执行程序与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');1.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放到<body>的最初，免得阻塞HTML解析影响网页关上速度。而defer绝对于async更具劣势，不会阻塞HTML解析且script的执行程序能够预测，有一些须要事后下载执行的script能够应用defer的形式在<head>中援用。
本文code地址：https://github.com/MudOnTire/...