Web圖片資源的加載與渲染時機

BLUE 發(fā)布于2019-08-29 12:52 / 999人閱讀

摘要：此文研究頁面中的圖片資源的加載和渲染時機，使得我們能更好的管理圖片資源，避免不必要的流量和提高用戶體驗。原理不存在的元素不會產出到樹上，構建渲染樹過程中遍歷樹時無法遍歷不存在的元素，因此不會加載圖片，也不會產出到渲染樹上。

此文研究頁面中的圖片資源的加載和渲染時機，使得我們能更好的管理圖片資源，避免不必要的流量和提高用戶體驗。

瀏覽器的工作流程

要研究圖片資源的加載和渲染，我們先要了解瀏覽器的工作原理。以Webkit引擎的工作流程為例：

從上圖可看出，瀏覽器加載一個HTML頁面后進行如下操作：

解析HTML —> 構建DOM樹

加載樣式 —> 解析樣式 —> 構建樣式規(guī)則樹

加載javascript —> 執(zhí)行javascript代碼

把DOM樹和樣式規(guī)則樹匹配構建渲染樹

計算元素位置進行布局

繪制

從上圖我們不能很直觀的看出圖片資源從什么時候開始加載，下圖標出圖片加載和渲染的時機：

解析HTML【遇到標簽加載圖片】 —> 構建DOM樹

加載樣式 —> 解析樣式【遇到背景圖片鏈接不加載】 —> 構建樣式規(guī)則樹

加載javascript —> 執(zhí)行javascript代碼

把DOM樹和樣式規(guī)則樹匹配構建渲染樹【遍歷DOM樹時加載對應樣式規(guī)則上的背景圖片】

計算元素位置進行布局

繪制【開始渲染圖片】

圖片加載與渲染規(guī)則

頁面中不是所有的標簽圖片和樣式表背景圖片都會加載。

display:none

圖片資源請求如下：

設置了display:none屬性的元素，圖片不會渲染出來，但會加載。

原理

把DOM樹和樣式規(guī)則樹匹配構建渲染樹時，只會把可見元素和它對應的樣式規(guī)則結合一起產出到渲染樹，這就意味有不可見元素，當匹配DOM樹和樣式規(guī)則樹時，若發(fā)現(xiàn)一個元素的對應的樣式規(guī)則上有display:none，瀏覽器會認為該元素是不可見的，因此不會把該元素產出到渲染樹上。

上面代碼中，當解析HTML時會加載標簽元素上的圖片。

當把DOM樹和樣式規(guī)則樹匹配構建渲染樹時，遍歷DOM樹上的元素，發(fā)現(xiàn)元素對應的樣式規(guī)則上有background-image屬性時會加載背景圖片，但是因為這個元素是不可見元素（對應的樣式規(guī)則上有diaplay:none），不會把該元素和它對應的樣式規(guī)則產出到渲染樹。

當繪制時因為渲染樹上沒有該元素，因此不會繪制該元素的背景圖片。

圖片資源請求如下：

設置了display:none屬性元素的子元素，樣式表中的背景圖片不會渲染出來，也不會加載；而標簽的圖片不會渲染出來，但會加載。

原理

正如上面所說的，當匹配DOM樹和樣式規(guī)則樹時，若發(fā)現(xiàn)元素的對應的樣式規(guī)則上有display:none，瀏覽器會認為該元素的子元素是不可見的，因此不會把該元素的子元素產出到渲染樹上。

當構建渲染樹遇到了設置了display:none屬性的不可見元素時，不會繼續(xù)遍歷不可見元素的子元素，因此不會加載該元素中子元素的背景圖片。

當繪制時也因為渲染樹上沒有設置了display:none屬性元素，也沒有改元素的子元素，因此該元素中子元素的背景圖片不會渲染出來。

重復圖片

.img-blue {
    background-image: url(../image/blue.png);
}

圖片資源請求如下：

頁面中多個標簽或樣式表中的背景圖片圖片路徑是同一個，圖片只加載一次。

原理

瀏覽器請求資源時，都會先判斷是否有緩存，若有緩存且未過期則會從緩存中讀取，不會再次請求。先加載的圖片會存儲到瀏覽器緩存中，后面再次請求同路徑圖片時會直接讀取緩存中的圖片。

不存在元素的背景圖片

.img-blue {
    background-image: url(../image/blue.png);
}
.img-orange{
    background-image: url(../image/orange.png);
}

圖片資源請求如下：

不存在元素的背景圖片不會加載。

原理

不存在的元素不會產出到DOM樹上，構建渲染樹過程中遍歷DOM樹時無法遍歷不存在的元素，因此不會加載圖片，也不會產出到渲染樹上。當解析渲染樹時無法解析不存在的元素，不存在的元素自然也不會渲染。

偽類的背景圖片

.img-green {
    background-image: url(../image/green.png);
}
.img-green:hover{
    background-image: url(../image/red.png);
}

觸發(fā)hover前的圖片資源請求如下：

觸發(fā)hover后的圖片資源請求如下：

當觸發(fā)偽類的時候，偽類樣式上的背景圖片才會加載。

原理

觸發(fā)hover前，構建渲染樹過程中，遍歷DOM樹時，該元素匹配的樣式規(guī)則是無hover狀態(tài)選擇器.img-green的樣式，因此加載無hover狀態(tài)選擇器.img-green的樣式上green.png圖片。該元素是可見元素，因此會被產出到渲染樹上，繪制時渲染的也是green.png。

觸發(fā)hover后，因為.img-green:hover的優(yōu)先級比較高，構建新的渲染樹過程中，該元素匹配的是有hover狀態(tài)選擇器，因此加載有hover狀態(tài)選擇器.img-green:hover的樣式上的red.png圖片。該元素是可見元素，因此會被產出到渲染樹上，繪制時渲染的也是red.png。

應用 占位圖

當使用樣式表中的背景圖片作為占位符時，要把背景圖片轉為base64格式。這是因為背景圖片加載的順序在標簽后面，背景圖片可能會在標簽圖片加載完成后才開始加載，達不到想要的效果。

預加載

很多場景里圖片是在改變或觸發(fā)狀態(tài)后才顯示出來的，例如點擊一個Tab后，一個設置display:none隱藏的父元素變?yōu)轱@示，這個父元素里的子元素圖片會在父元素顯示后才開始加載；又如當鼠標hover到圖標后，改變圖標圖片，圖片會在hover上去后才開始加載，導致出現(xiàn)閃一下這種不友好的體驗。

在這種場景下，我們就需要把圖片預加載，預加載有很多種方式:

若是小圖標，可以合并成雪碧圖，在改變狀態(tài)前就把所有圖標都一起加載了。

使用上文講到的，設置了display:none屬性的元素，圖片不會渲染出來，但會加載。把要預加載的圖片加到設置了display:none的元素背景圖或標簽里。

在javascript創(chuàng)建img對象，把圖片url設置到img對象的src屬性里。

歡迎關注：Leechikit
原文鏈接：segmentfault.com

到此本文結束，歡迎提問和指正。
寫原創(chuàng)文章不易，若本文對你有幫助，請點贊、推薦和關注作者支持。

GPU云服務器云服務器 linux圖片的加載 js實現(xiàn)數(shù)據(jù)的懶加載圖片 webrtc與web前端的差異服務器渲染web

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112198.html

Web圖片資源的加載與渲染時機

摘要：此文研究頁面中的圖片資源的加載和渲染時機，使得我們能更好的管理圖片資源，避免不必要的流量和提高用戶體驗。原理不存在的元素不會產出到樹上，構建渲染樹過程中遍歷樹時無法遍歷不存在的元素，因此不會加載圖片，也不會產出到渲染樹上。此文研究頁面中的圖片資源的加載和渲染時機，使得我們能更好的管理圖片資源，避免不必要的流量和提高用戶體驗。瀏覽器的工作流程要研究圖片資源的加載和渲染，我們先要了解...

waruqi 2019-08-01 17:05 評論0 收藏0
Web 前端性能分析（一）

摘要：參考鏈接初探監(jiān)控網(wǎng)頁與程序性能使用簡潔的測試網(wǎng)頁加載速度前端性能統(tǒng)計前端性能監(jiān)控起步使用性能快速分析前端性能通過以上幾篇文章，可以對前端性能相關的概念和有一個整體的認識。但在我們這次的前端性能監(jiān)控方案中，并不將其作為主要的監(jiān)控指標。參考鏈接初探 performance – 監(jiān)控網(wǎng)頁與程序性能使用簡潔的 Navigation Timing API 測試網(wǎng)頁加載速度前端性能統(tǒng)計 ...

Ashin 2019-08-23 16:22 評論0 收藏0
前端性能優(yōu)化

摘要：端優(yōu)談談關于前端的緩存的問題我們都知道對頁面進行緩存能夠有利于減少請求發(fā)送，從而達到對頁面的優(yōu)化。而作為一名有追求的前端，勢必要力所能及地優(yōu)化我們前端頁面的性能。這種方式主要解決了淺談前端中的過早優(yōu)化問題過早優(yōu)化是萬惡之源。優(yōu)化向：單頁應用多路由預渲染指南 Ajax 技術的出現(xiàn)，讓我們的 Web 應用能夠在不刷新的狀態(tài)下顯示不同頁面的內容，這就是單頁應用。在一個單頁應用中，往往只有一...

Dean 2019-08-21 18:19 評論0 收藏0
Web性能優(yōu)化

摘要：性能優(yōu)化網(wǎng)站的性能細線在幾個方面網(wǎng)站首頁加載速度動畫的流暢度通過分析瀏覽器的渲染原理資源對渲染的影響，得出優(yōu)化網(wǎng)站性能的辦法。查看性能的工具的面板錄制網(wǎng)頁加載的過程，分析記錄瀏覽器渲染過程中每個過程的耗時。通過引入，可以避免阻塞。 1 Web性能優(yōu)化 Web網(wǎng)站的性能細線在幾個方面：網(wǎng)站首頁加載速度動畫的流暢度通過分析瀏覽器的渲染原理、資源對渲染的影響，得出優(yōu)化網(wǎng)站性能的辦法...

ZHAO_ 2019-08-21 11:39 評論0 收藏0
web解析過程

摘要：所以選擇器嵌套層次越深，匹配的時間會越長。加載會阻塞初次渲染對于首頁無關的樣式，需要使用適當?shù)姆绞奖苊馄渥枞醮武秩緯枞撁娉醮武秩臼褂妹襟w查詢，雖然加載樣式表，但只針對打印時才應用該樣式，不會阻塞初次渲染。通過引入，可以避免阻塞。瀏覽器渲染原理showImg(https://segmentfault.com/img/bVNlgX?w=301&h=300); DOM解析 DOM樹構...

MiracleWong 2019-08-01 16:48 評論0 收藏0