異步加載CSS的方法有哪些

這篇文章主要介紹“異步加載CSS的方法有哪些”，在日常操作中，相信很多人在異步加載CSS的方法有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”異步加載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('加載成功...');

　　    });

到此，關于“異步加載CSS的方法有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！