HTML載入順序總結測試
阿新 • • 發佈：2019-01-27
首先，頁面載入順序：
解析HTML結構。
載入外部指令碼和樣式表文件。
解析並執行指令碼程式碼。
構造HTML DOM模型。
載入圖片等外部檔案。
頁面載入完畢。
也就是：
html → head → title → #text(網頁標題) → style → 載入樣式 → 解析樣式 → link → 載入外部樣式表文件 → 解析外部樣式表 → script → 載入外部指令碼檔案 → 解析外部指令碼檔案 → 執行外部指令碼 → body → div → script → 載入指令碼 → 解析指令碼 → 執行指令碼 → img → script → 載入指令碼 → 解析指令碼 → 執行指令碼 → 載入外部影象檔案 → 頁面初始化完畢。
JS 的初始化裝載。
瀏覽器載入顯示html的順序是按下面的順序進行的：
1、IE下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的。
2、在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（並不是說所有相關聯的元素都已經下載完）。
3、如果遇到語義解釋性的標籤嵌入檔案（JS指令碼，CSS樣式），那麼此時IE的下載過程會啟用單獨連線進行下載。
4、並且在下載後進行解析，解析過程中，停止頁面所有往下元素的下載。
5、樣式表在下載完成後，將和以前下載的所有樣式表一起進行解析，解析完成後，將對此前所有元素（含以前已經渲染的）重新進行渲染。
6、JS、CSS中如有重定義，後定義函式將覆蓋前定義函式。
簡單地說，頁面渲染就是瀏覽器將html程式碼根據CSS定義的規則顯示在瀏覽器視窗中的這個過程。先來大致瞭解一下瀏覽器都是怎麼幹活的：
- 使用者輸入網址（假設是個html頁面，並且是第一次訪問），瀏覽器向伺服器發出請求，伺服器返回html檔案；
- 瀏覽器開始載入html程式碼，發現<head>標籤內有一個<link>標籤引用外部CSS檔案；
- 瀏覽器又發出CSS檔案的請求，伺服器返回這個CSS檔案；
- 瀏覽器繼續載入html中<body>部分的程式碼，並且CSS檔案已經拿到手了，可以開始渲染頁面了；
- 瀏覽器在程式碼中發現一個<img>標籤引用了一張圖片，向伺服器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染後面 的程式碼；
- 伺服器返回圖片檔案，由於圖片佔用了一定面積，影響了後面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分程式碼；
- 瀏覽器發現了一個包含一行Javascript程式碼的<script>標籤，趕快執行它；
- Javascript指令碼執行了這條語句，它命令瀏覽器隱藏掉程式碼中的某個<div> （style.display=”none”）。杯具啊，突然就少了這麼一個元素，瀏覽器不得不重新渲染這部分程式碼；
- 終於等到了</html>的到來，瀏覽器淚流滿面……
- 等等，還沒完，使用者點了一下介面中的“換膚”按鈕，Javascript讓瀏覽器換了一下<link>標籤的CSS路徑；
- 瀏覽器召集了在座的各位<div><span><ul><li>們，“大夥兒收拾收拾 行李，咱得重新來過……”，瀏覽器向伺服器請求了新的CSS檔案，重新渲染頁面。