Web圖片資源的加載與渲染時(shí)機(jī)

waruqi 發(fā)布于2019-08-01 17:05 / 361人閱讀

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

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

瀏覽器的工作流程

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

從上圖可看出，瀏覽器加載一個(gè)HTML頁面后進(jìn)行如下操作：

解析HTML —> 構(gòu)建DOM樹

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

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

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

計(jì)算元素位置進(jìn)行布局

繪制

從上圖我們不能很直觀的看出圖片資源從什么時(shí)候開始加載，下圖標(biāo)出圖片加載和渲染的時(shí)機(jī)：

解析HTML【遇到標(biāo)簽加載圖片】 —> 構(gòu)建DOM樹

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

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

把DOM樹和樣式規(guī)則樹匹配構(gòu)建渲染樹【遍歷DOM樹時(shí)加載對(duì)應(yīng)樣式規(guī)則上的背景圖片】

計(jì)算元素位置進(jìn)行布局

繪制【開始渲染圖片】

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

頁面中不是所有的標(biāo)簽圖片和樣式表背景圖片都會(huì)加載。

display:none

圖片資源請(qǐng)求如下：

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

原理

把DOM樹和樣式規(guī)則樹匹配構(gòu)建渲染樹時(shí)，只會(huì)把可見元素和它對(duì)應(yīng)的樣式規(guī)則結(jié)合一起產(chǎn)出到渲染樹，這就意味有不可見元素，當(dāng)匹配DOM樹和樣式規(guī)則樹時(shí)，若發(fā)現(xiàn)一個(gè)元素的對(duì)應(yīng)的樣式規(guī)則上有display:none，瀏覽器會(huì)認(rèn)為該元素是不可見的，因此不會(huì)把該元素產(chǎn)出到渲染樹上。

上面代碼中，當(dāng)解析HTML時(shí)會(huì)加載標(biāo)簽元素上的圖片。

當(dāng)把DOM樹和樣式規(guī)則樹匹配構(gòu)建渲染樹時(shí)，遍歷DOM樹上的元素，發(fā)現(xiàn)元素對(duì)應(yīng)的樣式規(guī)則上有background-image屬性時(shí)會(huì)加載背景圖片，但是因?yàn)檫@個(gè)元素是不可見元素（對(duì)應(yīng)的樣式規(guī)則上有diaplay:none），不會(huì)把該元素和它對(duì)應(yīng)的樣式規(guī)則產(chǎn)出到渲染樹。

當(dāng)繪制時(shí)因?yàn)殇秩緲渖蠜]有該元素，因此不會(huì)繪制該元素的背景圖片。

圖片資源請(qǐng)求如下：

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

原理

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

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

當(dāng)繪制時(shí)也因?yàn)殇秩緲渖蠜]有設(shè)置了display:none屬性元素，也沒有改元素的子元素，因此該元素中子元素的背景圖片不會(huì)渲染出來。

重復(fù)圖片

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

圖片資源請(qǐng)求如下：

頁面中多個(gè)標(biāo)簽或樣式表中的背景圖片圖片路徑是同一個(gè)，圖片只加載一次。

原理

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

不存在元素的背景圖片

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

圖片資源請(qǐng)求如下：

不存在元素的背景圖片不會(huì)加載。

原理

不存在的元素不會(huì)產(chǎn)出到DOM樹上，構(gòu)建渲染樹過程中遍歷DOM樹時(shí)無法遍歷不存在的元素，因此不會(huì)加載圖片，也不會(huì)產(chǎn)出到渲染樹上。當(dāng)解析渲染樹時(shí)無法解析不存在的元素，不存在的元素自然也不會(huì)渲染。

偽類的背景圖片

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

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

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

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

原理

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

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

應(yīng)用 占位圖

當(dāng)使用樣式表中的背景圖片作為占位符時(shí)，要把背景圖片轉(zhuǎn)為base64格式。這是因?yàn)楸尘皥D片加載的順序在標(biāo)簽后面，背景圖片可能會(huì)在標(biāo)簽圖片加載完成后才開始加載，達(dá)不到想要的效果。

預(yù)加載

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

在這種場(chǎng)景下，我們就需要把圖片預(yù)加載，預(yù)加載有很多種方式:

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

使用上文講到的，設(shè)置了display:none屬性的元素，圖片不會(huì)渲染出來，但會(huì)加載。把要預(yù)加載的圖片加到設(shè)置了display:none的元素背景圖或標(biāo)簽里。

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

歡迎關(guān)注：Leechikit
原文鏈接：segmentfault.com
到此本文結(jié)束，歡迎提問和指正。
寫原創(chuàng)文章不易，若本文對(duì)你有幫助，請(qǐng)點(diǎn)贊、推薦和關(guān)注作者支持。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50943.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

waruqi

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

linux文件系統(tǒng)和日志分析

閱讀 1410·2021-11-25 09:43
2021年11月國(guó)產(chǎn)數(shù)據(jù)庫排行榜：openGauss闖入前三，Kingbase流行度與日俱增，TDe

閱讀 3639·2021-11-10 11:48
【STM32】位操作、按位與、按位或、按位異或、取反、左移、右移等基礎(chǔ) C 語言知識(shí)補(bǔ)充

閱讀 5283·2021-09-23 11:21
css之position定位

閱讀 1625·2019-08-30 15:55
我的白板

閱讀 3535·2019-08-30 13:53
css3中的變形（transform）、過渡（transition）、動(dòng)畫（animation）屬性

閱讀 1269·2019-08-30 10:51
CSS定位

閱讀 894·2019-08-29 14:20
HTML表格布局

閱讀 2001·2019-08-29 13:11

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

Web圖片資源的加載與渲染時(shí)機(jī)

相關(guān)文章