1. 程式人生 > >css非同步載入

css非同步載入

link標籤的media屬性(注:測試只有高版本的Google瀏覽器可以,FF,IE都失敗)

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

如上,當一個媒體查詢的結果值計算出來是 false 的時候,瀏覽器仍然會下載樣式表,但是不會在渲染頁面之前等待樣式表的資源可用。
樣式表一下載好,media 屬性就必須被設定一個可用的值,以便樣式規則能被應用到 html 文件中onload 事件就可以用來將 media 屬性切換到all:

<link rel="stylesheet" href="css.css" media
="none" onload="if(media!='all')media='all'">

說明:上面的屬於css非阻塞的一種解決方案。可以讓頁面主要的框架css執行阻塞載入(即:讓重要的頁面佈局阻塞頁面渲染),而其他使用非阻塞載入來有效提高網頁呈現的速度,進而提高效能。