前端性能優化學習筆記三
一個網站在瀏覽器端是如何進行渲染的呢?
HTML渲染過程的一些特點
順序執行、併發加載
用戶輸入網址(假設是個html頁面,並且是第一次訪問),瀏覽器向服務器發出請求,服務器返回html文件,瀏覽器根據詞法分析
從上往下解析html
發現<head>
標籤內有一個<link>
標籤引用外部CSS文件,瀏覽器又發出CSS文件的請求,服務器返回這個CSS文件。
發現<body>
標籤內有一個<img>
標籤引用外部圖片文件,瀏覽器又發出圖片文件的請求,服務器返回這個圖片文件。
發現<body>
標籤內有一個<src>
標籤引用外部JS文件,瀏覽器又發出JS文件的請求,服務器返回這個JS文件。
併發上限各瀏覽器有差異,chrome爲5個
css阻塞
css head中阻塞頁面的渲染
css阻塞js的執行
css不阻塞外部腳本的加載
js阻塞
直接引入的js阻塞頁面的渲染
js不阻塞資源的加載
js順序執行,阻塞後續js邏輯的執行
依賴關係
頁面渲染依賴於css的加載
js的執行順序的依賴關係
js邏輯對於dom節點的依賴關係
js引入方式
直接引入
defer
async
異步動態引入js
加載和執行的一些優化點
css 樣式表置頂
用 link 代替 import
js 腳本置底
合理使用 js 的異步加載能力