国产色在线视频-国产色综合一区二区三区-国产身材极品喷水 在线播放-国产深夜福利视频观看-国产深夜福利视频在线-国产深夜福利视频在线播放

html、css、js文件加載順序及執(zhí)行情況

2017/2/11 8:32:29   閱讀:1595    發(fā)布者:1595
  今天看書,看到html,css,js加載執(zhí)行情況,發(fā)現(xiàn)自己并不是真正的了解,
網(wǎng)上搜了半小時依然未弄明白,就在這時我找到了讓我恍然大悟的一段話,如下:
  HTML頁面加載和解析流程 
 
1. 用戶輸入網(wǎng)址(假設(shè)是個html頁面,并且是第一次訪問),
瀏覽器向服務(wù)器發(fā)出請求,服務(wù)器返回html文件。 
 
2. 瀏覽器開始載入html代碼,發(fā)現(xiàn)<head>標(biāo)簽內(nèi)有一個
<link>標(biāo)簽引用外部CSS文件。 
 
3. 瀏覽器又發(fā)出CSS文件的請求,服務(wù)器返回這個CSS文件。 
 
4. 瀏覽器繼續(xù)載入html中<body>部分的代碼,
并且CSS文件已經(jīng)拿到手了,可以開始渲染頁面了。 
 
5. 瀏覽器在代碼中發(fā)現(xiàn)一個<img>標(biāo)簽引用了一張圖片,
向服務(wù)器發(fā)出請求。此時瀏覽器不會等到圖片下載完,
而是繼續(xù)渲染后面的代碼。 
 
6. 服務(wù)器返回圖片文件,由于圖片占用了一定面積,影響了后面段落的排布,
因此瀏覽器需要回過頭來重新渲染這部分代碼。 
 
7. 瀏覽器發(fā)現(xiàn)了一個包含一行Javascript代碼的<script>標(biāo)簽,
趕快運行它。 
 
8. Javascript腳本執(zhí)行了這條語句,它命令瀏覽器隱藏掉代碼中的某個<style>
(style.display=”none”)。杯具啊,突然就少了這么一個元素,
瀏覽器不得不重新渲染這部分代碼。 
 
9. 終于等到了</html>的到來,瀏覽器淚流滿面…… 
 
10. 等等,還沒完,用戶點了一下界面中的“換膚”按鈕,Javascript讓
瀏覽器換了一下<link>標(biāo)簽的CSS路徑。 
 
11. 瀏覽器召集了在座的各位<div><span><ul>
<li>們,“大伙兒收拾收拾行李,咱得重新來過……”,
瀏覽器向服務(wù)器請求了新的CSS文件,重新渲染頁面。
 
總結(jié):1.總的來說就是按照html文檔的順序加載
   2.還有就是最好將無論內(nèi)部或是外部JS文件放到所有html內(nèi)容之后,
這樣會令用戶感覺頁面加載速度變快了,否則如果將所有外部文件(包括css和JS)
引用都放到<head>中,意味著必須等到全部
的JS代碼都被下載解析和執(zhí)行完畢后,才能開始呈現(xiàn)頁面的內(nèi)容(當(dāng)瀏覽器遇到<body>),
這樣會導(dǎo)致呈現(xiàn)頁面時出現(xiàn)明顯的延遲,二延遲期間的瀏覽器窗口將是
一片空白。