瀏覽器渲染web頁面的過程

1. 解析html，構成dom樹
   2.加載css，構成樣式規(guī)則樹
   3.加載js，解析js代碼
   4.dom樹和樣式樹進行匹配，構成渲染樹
   5.計算元素位置進行頁面布局
   5.繪制頁面，呈現(xiàn)到瀏覽器中

圖片加載和渲染的過程

1.解析html，遇到<img>、<picture>，會加載圖片，放入dom樹中
2.加載css，遇到background-image時，不加載圖片，放入樣式樹中
3.解析js，代碼中有創(chuàng)建<img>、<picture>元素添加到dom樹中，如果有添加background-image樣式會添加到樣式規(guī)則樹中
4.構建渲染樹時，如果dom節(jié)點匹配到樣式規(guī)則中的background-iamge，會加載背景圖片
5.計算圖片位置進行布局
6.渲染圖片

web頁面中的圖片不是所有都會進行加載和渲染

<img>、<picture>和設置background-image的元素遇到display:none時，圖片會加載，但不會渲染。
<img>、<picture>和設置background-image的元素祖先元素設置display:none時，background-image不會渲染也不會加載，而img和picture引入的圖片不會渲染但會加載
<img>、<picture>和background-image引入相同路徑相同圖片文件名時，圖片只會加載一次
樣式文件中background-image引入的圖片，如果匹配不到DOM元素，圖片不會加載
偽類引入的background-image，比如:hover，只有當偽類被觸發(fā)時，圖片才會加載