前端效能優化學習筆記三乙個**在瀏覽器端是如何進行渲染的呢？
順序執行、併發載入
使用者輸入**（假設是個html頁面，並且是第一次訪問），瀏覽器向伺服器發出請求，伺服器返回html檔案，瀏覽器根據詞法分析從上往下解析html
發現標籤內有乙個標籤引用外部css檔案，瀏覽器又發出css檔案的請求，伺服器返回這個css檔案。
發現標籤內有乙個標籤引用外部檔案，瀏覽器又發出檔案的請求，伺服器返回這個檔案。
發現標籤內有乙個標籤引用外部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 的非同步載入能力
前端css效能優化
1.避免使用 important 外部的css檔案中使用 important會使得頁面在載入時增加額外的延遲。最好使用link 2.避免使用css表示式 表示式可能會造成極大的計算量 3.避免通配選擇器 在初期使用 以此來消除標籤的預設布局和不同瀏覽器的對同乙個標籤的不同的渲染。4.移除無匹配的樣式...
前端css效能優化
1.避免使用 important 外部的css檔案中使用 important會使得頁面在載入時增加額外的延遲。最好使用link 2.避免使用css表示式 表示式可能會造成極大的計算量 3.避免通配選擇器 在初期使用 以此來消除標籤的預設布局和不同瀏覽器的對同乙個標籤的不同的渲染。4.移除無匹配的樣式...
前端js效能優化（一）
多數瀏覽器使用單一程序來處理ui重新整理和js指令碼執行，因此同一時刻只能做一件事。因此，當頁面遇到script標籤後都會阻止頁面渲染過程並等待指令碼的解析和執行，無論指令碼是內嵌的還是外鏈的。由於每乙個script標籤都會阻塞頁面渲染，所以減少頁面包含的script標籤數量有助於改善這一狀況。這不...