html,css,js的下載 & 執行順序是什麼?

12-29

請描述一下從我們輸入網址, 點擊回車之後. html,css和js文件的下載和執行順序. 包括如下幾點:
1. html下載與執行是同步的嗎?
2. css文件的下載和渲染是同步的嗎? 還是先下載完, 再渲染?
3. css文件的下載執行和 html文件的下載執行同步嗎?
4. 圖像的載入和 html文件的下載/執行同步嗎, 音視頻呢, 別的資源呢?

5. js文件的下載執行和html文件的下載執行同步還是非同步?如果帶有async和defer呢?
6. 有沒有可能出現html文件/圖片/css文件/js文件同時下載的情況?
7. 有沒有可能出現html/css文件/js文件同時執行的情況?
8. 從數據流打開(document.open())到載入js文件(普通的, 帶有async屬性的, 帶有defer屬性的)到DOMContentLoaded事件觸發, 到數據流關閉(document.close()), 到window.onload事件觸發, 能否從頭到尾描述一下這個過程...
9. 描述整個過程時請帶上css屬性的相互覆蓋(是否會導致重新渲染), js修改DOM結構(是否會導致重新渲染), css屬性的合併, 覆蓋等等相互作用, js變數的覆蓋等相互作用等等...
10. 問了好多問題, 總之希望有人能從頭到尾描述一下這個過程(html, css, js, 圖片, 音視頻等資源的下載 + html, css, js等文件的執行)...或者有沒有描述這個過程的優秀的文章, 謝謝

瀉藥

這種問題……

1. 不一定，http 在主進程 io 線程中，parser 在渲染進程中，有並行基礎，是否並行則看具體情況，比如是否有 chunked。

2. 同1

3. 同1

4. 同1

5.同1，async和defer只是下載js時候不阻塞主文檔parser。

6. 同1，有，此時 html 要不就是 chunked 或者屬於內頁 iframe 的

7. 沒有，執行都在同進程同線程里，除非是多標籤頁內的不同資源「同時」執行……

8. 9. 10. https://cs.chromium.org/chromium/src/ 你可以自己看……

建議優先閱讀這篇譯文：現代瀏覽器的工作原理 - 文章 - 伯樂在線

閱讀之後，後面答案可以不用看。

1. html下載與執行是同步的嗎?

結論：分情況。

html執行這個描述不準確，所謂的執行包括parseHTML、layout、paint幾個階段。download、parseHTML/parseCSS/executeJS、layout、paint都在不同進程中。

parseHTML/parseCSS並行，共同完成後layout生成渲染樹，進而paint渲染。執行JS會重新回到layout階段。

A.如果網速足夠快，內容很快傳送完畢，那parse+layout+paint會靠後執行。

B.如果弱網環境下，針對網速很慢的情況現代瀏覽器是有優化的，會嘗試提前渲染已收到的內容，也就造成了pc上會看到頁面一塊一塊展現的狀況。

C.chunk原理類似，每個chunk斷點都有可能觸發解析渲染。

D.有些瀏覽器還會做首屏優化，下載過程中不斷嘗試parse+layout，如果layout計算出內容超過首屏就paint這些內容，讓用戶優先看到首屏內容。

大部分進程因為是並行的，會相對複雜，分情況討論意義不大，不如從原理上理解。

2. css文件的下載和渲染是同步的嗎? 還是先下載完, 再渲染?

不確定下載過程中是否同步做詞法分析parseCss，但是可能性很大，畢竟是種無損失的優化方案，

但是最終肯定需要下載完再layout生成渲染樹，進而渲染。

3. css文件的下載執行和 html文件的下載執行同步嗎?

並行的。但是需要注意一些限制，比如一個域名下最大並發6個請求，再多就得串列。

4. 圖形的載入和 html文件的下載/執行同步嗎, 音視頻呢, 別的資源呢?

同上。

5. js文件的下載執行和html文件的下載執行同步還是非同步?如果帶有async和defer呢?

下載，但不executeJS

6. 有沒有可能出現html文件/圖片/css文件/js文件同時下載的情況?

常態。

7. 有沒有可能出現html/css文件/js文件同時執行的情況?

你讀了上面文章就能理解了：html parse和css parse是並行的，兩者完成後才會layout、paint，新的css掛載會延遲layout、paint。js parse會阻塞html parse ，所以後面的layout、paint一定不會同時執行。

你問到8、9、10說明對性能優化已經有一些意識了，讀上面文章吧，讀懂了問題迎刃而解。

這些問題很典型，也比較全面考察知識點，答案也並不絕對，秉承授人以魚，不如授人以漁的精神，建議你靜下心來好好學習，總結一次，自己去尋找答案，收穫會很大的，當然如果你只想快捷獲取答案，前面好些大拿都給出了大致回答。

關於瀏覽器工作原理主題，google，baidu都是一大堆，推薦一篇比較權威的：

How browsers work

這篇文章，是我看過最全面的，如果不喜歡讀英文，我個人也寫過一篇，儘可能寫的簡潔，清晰：

淺析前端頁面渲染機制，希望對你有幫助。

熱愛前端，熱愛分享。

這個問題應該叫做網頁的渲染過程
1. css js 圖片各種資源都在html裡面的 html不解析這些沒得談所以html是第一個下載下來肯定沒問題的
2. css 的載入和渲染 js的載入和執行可以自行百度查一下我只是即興回答下不想擴展開寫了
這也是一個前端常見的面試題之一

1, html下載與執行是同步的嗎?

這個執行是什麼？JS還是HTML結構的計算？如果是前者那答案：我猜是，要不幹嘛JS放在最後面？如果是後者：我猜答案不是，畢竟計算和下載不是同一個玩意乾的

2. css文件的下載和渲染是同步的嗎? 還是先下載完, 再渲染? 我猜答案是一邊下載一邊渲染

3. css文件的下載執行和 html文件的下載執行同步嗎? 這個問題都是計算渲染，我猜答案是

4. 圖形的載入和 html文件的下載/執行同步嗎, 音視頻呢, 別的資源呢? 不是同步，要不。。你視頻載入不完HTML不渲染了？

5. js文件的下載執行和html文件的下載執行同步還是非同步?如果帶有async和defer呢?

我猜前面同步，後面非同步

6. 有沒有可能出現html文件/圖片/css文件/js文件同時下載的情況? 兄弟本身就是同時下載，V8可以同時發出多個請求（我記得是五個），當然是同時下載。

7. 有沒有可能出現html/css文件/js文件同時執行的情況? 不是同一個玩意管著為什麼不可以？JS是js解析模塊管，HTML/CSS是渲染管著唄。兩個人管兩塊為嘛不同時幹活？

8，不幹，太長

9. 描述整個過程時請帶上css屬性的相互覆蓋(是否會導致重新渲染), js修改DOM結構(是否會導致重新渲染), css屬性的合併, 覆蓋等等相互作用, js變數的覆蓋等相互作用等等...

我猜第一個會，第二個會。CSS是下載-計算再下載-再計算的過程

10.以上都是我猜的，如果你要實名反對，

我也只能看著。。