CSS 的加載及加載順序簡(jiǎn)介
我要評(píng)論前言
關(guān)于前端css性能優(yōu)化，網(wǎng)上很多類似文章，我之前也寫過(guò)，《 網(wǎng)站前端性能優(yōu)化之javascript和css 》，感興趣的可以去看下。今天我們舊事重提，再來(lái)談?wù)刢ss的加載，及加載順序。
通常的css加載順序
一般情況下，我們css樣式表是放在頭部，同時(shí)為了減少請(qǐng)求，我們通常對(duì)css進(jìn)行一個(gè)合并壓縮。 目前我們css一般是如下加載的：
<head> <link rel="stylesheet" href="/all-of-my-styles.css"> </head> <body> …content… </body>
這樣可以，但是有幾個(gè)性能問(wèn)題，我們可以繼續(xù)優(yōu)化：
問(wèn)題：
所有的css都合并壓縮成一個(gè)文件，放在頁(yè)面頭部加載?？赡苁灼廖覀儍H僅用到一點(diǎn)點(diǎn)css，卻在頭部加載了所有的css，造成資源的不合理加載和浪費(fèi)。假如css很大，嚴(yán)重影響網(wǎng)頁(yè)加載速度和首屏顯示速度。
換個(gè)思路
假如不合并，單個(gè)css壓縮引用，文件大小是小了，但是請(qǐng)求數(shù)量多了一些。 權(quán)衡二者，并且進(jìn)行性能測(cè)試對(duì)比，發(fā)現(xiàn)如下寫法確實(shí)比我們所有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>
但是還是有性能可以優(yōu)化的地方！
例如：
我們首屏僅僅顯示了頭部和文章，其他模塊首屏不顯示。那么，其他模塊的css我們可以完全異步來(lái)加載。如何異步加載呢？
請(qǐng)看下面
loadCSS 及 Preload
關(guān)于preload,推進(jìn)2篇文章給大家看下：
1、通過(guò)rel="preload"進(jìn)行內(nèi)容預(yù)加載： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content
2、preload 的w3文檔： https://www.w3.org/TR/preload/
對(duì)于一些不是首屏加載的css，我們可以如下寫法：
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'">
防止瀏覽器禁止js，保險(xiǎn)起見(jiàn)，也可以如下：
<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>
為了避免有些瀏覽器會(huì)重新調(diào)用處理程序rel='stylesheet'這個(gè)屬性，我們一般推薦如下寫法：
<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
因此， 不考慮瀏覽器兼容問(wèn)題的情況下 （考慮兼容問(wèn)題，可以使用loadCss，這里不多演示），我們對(duì)上面代碼再次進(jìn)行優(yōu)化：
<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：下面看下關(guān)于html，css，js三者的加載順序問(wèn)題
<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標(biāo)簽
css文件的加載是與DOM的加載并行的，也就是說(shuō)，css在加載時(shí)Dom還在繼續(xù)加載構(gòu)建，而過(guò)程中遇到的css樣式或者img，則會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求，待資源返回后，將其添加到dom中的相對(duì)應(yīng)位置中；
2、DOM加載到script標(biāo)簽
由于js文件不會(huì)與DOM并行加載，因此需要等待js整個(gè)文件加載完之后才能繼續(xù)DOM的加載，倘若js腳本文件過(guò)大，則可能導(dǎo)致瀏覽器頁(yè)面顯示滯后，出現(xiàn)“假死”狀態(tài)，這種效應(yīng)稱之為“阻塞效應(yīng)”；會(huì)導(dǎo)致出現(xiàn)非常不好的用戶體驗(yàn)；
而這個(gè)特性也是為什么在js文件中開(kāi)頭需要$(document).ready(function(){})或者（function(){}）或者window.onload,即是讓DOM文檔加載完成之后才執(zhí)行js文件，這樣才不會(huì)出現(xiàn)查找不到DOM節(jié)點(diǎn)等問(wèn)題；
js阻塞其他資源的加載的原因是：瀏覽器為了防止js修改DOM樹(shù)，需要重新構(gòu)建DOM樹(shù)的情況出現(xiàn)；
3、解決方法
前提，js是外部腳本；
在script標(biāo)簽中添加 defer=“ture”，則會(huì)讓js與DOM并行加載，待頁(yè)面加載完成后再執(zhí)行js文件，這樣則不存在阻塞；
在scirpt標(biāo)簽中添加 async=“ture”，這個(gè)屬性告訴瀏覽器該js文件是異步加載執(zhí)行的，也就是不依賴于其他js和css，也就是說(shuō)無(wú)法保證js文件的加載順序，但是同樣有與DOM并行加載的效果；
同時(shí)使用defer和async屬性時(shí)，defer屬性會(huì)失效；
可以將scirpt標(biāo)簽放在body標(biāo)簽之后，這樣就不會(huì)出現(xiàn)加載的沖突了。
總結(jié)
以上所述是小編給大家介紹的CSS 的加載及加載順序簡(jiǎn)介，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
CSS心形加載的動(dòng)畫源碼的實(shí)現(xiàn)
這篇文章主要介紹了CSS心形加載的動(dòng)畫源碼的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-08-10
這篇文章主要介紹了CSS動(dòng)態(tài)條形加載條效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-07
實(shí)現(xiàn)點(diǎn)擊按鈕后CSS加載效果的實(shí)現(xiàn)
這篇文章主要介紹了實(shí)現(xiàn)點(diǎn)擊按鈕后CSS加載效果的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2019-05-09
可能大家都知道，js執(zhí)行會(huì)阻塞DOM樹(shù)的解析和渲染，那么css加載會(huì)阻塞DOM樹(shù)的解析和渲染嗎？下面就跟隨小編一起來(lái)了解一下2019-02-13
基于CSS制作創(chuàng)意端午節(jié)專屬加載特效
本文給大家分享的是一個(gè)css創(chuàng)意特效端午加載動(dòng)畫，想法是讓粽葉，糯米，紅棗繞圓旋轉(zhuǎn)，然后聚集起來(lái)融合后變成一個(gè)可愛(ài)的小粽子的效果，對(duì)css加載特效實(shí)現(xiàn)代碼感興趣的朋友2022-05-31
