資訊專欄INFORMATION COLUMN
摘要：此文研究頁面中的圖片資源的加載和渲染時機，使得我們能更好的管理圖片資源，避免不必要的流量和提高用戶體驗。原理不存在的元素不會產出到樹上，構建渲染樹過程中遍歷樹時無法遍歷不存在的元素，因此不會加載圖片，也不會產出到渲染樹上。
此文研究頁面中的圖片資源的加載和渲染時機，使得我們能更好的管理圖片資源，避免不必要的流量和提高用戶體驗。
瀏覽器的工作流程要研究圖片資源的加載和渲染，我們先要了解瀏覽器的工作原理。以Webkit引擎的工作流程為例：
從上圖可看出，瀏覽器加載一個HTML頁面后進行如下操作：
解析HTML —> 構建DOM樹
加載樣式 —> 解析樣式 —> 構建樣式規則樹
加載javascript —> 執行javascript代碼
把DOM樹和樣式規則樹匹配構建渲染樹
計算元素位置進行布局
繪制
從上圖我們不能很直觀的看出圖片資源從什么時候開始加載，下圖標出圖片加載和渲染的時機：
解析HTML【遇到標簽加載圖片】 —> 構建DOM樹
加載樣式 —> 解析樣式【遇到背景圖片鏈接不加載】 —> 構建樣式規則樹
加載javascript —> 執行javascript代碼
把DOM樹和樣式規則樹匹配構建渲染樹【遍歷DOM樹時加載對應樣式規則上的背景圖片】
計算元素位置進行布局
繪制【開始渲染圖片】
圖片加載與渲染規則頁面中不是所有的標簽圖片和樣式表背景圖片都會加載。
圖片資源請求如下：
設置了display:none屬性的元素，圖片不會渲染出來，但會加載。
原理
把DOM樹和樣式規則樹匹配構建渲染樹時，只會把可見元素和它對應的樣式規則結合一起產出到渲染樹，這就意味有不可見元素，當匹配DOM樹和樣式規則樹時，若發現一個元素的對應的樣式規則上有display:none，瀏覽器會認為該元素是不可見的，因此不會把該元素產出到渲染樹上。
上面代碼中，當解析HTML時會加載標簽元素上的圖片。
當把DOM樹和樣式規則樹匹配構建渲染樹時，遍歷DOM樹上的元素，發現元素對應的樣式規則上有background-image屬性時會加載背景圖片，但是因為這個元素是不可見元素（對應的樣式規則上有diaplay:none），不會把該元素和它對應的樣式規則產出到渲染樹。
當繪制時因為渲染樹上沒有該元素，因此不會繪制該元素的背景圖片。
圖片資源請求如下：
設置了display:none屬性元素的子元素，樣式表中的背景圖片不會渲染出來，也不會加載；而標簽的圖片不會渲染出來，但會加載。
原理
正如上面所說的，當匹配DOM樹和樣式規則樹時，若發現元素的對應的樣式規則上有display:none，瀏覽器會認為該元素的子元素是不可見的，因此不會把該元素的子元素產出到渲染樹上。
當構建渲染樹遇到了設置了display:none屬性的不可見元素時，不會繼續遍歷不可見元素的子元素，因此不會加載該元素中子元素的背景圖片。
當繪制時也因為渲染樹上沒有設置了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);
}
觸發hover前的圖片資源請求如下：
觸發hover后的圖片資源請求如下：
當觸發偽類的時候，偽類樣式上的背景圖片才會加載。
原理
觸發hover前，構建渲染樹過程中，遍歷DOM樹時，該元素匹配的樣式規則是無hover狀態選擇器.img-green的樣式，因此加載無hover狀態選擇器.img-green的樣式上green.png圖片。該元素是可見元素，因此會被產出到渲染樹上，繪制時渲染的也是green.png。
觸發hover后，因為.img-green:hover的優先級比較高，構建新的渲染樹過程中，該元素匹配的是有hover狀態選擇器，因此加載有hover狀態選擇器.img-green:hover的樣式上的red.png圖片。該元素是可見元素，因此會被產出到渲染樹上，繪制時渲染的也是red.png。
應用 占位圖當使用樣式表中的背景圖片作為占位符時，要把背景圖片轉為base64格式。這是因為背景圖片加載的順序在標簽后面，背景圖片可能會在
標簽圖片加載完成后才開始加載，達不到想要的效果。
很多場景里圖片是在改變或觸發狀態后才顯示出來的，例如點擊一個Tab后，一個設置display:none隱藏的父元素變為顯示，這個父元素里的子元素圖片會在父元素顯示后才開始加載；又如當鼠標hover到圖標后，改變圖標圖片，圖片會在hover上去后才開始加載，導致出現閃一下這種不友好的體驗。
在這種場景下，我們就需要把圖片預加載，預加載有很多種方式:
若是小圖標，可以合并成雪碧圖，在改變狀態前就把所有圖標都一起加載了。
使用上文講到的，設置了display:none屬性的元素，圖片不會渲染出來，但會加載。把要預加載的圖片加到設置了display:none的元素背景圖或標簽里。
在javascript創建img對象，把圖片url設置到img對象的src屬性里。
歡迎關注：Leechikit
原文鏈接：segmentfault.com到此本文結束，歡迎提問和指正。
寫原創文章不易，若本文對你有幫助，請點贊、推薦和關注作者支持。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50943.html
摘要：此文研究頁面中的圖片資源的加載和渲染時機，使得我們能更好的管理圖片資源，避免不必要的流量和提高用戶體驗。原理不存在的元素不會產出到樹上，構建渲染樹過程中遍歷樹時無法遍歷不存在的元素，因此不會加載圖片，也不會產出到渲染樹上。 此文研究頁面中的圖片資源的加載和渲染時機，使得我們能更好的管理圖片資源，避免不必要的流量和提高用戶體驗。 瀏覽器的工作流程 要研究圖片資源的加載和渲染，我們先要了解...
摘要：參考鏈接初探監控網頁與程序性能使用簡潔的測試網頁加載速度前端性能統計前端性能監控起步使用性能快速分析前端性能通過以上幾篇文章，可以對前端性能相關的概念和有一個整體的認識。但在我們這次的前端性能監控方案中，并不將其作為主要的監控指標。 參考鏈接 初探 performance – 監控網頁與程序性能 使用簡潔的 Navigation Timing API 測試網頁加載速度 前端性能統計 ...
摘要：所以選擇器嵌套層次越深，匹配的時間會越長。加載會阻塞初次渲染對于首頁無關的樣式，需要使用適當的方式避免其阻塞初次渲染會阻塞頁面初次渲染使用媒體查詢，雖然加載樣式表，但只針對打印時才應用該樣式，不會阻塞初次渲染。通過引入，可以避免阻塞。 瀏覽器渲染原理showImg(https://segmentfault.com/img/bVNlgX?w=301&h=300); DOM解析 DOM樹構...
閱讀 1370·2021-11-25 09:43
閱讀 3582·2021-11-10 11:48
閱讀 5093·2021-09-23 11:21
閱讀 1597·2019-08-30 15:55
閱讀 3508·2019-08-30 13:53
閱讀 1235·2019-08-30 10:51
閱讀 868·2019-08-29 14:20
閱讀 1972·2019-08-29 13:11
