## 資源外鏈的下載 上面介紹了html解析，渲染流程。但實際上，在解析html時，會遇到一些資源連接，此時就需要進行單獨處理了 簡單起見，這里將遇到的靜態資源分為一下幾大類（未列舉所有）： - CSS樣式資源 - JS腳本資源 - img圖片類資源 **遇到外鏈時的處理** 當遇到上述的外鏈時，會單獨開啟一個下載線程去下載資源（http1.1中是每一個資源的下載都要開啟一個http請求，對應一個tcp/ip鏈接） **遇到CSS樣式資源** CSS資源的處理有幾個特點： - CSS下載時異步，不會阻塞瀏覽器構建DOM樹 - 但是會阻塞渲染，也就是在構建render時，會等到css下載解析完畢后才進行（這點與瀏覽器優化有關，防止css規則不斷改變，避免了重復的構建） - 有例外，`media query`聲明的CSS是不會阻塞渲染的 **遇到JS腳本資源** JS腳本資源的處理有幾個特點： - 阻塞瀏覽器的解析，也就是說發現一個外鏈腳本時，需等待腳本下載完成并執行后才會繼續解析HTML - 瀏覽器的優化，一般現代瀏覽器有優化，在腳本阻塞時，也會繼續下載其它資源（當然有并發上限），但是雖然腳本可以并行下載，解析過程仍然是阻塞的，也就是說必須這個腳本執行完畢后才會接下來的解析，并行下載只是一種優化而已 - defer與async，普通的腳本是會阻塞瀏覽器解析的，但是可以加上defer或async屬性，這樣腳本就變成異步了，可以等到解析完畢后再執行 注意，defer和async是有區別的： **defer是延遲執行，而async是異步執行。** 簡單的說（不展開）： - `async` 是異步執行，異步下載完畢后就會執行，不確保執行順序，一定在`onload`前，但不確定在`DOMContentLoaded`事件的前或后 - `defer` 是延遲執行，在瀏覽器看起來的效果像是將腳本放在了`body`后面一樣（雖然按規范應該是在`DOMContentLoaded`事件前，但實際上不同瀏覽器的優化效果不一樣，也有可能在它后面） **遇到img圖片類資源** 遇到圖片等資源時，直接就是異步下載，不會阻塞解析，下載完畢后直接用圖片替換原有src的地方。 ### loaded和domcontentloaded 簡單的對比： - DOMContentLoaded 事件觸發時，僅當DOM加載完成，不包括樣式表，圖片(譬如如果有async加載的腳本就不一定完成) - load 事件觸發時，頁面上所有的DOM，樣式表，腳本，圖片都已經加載完成了