前言
關于前端css性能優化，網上很多類似文章，我之前也寫過，《 網站前端性能優化之javascript和css 》，感興趣的可以去看下。今天我們舊事重提，再來談談css的加載，及加載順序。
通常的css加載順序
一般情況下，我們css樣式表是放在頭部，同時為了減少請求，我們通常對css進行一個合并壓縮。 目前我們css一般是如下加載的：
<head> <link rel="stylesheet" href="/all-of-my-styles.css"></head><body> …content…</body>
這樣可以，但是有幾個性能問題，我們可以繼續優化：
問題：
所有的css都合并壓縮成一個文件，放在頁面頭部加載。可能首屏我們僅僅用到一點點css，卻在頭部加載了所有的css，造成資源的不合理加載和浪費。假如css很大，嚴重影響網頁加載速度和首屏顯示速度。
換個思路
假如不合并，單個css壓縮引用，文件大小是小了，但是請求數量多了一些。 權衡二者，并且進行性能測試對比，發現如下寫法確實比我們所有css放在頭部一次性加載，首屏顯示速度要快些：
<head></head><body> <!-- HTTP/2 push this resource, or inline it, whichever's faster --> <link rel="stylesheet" href="/site-header.css"> <header>…</header> <link rel="stylesheet" href="/article.css"> <main>…</main> <link rel="stylesheet" href="/comment.css"> <section class="comments">…</section> <link rel="stylesheet" href="/about-me.css"> <section class="about-me">…</section> <link rel="stylesheet" href="/site-footer.css"> <footer>…</footer></body>
但是還是有性能可以優化的地方！
例如：
我們首屏僅僅顯示了頭部和文章，其他模塊首屏不顯示。那么，其他模塊的css我們可以完全異步來加載。如何異步加載呢？
請看下面
loadCSS 及 Preload
關于preload,推進2篇文章給大家看下：
1、通過rel="preload"進行內容預加載： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content
2、preload 的w3文檔： https://www.w3.org/TR/preload/
對于一些不是首屏加載的css，我們可以如下寫法：
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'">
防止瀏覽器禁止js，保險起見，也可以如下：
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'"><noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>
為了避免有些瀏覽器會重新調用處理程序rel='stylesheet'這個屬性，我們一般推薦如下寫法：
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>
為了更好的兼容rel=preload，可以使用loadCSS ，github地址： https://github.com/filamentgroup/loadCSS
因此， 不考慮瀏覽器兼容問題的情況下 （考慮兼容問題，可以使用loadCss，這里不多演示），我們對上面代碼再次進行優化：
<head> <link rel="stylesheet" href="/首屏加載css.css"> <link rel="preload" href="/不是首屏加載的css.css" as="style" onload="this.onload=null;this.rel='stylesheet'"></head><body> <header>…</header> <main>…</main> <section class="comments">…</section> <section class="about-me">…</section> <footer>…</footer></body>
PS：下面看下關于html，css，js三者的加載順序問題
<head lang="en"> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/*.css"> <script src="js/*.js></script></head>
DOM文檔的加載順序是由上而下的順序加載；
1、DOM加載到link標簽
css文件的加載是與DOM的加載并行的，也就是說，css在加載時Dom還在繼續加載構建，而過程中遇到的css樣式或者img，則會向服務器發送一個請求，待資源返回后，將其添加到dom中的相對應位置中；
2、DOM加載到script標簽
由于js文件不會與DOM并行加載，因此需要等待js整個文件加載完之后才能繼續DOM的加載，倘若js腳本文件過大，則可能導致瀏覽器頁面顯示滯后，出現“假死”狀態，這種效應稱之為“阻塞效應”；會導致出現非常不好的用戶體驗；
而這個特性也是為什么在js文件中開頭需要$(document).ready(function(){})或者（function(){}）或者window.onload,即是讓DOM文檔加載完成之后才執行js文件，這樣才不會出現查找不到DOM節點等問題；
js阻塞其他資源的加載的原因是：瀏覽器為了防止js修改DOM樹，需要重新構建DOM樹的情況出現；
3、解決方法
前提，js是外部腳本；
在script標簽中添加 defer=“ture”，則會讓js與DOM并行加載，待頁面加載完成后再執行js文件，這樣則不存在阻塞；
在scirpt標簽中添加 async=“ture”，這個屬性告訴瀏覽器該js文件是異步加載執行的，也就是不依賴于其他js和css，也就是說無法保證js文件的加載順序，但是同樣有與DOM并行加載的效果；
同時使用defer和async屬性時，defer屬性會失效；
可以將scirpt標簽放在body標簽之后，這樣就不會出現加載的沖突了。
總結
以上所述是小編給大家介紹的CSS 的加載及加載順序簡介，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
