先上圖，

1， 不會阻塞 DOM 的解析，但會阻塞 DOM 渲染。

2，JS 阻塞 DOM 解析，但瀏覽器會"偷看"DOM，預先下載相關資源。

3，瀏覽器遇到 <script>且沒有 defer 或 async 屬性的 標籤時，會觸發頁面渲染，因而如果前面 CSS 資源尚未載入完畢時，瀏覽器會等待它載入完畢在執行指令碼。

so   <script>最好放底部，<link>最好放頭部，如果頭部同時有<script>與<link>的情況下，最好將<script>放在<link>上面

ps

defer：如果script標籤設定了該屬性，則瀏覽器會非同步的下載該檔案並且不會影響到後續DOM的渲染；
如果有多個設定了defer的script標籤存在，則會按照順序執行所有的script；
defer指令碼會在文件渲染完畢後，DOMContentLoaded事件呼叫前執行。

async：

async的設定，會使得script指令碼非同步的載入並在允許的情況下執行
async的執行，並不會按著script在頁面中的順序來執行，而是誰先載入完誰執行。