（題圖：梵高-向日葵）
我們最開始學前端的時候都會看到教程在處理外部css，js的時候會將css放在header中，js放在body的最后。為什么要這樣子處理，今天參考一些資料好好分析下。
為什么外鏈css為什么要放頭部？
首先整個頁面展示給用戶會經過html 的解析與渲染過程。
而外鏈css無論放在html的任何位置都不影響html的解析，但是影響html的渲染。
如果將css放在尾部，html的內容可以第一時間顯示出來，但是會阻塞html行內css的渲染。
瀏覽器的這個策略其實很明智的，想象一下，如果沒有這個策略，頁面首先會呈現出一個行內css樣式，待CSS下載完之后又突然變了一個模樣。用戶體驗可謂極差，而且渲染是有成本的。
如果將css放在頭部，css的下載解析是可以和html的解析同步進行的，放到尾部，要花費額外時間來解析CSS，並且瀏覽器會先渲染出一個沒有樣式的頁面，等CSS加載完后會再渲染成一個有樣式的頁面，頁面會出現明顯的閃動的現象。
為什么script要放在尾部？
因為當瀏覽器解析到script的時候，就會立即下載執行，中斷html的解析過程，如果外部腳本加載時間很長（比如一直無法完成下載），就會造成網頁長時間失去響應，瀏覽器就會呈現“假死”狀態，這被稱為“阻塞效應”。
具體的流程是這樣的：
- 瀏覽器一邊下載HTML網頁，一邊開始解析。
- 解析過程中，發現script標簽
- 暫停解析，網頁渲染的控制權轉交給JavaScript引擎
- 如果script標簽引用了外部腳本，就下載該腳本，否則就直接執行
- 執行完畢，控制權交還渲染引擎，恢復往下解析HTML網頁
外鏈的script包含async或者defer如何處理？
這兩個屬性只是script標簽在header標簽中使用的，如果你把它放在body后面是無效的。
script 的這兩個屬性主要用於其js文件沒有操作DOM的情況，這時候就可以將該js腳本設置為異步加載，通過async或defer來標記代碼。
async和defer的區別：
0、async和defer都僅對外部腳本有效，對於內置而不是連接外部腳本的script標簽，以及動態生成的script標簽不起作用。
1、async和defer雖然都是異步的，不過使用async標志的腳本文件一旦加載完成就會立即執行；而使用defer標記的腳本文件，會在 DOMContentLoaded 事件之前（也就是頁面DOM加載完成時）執行。
2、如果有多個js腳本文件，async標記不保證按照書寫的順序執行，哪個腳本先下載結束，就先執行那個腳本。而defer標記則會按照js腳本書寫順序執行。
3、一般來說，如果腳本之間沒有依賴關系，就使用async屬性，如果腳本之間有依賴關系，就使用defer屬性。如果同時使用async和defer屬性，后者不起作用，瀏覽器行為由async屬性決定。
對於async標記，瀏覽器的解析過程是這樣的：
-
瀏覽器開始解析HTML網頁
-
解析過程中，發現帶有async屬性的script標簽
-
瀏覽器繼續往下解析HTML網頁，同時並行下載script標簽中的外部腳本
-
腳本下載完成，瀏覽器暫停解析HTML網頁，開始執行下載的腳本
-
腳本執行完畢，瀏覽器恢復解析HTML網頁
對於defer標記，瀏覽器的解析過程是這樣的：
-
瀏覽器開始解析HTML網頁
-
解析過程中，發現帶有defer屬性的script標簽
-
瀏覽器繼續往下解析HTML網頁，同時並行下載script標簽中的外部腳本
-
瀏覽器完成解析HTML網頁，此時再執行下載的腳本
由於使用了async或defer的script會放在header中，而header又會存在外鏈css，那么二者有順序要求嗎？
header中script和外鏈css的位置順序
先說結論：
如果在html的header中同時有js腳本和外鏈css，js腳本最好放外鏈css前面。
其實js的執行是依賴css樣式的。即只有css樣式全部下載完成后才會執行js。
因為如果腳本的內容是獲取元素的樣式，寬高等CSS控制的屬性，瀏覽器是需要計算的，也就是依賴於CSS。瀏覽器無法感知腳本內容到底是什么，為避免樣式獲取錯誤，因而只好等前面所有的樣式下載完后，再執行JS。
也就是說，如果有外鏈css，那么js的執行時需要等待外鏈css下載完。
(added in 20191204)
根據一些網友的評論與反饋，然后查了一些資料，暫時得出的結論如下：
由於現代瀏覽器很聰明會進行 prefetch 優化，就如 Chrome 瀏覽器，它會在解析 HTML 時收集外鏈，並在后台並行下載，由於會並行下載，那么head中外鏈js和css的位置其實就沒有什么很大影響了。
參考鏈接：
（啾咪 ^.<）