瀏覽器內(nèi)核可以分成兩部分：渲染引擎（Layout Engine 或者 Rendering Engine）和 JS 引擎。早期渲染引擎和 JS 引擎并沒有十分明確的區(qū)分旬薯，但隨著 JS 引擎越來越獨(dú)立晰骑，內(nèi)核也成了渲染引擎的代稱（下文我們將沿用這種叫法）。渲染引擎又包括了 HTML 解釋器硕舆、CSS 解釋器骤公、布局、網(wǎng)絡(luò)阶捆、存儲、圖形倍奢、音視頻、圖片解碼器等等零部件卒煞。
JS 引擎是獨(dú)立于渲染引擎存在的叼架。我們的 JS 代碼在文檔的何處插入衣撬，就在何處執(zhí)行扮饶。當(dāng) HTML 解析器遇到一個 script 標(biāo)簽時，它會暫停渲染過程贴届，將控制權(quán)交給 JS 引擎。JS 引擎對內(nèi)聯(lián)的 JS 代碼會直接執(zhí)行占键，對外部 JS 文件還要先獲取到腳本元潘、再進(jìn)行執(zhí)行。等 JS 引擎運(yùn)行完畢翩概，瀏覽器又會把控制權(quán)還給渲染引擎，繼續(xù) CSSOM 和 DOM 的構(gòu)建牍鞠。 因此與其說是 JS 把 CSS 和 HTML 阻塞了评姨，不如說是 JS 引擎搶走了渲染引擎的控制權(quán)。
渲染引擎碰到j(luò)s就交出大權(quán)是因為他不知道js的內(nèi)容會不會對接下來的渲染有沒有影響吐句。但是我們引入js的時候是知道有沒有影響的，可以根據(jù)具體情況用三種方式之一加載js攀芯。
三種加載方式
1.正常模式
<script src="script.js"></script>
沒有 defer 或 async，瀏覽器會立即加載并執(zhí)行指定的腳本侣诺，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前择葡，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行阻星。
2.async模式
<script async src="script.js"></script>
有 async，script.js會被異步加載妥箕，即加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步）。當(dāng) script.js加載完整立即執(zhí)行script.js坎吻。執(zhí)行script.js時宇葱，html解析暫停。
從加載完成立即執(zhí)行來看黍瞧，async模式 執(zhí)行順序與寫的順序無關(guān)，不保證執(zhí)行順序您机。
3.defer 模式
<script defer src="index.js"></script>
有 defer年局，script.js會被異步加載，即加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載并行進(jìn)行（異步）仲闽。這一點(diǎn)與async模式一致兴喂。
不同的是當(dāng) script.js加載完成并不會立即執(zhí)行，而是在所有元素解析完成之后衣迷，DOMContentLoaded 事件觸發(fā)之前完成酱酬。因此它會按照寫的順序執(zhí)行。
// html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>defer-async</title>
<script type="text/javascript" async src='./async1.js'></script>
<script type="text/javascript" async src='./async2.js'></script>
<script type="text/javascript" src='./normal.js'></script>
</head>
<body>
<div id="warp">warp</div>
</body>
</html>
然后 async1.js 文件巨大(到底有多大汗菜，我是把jquery的壓縮版拷進(jìn)來了)挑社，然后最后加上 console.log('async1');
文件async2.js 和 normal.js 中分別是 console.log('async2'); 和 console.log('normal');
打開網(wǎng)頁控制臺顯示如下: async2 先加載完成就先執(zhí)行了。
<script type="text/javascript" defer src='./defer1.js'></script>
<script type="text/javascript" defer src='./defer2.js'></script>
<script type="text/javascript" src='./normal.js'></script>
同理菌瘪，defer1.js 里放了jquery的壓縮版源碼。defer2.js里只放了一句日志; 刷新網(wǎng)頁看下日志:
defer1 糜工、defer2還是按照順序執(zhí)行的录淡。
把a(bǔ)sync、defer都加上嫉戚，
<script type="text/javascript" async src='./async1.js'></script>
<script type="text/javascript" async src='./async2.js'></script>
<script type="text/javascript" defer src='./defer1.js'></script>
<script type="text/javascript" defer src='./defer2.js'></script>
<script type="text/javascript" src='./normal.js'></script>
日志如下:
這個順序應(yīng)該不是固定的彬檀，符合normal最早，defer1會在 defer2之前的規(guī)矩凤覆。 至于async 和 defer的前后則要看本身js的加載以及dom樹的構(gòu)建時機(jī)吧盯桦。
三種方式適合什么時候用
growingwiththeweb 推薦優(yōu)先級依次是 async defer normal。拥峦。
- 當(dāng)你的js是個獨(dú)立的模塊且不依賴任何js，使用 async;
- 如果你的js依賴其他js或者被其他js 依賴，使用 defer;
- 如果你對js文件很小且被 async script 依賴玄柠，使用正常模式的script且放在async script 前面。
可能的坑
雖然理論上defer按加載順序執(zhí)行宫患，但也有同學(xué)反映事實(shí)上并不是這樣这弧。。比如這位同學(xué)的問題：
我認(rèn)為這是涉及到 event loop的 task和微任務(wù)了皇帮。
"在現(xiàn)實(shí)當(dāng)中蛋辈，延遲腳本并不一定會按照順序執(zhí)行，也不一定會在 DOMContentLoaded 事件觸發(fā)前執(zhí)行，因此最好只包含一個延遲腳本瓢娜。" 《JavaScript 高級程序設(shè)計（第三版）》如是說礼预，所以腳本之間有依賴，最好使用一個異步腳本吧托酸。比如上面同學(xué)那個問題 可以改成這樣<script src="1.js"></script>.
