好程序員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的效果。在這裏，它是異步加載樣式表的最簡單方法：
<link rel="stylesheet" href="/styles/index.css" media="print" onload="this.media='all'">
這行HTML簡潔，但它不是很直觀，所以讓我們分解這裏發生的事情。
首先，將link's media屬性設置爲print。“打印”是一種媒體type，它說“應用此樣式表的基於打印的媒體的規則”，換句話說，當用戶嘗試打印頁面時應用它們。不可否認，我們希望我們的樣式表適用於所有媒體（尤其是屏幕）而不僅僅是打印，但通過聲明與當前環境不匹配的媒體類型，我們可以實現一個有趣且有用的效果：瀏覽器將加載樣式表沒有延遲頁面渲染，異步！這很有幫助，但並不是我們想要的全部。我們還希望CSS在加載後實際應用於屏幕環境。爲此，我們可以使用該onload屬性將link媒體設置爲all完成加載。
介紹完了老方子，我們再來看看新藥方，是的，同樣的！在過去一兩年中，我們一直在使用link[rel=preload]（而不是rel=stylesheet）來實現與上面類似的模式（分別rel在加載後切換屬性而不是media屬性）。使用這種方法仍然可以正常工作，但是，使用時需要考慮幾個缺點preload。首先，瀏覽器對於加載的支持依舊不是特別的好因此如果你想依賴它來跨瀏覽器獲取和應用樣式表，那麼填充（例如一個loadCSS）是必要的。更主要的是，preload儘可能早地獲取文件，優先級最高，可能會優先考慮其他重要下載，並且可能比非關鍵CSS實際需要的優先級更高。
幸運的是，如果你碰巧想要提供的高優先級提取rel=preload（在支持它的瀏覽器中），你可以將它與上面的模式結合起來。
<link rel="preload" href="styles/index.css" as="style" onload="this.rel='stylesheet'">
這和之前的方法沒什麼區別啊！是的確實如此，但是呢，語法上更加好一些。另外就是你仔細點就會發現 as="style"這個屬性，所以 preload 不僅僅可以用在 CSS 文件上，而是可以用在絕大多數的資源文件上。
<link rel="preload" href="styles/index.css" as="script">
我們可以新建一個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('加載成功...');
});
本內容僞原創文章，轉載請註明出處。