html頁面渲染的原理及優化

時間 2019-11-13

標籤 html 頁面渲染原理優化欄目 HTML 简体版

原文原文鏈接

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

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

2.瀏覽器開始載入html代碼，發現head標籤內有一個link標籤引用外部css文件。瀏覽器

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

4.瀏覽器繼續載入<body>裏面的代碼，而且css代碼已經拿到手了，開始渲染界面了。優化

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

6.服務器返回圖片文件，因爲圖片佔據了必定面積，影響了後面的排版，所以瀏覽器須要回頭從新渲染這部分代碼。htm

7.瀏覽器發現了一行js代碼的<script>的代碼，趕快執行他。圖片

8.js腳本執行了這條語句，它命令瀏覽器隱藏掉某個<div>,因爲少了一個元素，瀏覽器不得不重新進行從新渲染這部分代碼。ip

9.終於等到</html>的歸來，瀏覽器淚流滿面。資源

10.等等，還沒完。用戶點擊了一下界面中的換膚按鈕,js讓瀏覽器換了一下<link>的css標籤。

11.瀏覽器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞們，「大夥兒收拾收拾行李，咱得從新來過……」，瀏覽器向服務器請求了新的CSS文件，從新渲染頁面。

js的阻塞特性：

其中js是阻塞式的加載，瀏覽器在加載js時，當瀏覽器在執行js代碼時，不會作其餘的事情，即<script>的每次出現都會讓頁面等待腳本的解析和執行，js代碼執行後，纔會繼續渲染頁面。新一代瀏覽器雖然支持並行下載。可是js下載仍會阻塞其餘資源的下載（好比圖片）。因此應該把js放到頁面的底部。

js的優化：

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

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

3先操做再顯示。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。