　　好程式設計師 web前端教程分享非同步載入 CSS的一些方法，在我們寫頁面的時候，我們做最主要的任務就是提高頁面的效能和彈性載入速度，以不會延遲頁面的呈現的形式來載入 CSS。這是因為在預設情況下，

　　 - 瀏覽器會同步載入外部的 CSS

　　 - 在下載和解析CSS時會影響所有頁面呈現

這兩種情況都會導致潛在的延遲。

　　當然，這也是在開始渲染頁面之前，應該至少載入網站的 CSS的一部分，並且為了立即將該初始CSS新增到瀏覽器，我們建議內聯css 。對於整體數量較少的網站，僅此一項就足夠了，但如果 CSS很大（例如，大於15到20kb），它可以幫助效能按優先順序將其拆分。拆分後，應該在後臺-aka 中載入不太關鍵的 CSS 非同步。在這篇文章中，我的目的是描述我在這些日子的首選方式，這實際上已存在很長的時間段了。

　　有幾種方法可以非同步載入 CSS，但沒有一種方法可以像您期望的那樣直觀。與script 元素不同，沒有 async或defer屬性可以簡單地應用於link元素，因此多年來我們維護了loadCSS專案，使得載入非同步 CSS的過程更加容易。最近，瀏覽器已經標準化了它們的 CSS載入行為，因此可能不再需要像loadCSS這樣的專用指令碼來處理它們的微小差異。

　　今天，我們掌握了瀏覽器如何處理各種 link元素屬性的一些知識，我們可以透過一小段HTML來實現非同步載入CSS的效果。在這裡，它是非同步載入樣式表的最簡單方法：

　　這行 HTML簡潔，但它不是很直觀，所以讓我們分解這裡發生的事情。

　　首先，將 link's media屬性設定為print。“列印”是一種媒體type，它說“應用此樣式表的基於列印的媒體的規則”，換句話說，當使用者嘗試列印頁面時應用它們。不可否認，我們希望我們的樣式表適用於所有媒體（尤其是螢幕）而不僅僅是列印，但透過宣告與當前環境不匹配的媒體型別，我們可以實現一個有趣且有用的效果：瀏覽器將載入樣式表沒有延遲頁面渲染，非同步！這很有幫助，但並不是我們想要的全部。我們還希望CSS在載入後實際 應用於 螢幕環境。為此，我們可以使用該 onload屬性將link媒體設定為all完成載入。

　　介紹完了老方子，我們再來看看新藥方，是的，同樣的！在過去一兩年中，我們一直在使用 link[rel=preload]（而不是rel=stylesheet）來實現與上面類似的模式（分別rel在載入後切換屬性而不是media屬性）。使用這種方法仍然可以正常工作，但是，使用時需要考慮幾個缺點preload。首先，瀏覽器對於載入的支援依舊不是特別的好因此如果你想依賴它來跨瀏覽器獲取和應用樣式表，那麼填充（例如一個 loadCSS）是必要的。更主要的是， preload儘可能早地獲取檔案，優先順序最高，可能會優先考慮其他重要下載，並且可能比非關鍵CSS實際需要的優先順序更高。

　　幸運的是，如果你碰巧想要提供的高優先順序提取 rel=preload（在支援它的瀏覽器中），你可以將它與上面的模式結合起來。

　　這和之前的方法沒什麼區別啊！是的確實如此，但是呢，語法上更加好一些。另外就是你仔細點就會發現 as="style"這個屬性，所以 preload 不僅僅可以用在 CSS 檔案上，而是可以用在絕大多數的資原始檔上。

　　我們可以新建一個 script標籤來指向它：

　　 var script = document.createElement("script");

　　 script.src = "scriptfile.js";

　　 document.body.appendChild(script);

　　在這個時候瀏覽器就直接從快取中拿這個檔案了，不會再發請求了，因為此前已經載入好了。

　　那麼 preload 中的 as 屬性支援哪些資原始檔呢？下面這些都可以

font
image
object
script
style

不要想太多，只有谷歌太對它做出完美的支援。

也可以用 JavaScript來實現：

　　 $(window).load(function () {

　　 //非同步延遲載入樣式

　　 var link = $('<link />');

　　 link.attr('href', '/styles/index.css');

　　 link.attr('rel', 'stylesheet');

　　 link.appendTo($('head'));

　　 link.load(function () {

　　 console.info('載入成功...');

　　 });

本內容偽原創文章，轉載請註明出處。

好程式設計師web前端教程分享非同步載入CSS的一些方法

相關文章