Web網(wǎng)頁中資源加載的優(yōu)先級詳解

Web 開發(fā)中，資源加載的優(yōu)先級是一個重要的優(yōu)化點，可以顯著影響網(wǎng)頁的加載速度和用戶體驗。瀏覽器會根據(jù)一定的規(guī)則來決定哪些資源應(yīng)該優(yōu)先加載。以下是關(guān)于資源加載優(yōu)先級的詳解：

### 1. 瀏覽器的資源加載順序

瀏覽器在解析 HTML 文檔時，會按照以下優(yōu)先級加載資源：

- **HTML**：HTML 文檔本身是最先被加載的，因為它是頁面的基礎(chǔ)結(jié)構(gòu)。

- **CSS**：CSS 文件通常優(yōu)先于大多數(shù)其他資源進(jìn)行加載，因為它們影響頁面的渲染。

- **JavaScript**：JavaScript 的加載優(yōu)先級通常較低，特別是在不影響頁面初始渲染的情況下。

- **Images**：圖片的加載優(yōu)先級通常較低，尤其是那些不在可視區(qū)域內(nèi)的圖片。

### 2. 影響加載優(yōu)先級的因素

- **位置**：資源在 HTML 中的位置會影響其加載優(yōu)先級。例如，`<link>` 和 `<script>` 標(biāo)簽位于 `<head>` 中的資源會比位于 `<body>` 末尾的資源更早加載。

- **異步與延遲**：使用 `async` 和 `defer` 屬性可以改變 JavaScript 的加載和執(zhí)行順序。

- `async`：異步加載并立即執(zhí)行腳本，不會阻塞 HTML 解析。

- `defer`：異步加載但會在 HTML 解析完成后按順序執(zhí)行。

- **預(yù)加載和預(yù)獲取**：使用 `<link rel="preload">` 和 `<link rel="prefetch">` 可以顯式地告訴瀏覽器應(yīng)該提前加載或獲取某些資源。

### 3. 示例代碼

```html

<!DOCTYPE html>

<head>

<title>Resource Loading Priority</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

```

- **邏輯解釋**：在這個示例中，CSS 樣式表首先加載，`large-image.jpg` 被預(yù)加載以便頁面渲染時更快顯示，JavaScript 腳本在 HTML 完全解析后按順序執(zhí)行。

### 4. 相關(guān)主題

1. **性能優(yōu)化**：

- 合理設(shè)置資源加載的優(yōu)先級可以顯著提升網(wǎng)頁性能。

2. **Critical Rendering Path**：

- 了解和優(yōu)化關(guān)鍵渲染路徑有助于減少首次渲染時間。

3. **HTTP/2 多路復(fù)用**：

- HTTP/2 的多路復(fù)用特性允許多個請求同時通過單個連接傳輸，提升資源加載效率。

4. **Lazy Loading**：

- 對于圖片和 iframe 等資源，使用懶加載（Lazy Loading）可以推遲資源加載，減少初始加載時間。

5. **Content Delivery Network (CDN)**：

- 使用 CDN 可以加速資源加載，通過更靠近用戶的節(jié)點提供靜態(tài)資源。

通過了解和優(yōu)化資源加載優(yōu)先級，可以顯著提升網(wǎng)頁的加載速度和用戶體驗，特別是針對移動設(shè)備和低帶寬環(huán)境。

我的文章可能還有不足之處，如有不同意見，請留言討論。

能大家都知道，js執(zhí)行會阻塞DOM樹的解析和渲染，那么css加載會阻塞DOM樹的解析和渲染嗎？接下來，我們就一起來分析一下。

原理解析

那么為什么會出現(xiàn)上面的現(xiàn)象呢？我們從瀏覽器的渲染過程來解析下。

不同的瀏覽器使用的內(nèi)核不同，所以他們的渲染過程也是不一樣的。目前主要有兩個：

webkit渲染過程

Gecko渲染過程

從上面兩個流程圖我們可以看出來，瀏覽器渲染的流程如下：

HTML解析文件，生成DOM Tree，解析CSS文件生成CSSOM Tree
將Dom Tree和CSSOM Tree結(jié)合，生成Render Tree(渲染樹)
根據(jù)Render Tree渲染繪制，將像素渲染到屏幕上。

從流程我們可以看出來

DOM解析和CSS解析是兩個并行的進(jìn)程，所以這也解釋了為什么CSS加載不會阻塞DOM的解析。
然而，由于Render Tree是依賴于DOM Tree和CSSOM Tree的，所以他必須等待到CSSOM Tree構(gòu)建完成，也就是CSS資源加載完成(或者CSS資源加載失敗)后，才能開始渲染。因此，CSS加載是會阻塞Dom的渲染的。
由于js可能會操作之前的Dom節(jié)點和css樣式，因此瀏覽器會維持html中css和js的順序。因此，樣式表會在后面的js執(zhí)行前先加載執(zhí)行完畢。所以css會阻塞后面js的執(zhí)行。

DOMContentLoaded

對于瀏覽器來說，頁面加載主要有兩個事件，一個是DOMContentLoaded，另一個是onLoad。而onLoad沒什么好說的，就是等待頁面的所有資源都加載完成才會觸發(fā)，這些資源包括css、js、圖片視頻等。

而DOMContentLoaded，顧名思義，就是當(dāng)頁面的內(nèi)容解析完成后，則觸發(fā)該事件。那么，正如我們上面討論過的，css會阻塞Dom渲染和js執(zhí)行，而js會阻塞Dom解析。那么我們可以做出這樣的假設(shè)

當(dāng)頁面只存在css，或者js都在css前面，那么DomContentLoaded不需要等到css加載完畢。
當(dāng)頁面里同時存在css和js，并且js在css后面的時候，DomContentLoaded必須等到css和js都加載完畢才觸發(fā)。

我們先對第一種情況做測試：

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>css阻塞</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script>
 document.addEventListener('DOMContentLoaded', function() {
 console.log('DOMContentLoaded');
 })
 </script>
 <link  rel="stylesheet">
 </head>
 <body>
 </body>
</html>

實驗結(jié)果如下圖：

從動圖我們可以看出來，css還未加載完，就已經(jīng)觸發(fā)了DOMContentLoaded事件了。因為css后面沒有任何js代碼。

接下來我們對第二種情況做測試，很簡單，就在css后面加一行代碼就行了

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>css阻塞</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <script>
 document.addEventListener('DOMContentLoaded', function() {
 console.log('DOMContentLoaded');
 })
 </script>
 <link  rel="stylesheet">
 <script>
 console.log('到我了沒');
 </script>
 </head>
 <body>
 </body>
</html>

實驗結(jié)果如下圖：

我們可以看到，只有在css加載完成后，才會觸發(fā)DOMContentLoaded事件。因此，我們可以得出結(jié)論：

如果頁面中同時存在css和js，并且存在js在css后面，則DOMContentLoaded事件會在css加載完后才執(zhí)行。
其他情況下，DOMContentLoaded都不會等待css加載，并且DOMContentLoaded事件也不會等待圖片、視頻等其他資源加載。

總結(jié)

由上所述，我們可以得出以下結(jié)論:

css加載不會阻塞DOM樹的解析
css加載會阻塞DOM樹的渲染
css加載會阻塞后面js語句的執(zhí)行、

因此，為了避免讓用戶看到長時間的白屏?xí)r間，我們應(yīng)該盡可能的提高css加載速度，比如可以使用以下幾種方法:

使用CDN(因為CDN會根據(jù)你的網(wǎng)絡(luò)狀況，替你挑選最近的一個具有緩存內(nèi)容的節(jié)點為你提供資源，因此可以減少加載時間)
對css進(jìn)行壓縮(可以用很多打包工具，比如webpack,gulp等，也可以通過開啟gzip壓縮)
合理的使用緩存(設(shè)置cache-control,expires,以及E-tag都是不錯的，不過要注意一個問題，就是文件更新后，你要避免緩存而帶來的影響。其中一個解決防范是在文件名字后面加一個版本號)
減少http請求數(shù)，將多個css文件合并，或者是干脆直接寫成內(nèi)聯(lián)樣式(內(nèi)聯(lián)樣式的一個缺點就是不能緩存)

今的網(wǎng)絡(luò)中，頁面加載速度是最重要的網(wǎng)站指標(biāo)之一。即使是毫秒也會對用戶體驗、產(chǎn)品產(chǎn)生巨大影響，而緩慢的頁面加載會輕易的的降低轉(zhuǎn)化率。您可以采用許多工具和技術(shù)來加快網(wǎng)站速度。在本文中，我們將介紹可用于改善前端性能的最佳CSS優(yōu)化技巧。

1.查找性能瓶頸

所有優(yōu)化中最重要的事情是從全面診斷開始。幸運(yùn)的是，有許多CSS診斷工具可以幫助您發(fā)現(xiàn)任何性能瓶頸。首先，您可以使用網(wǎng)絡(luò)瀏覽器的DevTools檢查資產(chǎn)加載的速度。在大多數(shù)瀏覽器中，您可以通過按F12按鈕打開DevTools 。

例如，在Firefox DevTools中，可以使用“ 網(wǎng)絡(luò)”選項卡檢查頁面加載的所有CSS文件的大小和加載時間。您還可以測試使用和不使用緩存時CSS加載的速度。由于DevTools還顯示了外部CSS，例如Google字體文件和從第三方CDN提取的CSS資源，因此您可以找到許多您以前都不知道的資源。

Pingdom Tools和Google提供的Lighthouse是開發(fā)人員經(jīng)常用來分析網(wǎng)站速度和前端性能的另外兩個免費(fèi)工具。例如，如果您運(yùn)行簡單的網(wǎng)站速度測試，則Pingdom Tools會為您提供一些有用的CSS優(yōu)化技巧。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費(fèi)獲取。

2.縮小和壓縮CSS文件

大多數(shù)網(wǎng)站都依賴多個CSS文件。盡管在大多數(shù)情況下，模塊化CSS被認(rèn)為是最佳實踐，但是加載所有文件可能需要一段時間。但是，這正是CSS縮小和壓縮工具存在的原因。如果您適當(dāng)?shù)厥褂盟鼈儯瑒t可以大大縮短頁面加載時間。

有一些在線工具，例如CSS Minify，可讓您通過將其復(fù)制粘貼為簡單形式來縮小CSS文件的大小。這種類型的工具可以與較小的項目很好地配合。但是，對于帶有多個CSS文件的大型項目，使用它們會變得很麻煩且耗時。在這種情況下，最好選擇自動化解決方案。

如今，大多數(shù)構(gòu)建工具可讓您在代碼庫上自動執(zhí)行壓縮。例如，默認(rèn)情況下，Webpack將所有文件作為縮小的包返回。PostCSS還具有諸如CSS Nano之類的智能插件，它們不僅可以縮小文件的大小，還可以通過許多有針對性的優(yōu)化來運(yùn)行它。

3.使用Flexbox和CSS網(wǎng)格

如果在編寫CSS時仍僅依靠傳統(tǒng)的框模型，并使用邊距，填充和浮點在屏幕上對齊項目，則應(yīng)考慮采用更現(xiàn)代的布局模塊，即flexbox和CSS Grid。這些新模型使您可以用更少的代碼來實現(xiàn)復(fù)雜的布局。

使用較舊的技術(shù)，您甚至需要進(jìn)行許多技巧和調(diào)整，即使是比較簡單的事情，例如將項目垂直居中。但是，flexbox和CSS Grid并非如此。盡管拾取新的布局模塊可能要花費(fèi)一些時間，但還是值得的，因為CSS文件要小得多。flexbox尤其如此，到目前為止，flexbox具有相當(dāng)不錯的瀏覽器支持（目前全球支持 98.3％）。

盡管瀏覽器對CSS Grid的支持還不夠完善（目前占全球的92.03％），但如果不必支持舊版瀏覽器或愿意提供后備功能，則仍然可以使用它。

4.使用<link>標(biāo)記代替@import規(guī)則**

您可以使用兩種主要技術(shù)來使網(wǎng)頁加載CSS文件：

使用<link>標(biāo)記將它們添加到HTML頁面的<head>部分，

使用*@import *CSS規(guī)則從其他樣式表導(dǎo)入它們。

您需要將@import規(guī)則添加到主CSS文件的頂部。在大多數(shù)情況下，它用于加載較小的資源，例如字體和其他設(shè)計元素。最初，這似乎是一個不錯的解決方案，但是，與HTML頁面使用<link>標(biāo)記直接加載樣式表相比，瀏覽器加載額外的樣式表所花的時間要長得多。

當(dāng)您在HTML頁面中添加多個CSS文件時，請務(wù)必注意CSS特殊性。首先添加最通用的樣式表，然后再選擇更具體的樣式表。您需要這樣做，因為以后添加的樣式表會覆蓋以前的CSS文件的規(guī)則。例如，以下示例以正確的順序添加CSS文件時：

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="component.css">

5.使用漸變和SVG代替圖像

將所有圖像加載到網(wǎng)頁上可能要花費(fèi)大量時間。開發(fā)人員使用許多圖像優(yōu)化技術(shù)來減輕這種影響，例如從外部CDN加載圖像或使用諸如TinyJPG之類的圖像壓縮工具。這些解決方案可以提供很多幫助，但是很多時候，您都可以使用原生CSS效果替換大量資源的JPG和PNG圖像。

例如，您可以使用漸變來代替背景圖像，而背景圖像可能會大大降低用戶瀏覽器的速度。您可以使用CSS的漸變功能來創(chuàng)建線性，徑向和重復(fù)漸變。使用這些CSS原生功能，您不僅可以定義顏色，還可以定義漸變的角度。

例如，以下規(guī)則創(chuàng)建了一個很好的漸變背景，其加載速度比任何圖像都要快：

div {
    background: linear-gradient(45deg, lightgreen, royalblue);
}

對于更復(fù)雜的漸變和紋理，還可以使用CSSmatic（在下圖顯示）和ColorZilla這樣的生成器。

除漸變外，您還可以使用可縮放矢量圖形（SVG）替換傳統(tǒng)的JPG和PNG圖像。它們不僅加載速度更快，而且您只需要包含該圖像的一個版本。這是因為SVG由于其向量性質(zhì)而可以按比例放大到任何大小而沒有任何質(zhì)量損失。此外，您也可以使用CSS設(shè)置SVG的樣式，就像普通的HTML文件一樣。

6.避免重要規(guī)則

盡管！important規(guī)則在某些情況下可能是天賜之物，但您僅應(yīng)將其作為最后的選擇。此規(guī)則從級聯(lián)中創(chuàng)建一個異常。因此，當(dāng)您在CSS聲明中添加！important時，它將覆蓋所有其他聲明，即使是那些具有更高特異性的聲明。它的語法如下所示：

h1{
  margin-bottom: 20px!important;
}

如果CSS中有太多重要規(guī)則，則用戶的瀏覽器將不得不對代碼進(jìn)行額外的檢查，這可能會大大降低頁面速度。根據(jù)經(jīng)驗，切勿在整個站點范圍的CSS或創(chuàng)建主題或插件時使用！important。如果可能，請僅在要覆蓋來自第三方庫的CSS時使用它。

7.考慮CSS重構(gòu)

盡管CSS重構(gòu)很少是一件容易的事，但在許多情況下，它可以顯著提高網(wǎng)站性能。例如，如果CSS文件太大，或者您繼承了舊版代碼庫，或者頁面加載時間很差，嚴(yán)重?fù)p害了轉(zhuǎn)換率。CSS重構(gòu)的目標(biāo)是使代碼更整潔，更可維護(hù)并且加載更快。

CSS重構(gòu)是一個多步驟的過程，在此過程中，您需要分析CSS代碼庫的各個方面。您需要檢查幾件不同的事情，例如：

無論您有未使用或重復(fù)的CSS規(guī)則或資源，

是否可以利用Flexbox和CSS網(wǎng)格等更現(xiàn)代的技術(shù)，

是否使用過多的特異性（可以使用此視覺特異性計算器進(jìn)行計算），

CSS文件的結(jié)構(gòu)是否合理（例如，維護(hù)較小的文件比維護(hù)較大的文件更容易），

是否值得使用自動構(gòu)建工具，

還有很多其他

在開始重構(gòu)之前，還應(yīng)設(shè)置可衡量的目標(biāo)并選擇要使用的基準(zhǔn)，例如頁面加載時間或第一個有意義的繪制，以便您可以比較它們的前后值。

同樣不要忘記使用版本控制工具，例如Git。這樣，如果出現(xiàn)任何問題，您可以返回到以前的代碼版本。

包起來

您可以使用許多CSS優(yōu)化技巧來改善網(wǎng)站的性能。它們中的大多數(shù)易于實現(xiàn)，但會對頁面加載時間產(chǎn)生重大影響。更快的加載頁面不僅可以增強(qiáng)用戶體驗，還可以幫助您在Google和其他搜索引擎中獲得更好的排名。

除了CSS優(yōu)化最佳實踐之外，您還可以使用許多其他技術(shù)來提高加載速度，例如緩存，Google AMP和HTTPS協(xié)議。

作者：游X魚
鏈接：https://www.jianshu.com/p/69198ac60e53

在線咨詢

上一篇：常見視頻格式解析與區(qū)別
下一篇：JSP：優(yōu)缺點、生命周期的核心4步、基于生命周期的代

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Web網(wǎng)頁中資源加載的優(yōu)先級詳解

原理解析

DOMContentLoaded

總結(jié)

您的項目需求