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先操作再顯示。
浙公網安備 33010602011771號