解析: 執行程式碼
載入: 下載程式碼

1. JS指令碼 ( 因為js修改DOM, 所以需要先js解析 )
   script標籤: 阻塞html文件的解析, 直到指令碼執行完
   外引js: 先網路請求,載入js, 再阻塞html文件的解析, 直到指令碼執行完

2. CSS ( js有可能依賴樣式,如var a=$('#id').width() 需要先css解析 )
   Firefox 所有css阻塞js指令碼
   chrome 指令碼訪問css時, 阻塞這個js指令碼

3. 阻塞優先順序: CSS > JS > HTML

4. 預解析
   瀏覽器多執行緒非同步優先解析script link 標籤, 並載入這些資源. 就是優先載入外引js css

5. chrome網頁載入順序:
   1 瀏覽器一邊下載html, 一邊開始從上往下順序解析
   2 預解析, 下載js css
   3 遇到js指令碼, script標籤, 阻塞html解析, 由js引擎解析js程式碼
   4 js程式碼中訪問了css, 阻塞這個指令碼, 優先css
   5 以上head裡的js css 解析完成, 解析body中html
   6 執行body最後的js指令碼 script標籤
   7 進行DOM渲染和Render樹渲染

   • 獲取html並解析為Dom樹
   • 解析css並形成一個cssom（css樹）
   • 將cssom和dom合併成渲染樹（render樹）
   • 進行佈局（layout）
   • 進行繪製（painting）
   • 迴流重繪
     • 迴流必將引起重繪，重繪不一定引起迴流

6. js延遲載入

<script src=""  async></script>
<script src=""  defer></script>

兩者都只適用於外部指令碼.
區別: async不保證執行的先後順序
記憶: async非同步,不同時的(無順序), defer延期(有順序)
一般來說，如果指令碼之間沒有依賴關係，就使用async屬性，如果指令碼之間有依賴關係，就使用defer屬性。