整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

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

          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>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <link rel="stylesheet" href="style.css">

          <link rel="preload" href="large-image.jpg" as="image">

          <title>Resource Loading Priority</title>

          </head>

          <body>

          <h1>Hello World</h1>

          <img src="large-image.jpg" alt="Large Image">

          <script src="script.js" defer></script>

          </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渲染過程

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

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

          從流程我們可以看出來

          1. DOM解析和CSS解析是兩個并行的進(jìn)程,所以這也解釋了為什么CSS加載不會阻塞DOM的解析。
          2. 然而,由于Render Tree是依賴于DOM Tree和CSSOM Tree的,所以他必須等待到CSSOM Tree構(gòu)建完成,也就是CSS資源加載完成(或者CSS資源加載失敗)后,才能開始渲染。因此,CSS加載是會阻塞Dom的渲染的。
          3. 由于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è)

          1. 當(dāng)頁面只存在css,或者js都在css前面,那么DomContentLoaded不需要等到css加載完畢。
          2. 當(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é)論:

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

          總結(jié)

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

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

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

          1. 使用CDN(因為CDN會根據(jù)你的網(wǎng)絡(luò)狀況,替你挑選最近的一個具有緩存內(nèi)容的節(jié)點為你提供資源,因此可以減少加載時間)
          2. 對css進(jìn)行壓縮(可以用很多打包工具,比如webpack,gulp等,也可以通過開啟gzip壓縮)
          3. 合理的使用緩存(設(shè)置cache-control,expires,以及E-tag都是不錯的,不過要注意一個問題,就是文件更新后,你要避免緩存而帶來的影響。其中一個解決防范是在文件名字后面加一個版本號)
          4. 減少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


          主站蜘蛛池模板: 无码人妻AⅤ一区二区三区| 伊人色综合视频一区二区三区| 中文字幕一区在线观看视频| 免费人妻精品一区二区三区| 2021国产精品一区二区在线| 中文字幕一区二区三区免费视频| 日本一区二区三区不卡在线视频| 91午夜精品亚洲一区二区三区 | 冲田杏梨高清无一区二区| 国产91大片精品一区在线观看| 国产精品毛片VA一区二区三区| 亚洲国产成人久久综合一区77| 国产a久久精品一区二区三区| 国模无码视频一区二区三区| 国产一区二区三区播放心情潘金莲| 在线日产精品一区| 日韩一区二区在线播放| 国产精品高清一区二区三区不卡| 国产高清视频一区三区| 国产高清视频一区三区| 91秒拍国产福利一区| 末成年女AV片一区二区| AV鲁丝一区鲁丝二区鲁丝三区| 久久精品无码一区二区WWW| 久久无码AV一区二区三区 | asmr国产一区在线| 亚洲国产成人久久一区WWW| 肥臀熟女一区二区三区 | 国产乱码精品一区二区三区四川人| 中文字幕av一区| 国产免费av一区二区三区| 国产亚洲福利一区二区免费看| 国产一区二区三区美女| 国产高清在线精品一区小说| 国产在线精品一区二区夜色 | 久久久国产精品亚洲一区 | 国产麻豆精品一区二区三区| 色噜噜一区二区三区| 国产综合一区二区| 亚洲一区二区三区在线观看网站| 国产成人欧美一区二区三区|