web前端入門到實戰:非同步載入CSS最簡單的實現方式

智雲程式設計發表於2019-11-03

我們想 提高網頁效能的最有影響力的措施之一,就是以不延遲網頁渲染的方式載入 CSS

在預設情況下,瀏覽器在載入 CSS時將終止頁面的樣式呈現(同步載入),也就是載入 CSS會阻塞 DOM樹的渲染(但並不會阻塞 DOM樹的構建),可以簡單理解為:當在載入 CSS的同時,也在構建 DOM樹,只是沒有應用上樣式。

渲染流程

簡單過一遍瀏覽器渲染的流程:

  1. 載入 HTML資源
  2. 解析 HTML
  3. 載入 CSS資源,同時構建 DOM樹
  4. 解析 CSS,同時渲染 DOM樹

CSS檔案過大,就會停留在 第3步,所以網速慢時,開啟網站的時候經常遇到沒有樣式的情況。

所以我們需要先載入部分 CSS首屏需要用到的 CSS),其他優先順序比較低的 CSS就以非同步的方式載入。與 script元素不同,沒有 asyncdefer屬性可以簡單地應用於 link元素,但是可以模擬。

非同步載入

1. 利用媒體查詢

設定一個當前瀏覽器不支援的值:

<link rel="stylesheet" href="./index.css" media="none" >

這樣瀏覽器將會非同步載入這個 CSS檔案(優先度比較低),在載入完畢之後,使用 onload屬性將 link的媒體型別設定為 all,然後便開始渲染。

如果有如下程式碼:

<link rel="stylesheet" href="./index2.css" media="none" onload="this.media='all'">
<link rel="stylesheet" href="./index1.css">
web前端開發學習Q-q-u-n:784783012 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法(詳細的前端專案實戰教學視訊)

瀏覽器載入優先順序如下:

又或者有如下程式碼:

<link rel="stylesheet" href="./index1.css" media="screen and (max-width: 800px)">
<link rel="stylesheet" href="./index2.css" media="screen and (min-width: 800px)">

重新整理頁面時,如果 視窗寬度小於 800px,那麼優先載入 index1.css,如果大於 800px,則相反:

總結:媒體查詢不匹配的樣式優先順序低?。

2. 提前載入資源

這個跟上述類似,但是優先順序是 最高的,不過還是非同步載入,不會阻塞DOM的渲染,只是瀏覽器支援度比較低?。

<link rel="preload" href="./index.css" as="style">

告訴瀏覽器 "請提前載入好此資源,我後面會用到!"。當用到的時候,瀏覽器便從快取中拿取?。

所以正確操作跟媒體查詢一樣:

<link rel="preload" href="./index.css" as="style" >

當然,該屬性還可以應用於其他資源,當你需要用到這些資源的時候,瀏覽器會直接從 快取中拿,不再次傳送請求了。

<link rel="preload" href="./index.js" as="script">
<link rel="preload" href="./index.png" as="image">
<link rel="preload" href="./index.mp4" as="video" type="video/mp4">

3. 撈仔寫法

let link = document.createElement("link");
link.rel = "stylesheet";
link.href = "./index1.css";
document.head.appendChild(link);
web前端開發學習Q-q-u-n:784783012 ,分享學習的方法和需要注意的小細節,不停更新最新的教程和學習方法(詳細的前端專案實戰教學視訊)

總結

重要樣式使用同步載入(常規寫法),優先順序低的則使用非同步載入,非同步載入不會阻塞頁面的渲染。

越來越多的人發現,可能只需要簡單的 HTML方法,而簡單往往是最好的。

<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./other.css" media="none" onload="this.media='all'">


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2662435/,如需轉載,請註明出處,否則將追究法律責任。

相關文章