html、css以及js檔案載入順序及執行情況

今天看書，看到html，css，js加載執行情況，發現自己並不是真正的了解，網上搜了半小時依然未弄明白，就在這時我找到了讓我恍然大悟的一段話，如下：

HTML頁面載入和解析流程 

1. 使用者輸入網址（假設是html頁面，並且是第一次造訪），瀏覽器向伺服器發出請求，伺服器傳回html檔案。 

2. 瀏覽器開始載入html程式碼，發現

標籤內有標籤引用外部CSS檔案。 

3. 瀏覽器又發出CSS檔案的請求，伺服器回傳這個CSS檔案。 

4. 瀏覽器繼續載入html中

部分的程式碼，而CSS檔案已經拿到手了，可以開始渲染頁面了。 

5. 瀏覽器在程式碼中發現一個標籤引用了一張圖片，向伺服器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染後面的程式碼。 

6. 伺服器傳回圖片文件，由於圖片佔據了一定面積，影響了後面段落的排布，因此瀏覽器需要回頭重新渲染這部分程式碼。 

7. 瀏覽器發現了一個包含一行Javascript程式碼的<script>標籤，趕快執行它。 </script>

8. Javascript腳本執行了這個語句，它命令瀏覽器隱藏掉程式碼中的某個

9. 終於等到了的到來，瀏覽器淚流滿面… 

10. 等等，還沒完，使用者點了一下介面中的「換膚」按鈕，Javascript讓瀏覽器換了一下＜link＞標籤的CSS路徑。

11. 瀏覽器召集了在座的各位

• 們，“大夥兒收拾行李，咱得重新來過……”，瀏覽器向伺服器請求了新的CSS文件，重新渲染頁面。

總結：1.總的來說就是按照html文檔的順序加載

　　　2.還有就是最好將無論內部或是外部JS文件放到所有html內容之後，這樣會令使用者感覺頁面載入速度變快了，否則如果將所有外部檔案（包括css和JS）引用都放到

中，意味著必須等到全部的JS程式碼都被下載解析和執行完畢後，才能開始呈現頁面的內容（當瀏覽器遇到）,這樣會導致呈現頁面時出現明顯的延遲，二延遲期間的瀏覽器視窗將是一片空白。

 

以上是html、css以及js檔案載入順序及執行情況的詳細內容。更多資訊請關注PHP中文網其他相關文章！