前端效能優化 --- css和js的裝載與執行

帕尼尼0_0發表於2018-08-29
前端優化CSSJS

前端效能優化學習筆記三

一個網站在瀏覽器端是如何進行渲染的呢？

這裡寫圖片描述

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 的非同步載入能力

相關文章