瀏覽器渲染web頁面的過程

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

圖片加載和渲染的過程

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

web頁面中的圖片不是所有都會(huì)進(jìn)行加載和渲染

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