html頁面渲染的原理和優化


一個html網頁載入的大概過程

1.用戶輸入網址,(假定是第一次訪問),瀏覽器向服務器發出請求,服務器返回html文件;

2.瀏覽器開始載入html代碼,發現head標簽內有一個link標簽引用外部css文件,那么瀏覽器發出css文件的請求,等待服務器返回css文件;

3.瀏覽器繼續載入<body>里面的代碼,並且css代碼已經拿到手了,開始渲染界面了。

4.瀏覽器在代碼中發現了一個<img>標簽引用了一張圖片,向服務器發出請求,瀏覽器不會等到圖片下載完,而是繼續渲染后面的代碼,服務器返回圖片文件,由於圖片占據了一定面積,影響了后面的排版,因此瀏覽器需要回頭重新渲染這部分代碼。

5.瀏覽器發現了一行js代碼的<script>的代碼,立刻執行js,js腳本執行了這條語句,它命令瀏覽器隱藏掉某個<div>,由於少了一個元素,瀏覽器不得不從新進行重新渲染這部分代碼。

6.終於等到</html>的歸來,瀏覽器淚流滿面。

7.等等,還沒完。用戶點擊了一下界面中的換膚按鈕,js讓瀏覽器換了一下<link>的css標簽,於是瀏覽器召集了在座的各位<div><span><ul><li>們,“大伙兒收拾收拾行李,咱得重新來過……”,瀏覽器向服務器請求了新的CSS文件,重新渲染頁面。

js的阻塞特性:

其中js是阻塞式的加載,瀏覽器在加載js時,當瀏覽器在執行js代碼時,不會做其他的事情,即<script>的每次出現都會讓頁面等待腳本的解析和執行,js代碼執行后,才會繼續渲染頁面。新一代瀏覽器雖然支持並行下載。但是js下載仍會阻塞其他資源的下載(比如圖片)。所以應該把js放到頁面的底部。

js的優化:

1.要使用高效的選擇器。

2.將選擇器保存為局部變量

3先操作再顯示。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM