Web網頁中資源加載的優先級詳解

Web 開發中，資源加載的優先級是一個重要的優化點，可以顯著影響網頁的加載速度和用戶體驗。瀏覽器會根據一定的規則來決定哪些資源應該優先加載。以下是關于資源加載優先級的詳解：

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

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

- **HTML**：HTML 文檔本身是最先被加載的，因為它是頁面的基礎結構。

- **CSS**：CSS 文件通常優先于大多數其他資源進行加載，因為它們影響頁面的渲染。

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

- **Images**：圖片的加載優先級通常較低，尤其是那些不在可視區域內的圖片。

### 2. 影響加載優先級的因素

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

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

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

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

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

### 3. 示例代碼

```html

<!DOCTYPE html>

<head>

<title>Resource Loading Priority</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

```

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

### 4. 相關主題

1. **性能優化**：

- 合理設置資源加載的優先級可以顯著提升網頁性能。

2. **Critical Rendering Path**：

- 了解和優化關鍵渲染路徑有助于減少首次渲染時間。

3. **HTTP/2 多路復用**：

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

4. **Lazy Loading**：

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

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

- 使用 CDN 可以加速資源加載，通過更靠近用戶的節點提供靜態資源。

通過了解和優化資源加載優先級，可以顯著提升網頁的加載速度和用戶體驗，特別是針對移動設備和低帶寬環境。

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

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

原理解析

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

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

webkit渲染過程

Gecko渲染過程

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

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

從流程我們可以看出來

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

DOMContentLoaded

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

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

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

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

<!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>

實驗結果如下圖：

從動圖我們可以看出來，css還未加載完，就已經觸發了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>

實驗結果如下圖：

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

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

總結

由上所述，我們可以得出以下結論:

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

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

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

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

1.查找性能瓶頸

所有優化中最重要的事情是從全面診斷開始。幸運的是，有許多CSS診斷工具可以幫助您發現任何性能瓶頸。首先，您可以使用網絡瀏覽器的DevTools檢查資產加載的速度。在大多數瀏覽器中，您可以通過按F12按鈕打開DevTools 。

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

Pingdom Tools和Google提供的Lighthouse是開發人員經常用來分析網站速度和前端性能的另外兩個免費工具。例如，如果您運行簡單的網站速度測試，則Pingdom Tools會為您提供一些有用的CSS優化技巧。

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

2.縮小和壓縮CSS文件

大多數網站都依賴多個CSS文件。盡管在大多數情況下，模塊化CSS被認為是最佳實踐，但是加載所有文件可能需要一段時間。但是，這正是CSS縮小和壓縮工具存在的原因。如果您適當地使用它們，則可以大大縮短頁面加載時間。

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

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

3.使用Flexbox和CSS網格

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

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

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

4.使用<link>標記代替@import規則**

您可以使用兩種主要技術來使網頁加載CSS文件：

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

使用*@import *CSS規則從其他樣式表導入它們。

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

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

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

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

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

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

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

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

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

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

6.避免重要規則

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

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

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

7.考慮CSS重構

盡管CSS重構很少是一件容易的事，但在許多情況下，它可以顯著提高網站性能。例如，如果CSS文件太大，或者您繼承了舊版代碼庫，或者頁面加載時間很差，嚴重損害了轉換率。CSS重構的目標是使代碼更整潔，更可維護并且加載更快。

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

無論您有未使用或重復的CSS規則或資源，

是否可以利用Flexbox和CSS網格等更現代的技術，

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

CSS文件的結構是否合理（例如，維護較小的文件比維護較大的文件更容易），

是否值得使用自動構建工具，

還有很多其他

在開始重構之前，還應設置可衡量的目標并選擇要使用的基準，例如頁面加載時間或第一個有意義的繪制，以便您可以比較它們的前后值。

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

包起來

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

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

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Web網頁中資源加載的優先級詳解

原理解析

DOMContentLoaded

總結

您的項目需求