1. 程式人生 > >HTML頁面加載和解析流程

HTML頁面加載和解析流程

有一個 scrip isp epic api 需要 解析 pla script

<link href="/Content/css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Content/js/jquery.min.js"></script>
<link href="~/Content/css/plugins/datapicker/datepicker3.css" rel="stylesheet" />

<script src="~/Content/js/plugins/datapicker/bootstrap-datepicker.js"></script>
以上引用,link 和 script 引用 順序可以顛倒嗎, 有沒有說 link 一定要放在最前面的行?

回答:HTML頁面加載和解析流程

1. 用戶輸入網址(假設是個html頁面,並且是第一次訪問),瀏覽器向服務器發出請求,服務器返回html文件。


2. 瀏覽器開始載入html代碼,發現<head>標簽內有一個<link>標簽引用外部CSS文件。

3. 瀏覽器又發出CSS文件的請求,服務器返回這個CSS文件。

4. 瀏覽器繼續載入html中<body>部分的代碼,並且CSS文件已經拿到手了,可以開始渲染頁面了。

5. 瀏覽器在代碼中發現一個<img>標簽引用了一張圖片,向服務器發出請求。此時瀏覽器不會等到圖片下載完,而是繼續渲染後面的代碼。

6. 服務器返回圖片文件,由於圖片占用了一定面積,影響了後面段落的排布,因此瀏覽器需要回過頭來重新渲染這部分代碼。

7. 瀏覽器發現了一個包含一行Javascript代碼的<script>標簽,趕快運行它。

8. Javascript腳本執行了這條語句,它命令瀏覽器隱藏掉代碼中的某個<style>(style.display=”none”)。杯具啊,突然就少了這麽一個元素,瀏覽器不得不重新渲染這部分代碼。

9. 終於等到了</html>的到來,瀏覽器淚流滿面……

10. 等等,還沒完,用戶點了一下界面中的“換膚”按鈕,Javascript讓瀏覽器換了一下<link>標簽的CSS路徑。

11. 瀏覽器召集了在座的各位<div><span><ul><li>們,“大夥兒收拾收拾行李,咱得重新來過……”,瀏覽器向服務器請求了新的CSS文件,重新渲染頁面。

因此,一般情況下,css放head標簽裏,js引用放最後,望采納

HTML頁面加載和解析流程