建站
咨詢
售后
建站咨詢
新聞中心
此文研究頁面中的圖片資源的加載和渲染時機(jī)，使得我們能更好的管理圖片資源，避免不必要的流量和提高用戶體驗(yàn)。
瀏覽器的工作流程
要研究圖片資源的加載和渲染，我們先要了解瀏覽器的工作原理。以Webkit引擎的工作流程為例：
從上圖可看出，瀏覽器加載一個HTML頁面后進(jìn)行如下操作：
- 解析HTML —> 構(gòu)建DOM樹
- 加載樣式 —> 解析樣式 —> 構(gòu)建樣式規(guī)則樹
- 加載javascript —> 執(zhí)行javascript代碼
- 把DOM樹和樣式規(guī)則樹匹配構(gòu)建渲染樹
- 計算元素位置進(jìn)行布局
- 繪制
從上圖我們不能很直觀的看出圖片資源從什么時候開始加載，下圖標(biāo)出圖片加載和渲染的時機(jī)：
- 解析HTML【遇到
標(biāo)簽加載圖片】 —> 構(gòu)建DOM樹
- 加載樣式 —> 解析樣式【遇到背景圖片鏈接不加載】 —> 構(gòu)建樣式規(guī)則樹
- 加載javascript —> 執(zhí)行javascript代碼
- 把DOM樹和樣式規(guī)則樹匹配構(gòu)建渲染樹【加載渲染樹上的背景圖片】
- 計算元素位置進(jìn)行布局
- 繪制【開始渲染圖片】
圖片加載與渲染規(guī)則
頁面中不是所有的標(biāo)簽圖片和樣式表背景圖片都會加載。
display:none
圖片資源請求如下：
設(shè)置了display:none屬性的元素，圖片不會渲染出來，但會加載。
原理
把DOM樹和樣式規(guī)則樹匹配構(gòu)建渲染樹時，會把可渲染元素上的所有屬性(如display:none屬性和background-image屬性)結(jié)合一起產(chǎn)出到渲染樹。
當(dāng)解析渲染樹時會加載標(biāo)簽元素上的圖片，發(fā)現(xiàn)元素上有background-image屬性時會加載背景圖片。
當(dāng)繪制時發(fā)現(xiàn)元素上有display:none屬性，則不計算該元素位置，也不會繪制該元素。
圖片資源請求如下：
設(shè)置了display:none屬性元素的子元素，樣式表中的背景圖片不會渲染出來，也不會加載;而標(biāo)簽的圖片不會渲染出來，但會加載。
原理
正如上面所說的，構(gòu)建渲染樹時，只會把可渲染元素產(chǎn)出到渲染樹，這就意味有不可渲染元素，當(dāng)匹配DOM樹和樣式規(guī)則樹時，若發(fā)現(xiàn)一個元素的屬性上有display:none，瀏覽器會認(rèn)為該元素的子元素是不可渲染的，因此不會把該元素的子元素產(chǎn)出到渲染樹上。
當(dāng)解析渲染樹時渲染樹上沒有設(shè)置了display:none屬性元素的子元素，因此不會加載該元素中子元素的背景圖片。
當(dāng)繪制時也因?yàn)殇秩緲渖蠜]有設(shè)置了display:none屬性元素的子元素，因此該元素中子元素的背景圖片不會渲染出來。
重復(fù)圖片
- .img-blue {
- background-image: url(../image/blue.png);
- }
圖片資源請求如下：
頁面中多個標(biāo)簽或樣式表中的背景圖片圖片路徑是同一個，圖片只加載一次。
原理
瀏覽器請求資源時，都會先判斷是否有緩存，若有緩存且未過期則會從緩存中讀取，不會再次請求。先加載的圖片會存儲到瀏覽器緩存中，后面再次請求同路徑圖片時會直接讀取緩存中的圖片。
不存在元素的背景圖片
- .img-blue {
- background-image: url(../image/blue.png);
- }
- .img-orange{
- background-image: url(../image/orange.png);
- }
圖片資源請求如下：
不存在元素的背景圖片不會加載。
原理
不存在的元素不會產(chǎn)出到DOM樹上，因此渲染樹上也不會有不存在的元素，當(dāng)解析渲染樹時無法解析不存在的元素，不存在的元素上的圖片自然不會加載也不會渲染。
偽類的背景圖片
- .img-green {
- background-image: url(../image/green.png);
- }
- .img-green:hover{
- background-image: url(../image/red.png);
- }
觸發(fā)hover前的圖片資源請求如下：
觸發(fā)hover后的圖片資源請求如下：
當(dāng)觸發(fā)偽類的時候，偽類樣式上的背景圖片才會加載。
原理
觸發(fā)hover前，DOM樹與樣式規(guī)則樹匹配的是無hover狀態(tài)選擇器.img-green的樣式，因此渲染樹上background-image屬性的值是url(../image/green.png)，解析渲染樹時加載的是green.png，繪制時渲染的也是green.png。
觸發(fā)hover后，因?yàn)?img-green:hover的優(yōu)先級比較高，因此DOM樹與樣式規(guī)則樹匹配的是有hover狀態(tài)選擇器.img-green:hover的樣式，渲染樹上background-image屬性的值是url(../image/red.png)，解析渲染樹時加載的是red.png，繪制時渲染的也是red.png。
應(yīng)用
占位圖
當(dāng)使用樣式表中的背景圖片作為占位符時，要把背景圖片轉(zhuǎn)為base64格式。這是因?yàn)楸尘皥D片加載的順序在標(biāo)簽后面，背景圖片可能會在標(biāo)簽圖片加載完成后才開始加載，達(dá)不到想要的效果。
預(yù)加載
很多場景里圖片是在改變或觸發(fā)狀態(tài)后才顯示出來的，例如點(diǎn)擊一個Tab后，一個設(shè)置display:none隱藏的父元素變?yōu)轱@示，這個父元素里的子元素圖片會在父元素顯示后才開始加載;又如當(dāng)鼠標(biāo)hover到圖標(biāo)后，改變圖標(biāo)圖片，圖片會在hover上去后才開始加載，導(dǎo)致出現(xiàn)閃一下這種不友好的體驗(yàn)。
在這種場景下，我們就需要把圖片預(yù)加載，預(yù)加載有很多種方式:
- 若是小圖標(biāo)，可以合并成雪碧圖，在改變狀態(tài)前就把所有圖標(biāo)都一起加載了。
- 使用上文講到的，設(shè)置了display:none屬性的元素，圖片不會渲染出來，但會加載。把要預(yù)加載的圖片加到設(shè)置了display:none的元素背景圖或標(biāo)簽里。
- 在javascript創(chuàng)建img對象，把圖片url設(shè)置到img對象的src屬性里。
分享標(biāo)題：Web圖片資源的加載與渲染時機(jī)
轉(zhuǎn)載注明：http://www.dlmjj.cn/article/cdicjds.html
