頁面總是從上往下執行
CSS為什么要放在頭部
1.CSS可以和html一起同時進行解析和渲染
2.如果你把CSS放到body后面，不但沒有跟html一起進行加載渲染，還要花費額外時間去加載CSS,這樣將導致首先加載到一個沒有樣式的頁面結構，等到CSS加載完了之后，突然又變為一個有樣式的結構，這樣用戶體驗非常不好
JavaScript為什么要放在尾部
JavaScript解析加載時，會暫停html的解析和css渲染，把頁面的控制權，交給JavaScript引擎，等到JavaScript加載完了之后再把控制權交給html頁面，然后html繼續開始解析加載，如果JavaScript文件很多，需要加載的時間很久，甚至遲遲加載不了，這將導致頁面卡死，處於一種假死狀態，對用戶體驗不好
具體的流程是這樣:
1.瀏覽器一邊下載html網頁，一邊開始解析
2.解析過程中，發現JavaScript便簽
3.暫停解析，網頁渲染的控制權轉交給JavaScript引擎
4.如JavaScript標簽引入外部腳本，就下載腳本，否則就直接執行
5.執行完畢，控制權交還給渲染引擎，恢復往下解析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也無法正常運行，導致html無法正常解析出來。如果css的內容下載更快的話，是沒影響的，但反過來的話，JS就要等待了，然而這些等待的時間是完全不必要的。
