列舉一下我們目前所知道的規(guī)則：

1.瀏覽器需要在構(gòu)建好cssom之后再去下載background-image
2.瀏覽器不會(huì)延遲下載img標(biāo)簽上的圖片（css不影響img標(biāo)簽圖片的請(qǐng)求）

我開始在思考瀏覽器是怎么去處理可見或者不可見（display:none）的img圖片,不可見的時(shí)候理想情況下應(yīng)該是不要去下載這個(gè)圖片，以節(jié)省請(qǐng)求；但問題是瀏覽器只有在cssom完成構(gòu)建后才能知道圖片是不是不可見，所以當(dāng)圖片不可見時(shí)瀏覽器是不是會(huì)放慢了img默認(rèn)的下載行為呢？

先從研究瀏覽器對(duì)于background-image處理開始，因?yàn)檫@是我的產(chǎn)品初始案例。我覺得background-image的行為是最容易預(yù)測(cè)的，因?yàn)閏ssom總是在下載圖片前構(gòu)建好。

預(yù)測(cè)瀏覽器行為：

1.cssom構(gòu)建完成前瀏覽器不能觸發(fā)下載background-image圖片
2.瀏覽器不會(huì)下載不可見（display：none）的background-image圖片

實(shí)際瀏覽器行為：

chrome（v67.0.3396.79）
1.和預(yù)測(cè)一樣，cssom構(gòu)建完成前瀏覽器不能觸發(fā)下載background-image圖片

  2.出乎意料的是，瀏覽器還是會(huì)不可見（display：none）的background-image圖片

Safari (v11.1 (13605.1.33.1.4))
1.和預(yù)測(cè)一樣，cssom構(gòu)建完成前瀏覽器不能觸發(fā)下載background-image圖片

2.和預(yù)測(cè)一樣，瀏覽器不會(huì)下載不可見（display：none）的background-image圖片

Firefox (v60.0.1)
1.和預(yù)測(cè)一樣，cssom構(gòu)建完成前瀏覽器不能觸發(fā)下載background-image圖片

2.和預(yù)測(cè)一樣，瀏覽器不會(huì)下載不可見（display：none）的background-image圖片

Opera (v53.0.2907.68)
1.和預(yù)測(cè)一樣，cssom構(gòu)建完成前瀏覽器不能觸發(fā)下載background-image圖片

2.出乎意料的是，瀏覽器還是會(huì)不可見（display：none）的background-image圖片

Edge (v17.17134)
1.和預(yù)測(cè)一樣，cssom構(gòu)建完成前瀏覽器不能觸發(fā)下載background-image圖片

2.出乎意料的是，瀏覽器還是會(huì)不可見（display：none）的background-image圖片  

YES 或者NO 代表實(shí)際結(jié)果，√和×代表時(shí)候符合預(yù)期（作者認(rèn)為是瀏覽器這樣做是表現(xiàn)更好的）和不符合預(yù)期

firefox 和 safari在圖片不可見的情況下不會(huì)去下載background-image的行為似乎是更可取的。

chrome，opera和edge會(huì)下載不可以見的backgroud-image感覺是浪費(fèi)資源的，但我懷疑這是一個(gè)提前加載的優(yōu)化，保證在使圖片可見的潛在事件發(fā)生之前就做好準(zhǔn)備。但我覺得如果真的是這樣的話，這種優(yōu)化行為應(yīng)該交由開發(fā)者去處理。

接下來(lái)看看瀏覽器是怎么處理
預(yù)測(cè)瀏覽器行為：

1.瀏覽器下載圖片應(yīng)該獨(dú)立于cssom的構(gòu)建。如果在cssom的構(gòu)建中阻塞的請(qǐng)求效率是很低的，并且會(huì)導(dǎo)致延遲下載內(nèi)容。
2.那么相應(yīng)的瀏覽器就會(huì)下載不可見的img（display：none）。因?yàn)槿绻麨g覽器在cssom構(gòu)建前開始下載img，它是沒有辦法知道這張圖片是不是需要展示在頁(yè)面上。

實(shí)際瀏覽器行為：

- Chrome 
    1.和預(yù)測(cè)一樣，瀏覽器下載圖片應(yīng)該獨(dú)立于cssom的構(gòu)建     

    2.和預(yù)測(cè)一樣，瀏覽器會(huì)先下載后再把圖片隱藏

  - safri
      1.和預(yù)測(cè)一樣，safari沒有阻塞img請(qǐng)求        

      2.和預(yù)測(cè)一樣，瀏覽器會(huì)先下載后再把圖片隱藏

    - firefox
        1.出人意料的是，火狐會(huì)等到cssom構(gòu)建完成才去請(qǐng)求img，這是令人驚訝的低效率。     

        2.出人意料的是，盡管火狐是等到cssom構(gòu)建完才去請(qǐng)求img，也就是說(shuō)它可以知道img不可見，還是會(huì)去下載img。我覺得非常奇怪，這兩個(gè)方面都是非常低效率的。           

       - opera
         1.和預(yù)測(cè)一樣，opera沒有阻塞img請(qǐng)求
         

         2.和預(yù)測(cè)一樣，瀏覽器會(huì)先下載后再把圖片隱藏
         

        -edge
        1.和預(yù)測(cè)一樣，opera沒有阻塞img請(qǐng)求
        

        2.和預(yù)測(cè)一樣，瀏覽器會(huì)先下載后再把圖片隱藏
      

YES 或者NO 代表實(shí)際結(jié)果，√和×代表時(shí)候符合預(yù)期（作者認(rèn)為是瀏覽器這樣做是表現(xiàn)更好的）和不符合預(yù)期

firefox阻塞了cssom構(gòu)建中的img請(qǐng)求，這是似乎是一個(gè)低效率的行為；在css文件下載，解析，應(yīng)用之前沒有一張圖片會(huì)被加載。這意味著你的樣式是阻塞的話，也會(huì)阻塞你的img加載，如果img是種重要的內(nèi)容這影響將會(huì)是尤其嚴(yán)重。
firefox的表現(xiàn)非常奇怪，無(wú)論img是否可見，都要等到cssom構(gòu)建完才會(huì)觸發(fā)請(qǐng)求。這是一種雙重低效行為。

關(guān)鍵要點(diǎn)：

1.chrome、opera和edge下無(wú)論background-image是否可見都會(huì)下載，謹(jǐn)防不可見的圖片下載可能會(huì)造成額外的資源浪費(fèi)。
2.firefox在構(gòu)建cssom完成前阻塞img下載，意味著延遲下載；
3.并且firefox在知道img不可見的情況下仍然會(huì)請(qǐng)求img；謹(jǐn)防不可見的圖片下載可能會(huì)造成額外的資源浪費(fèi)。

這些會(huì)影響哪些情況

如果你的產(chǎn)品是嚴(yán)重依賴圖像的內(nèi)容（例如：在線出版社，攝影作品等等），firefox會(huì)阻塞img直到css文件加載完。這種情況應(yīng)該預(yù)加載一些關(guān)鍵的圖像內(nèi)容。

如果你第一次加載的時(shí)候并沒有把所有圖片顯示出來(lái)（并沒有用到所有的圖片），你要意思到一些瀏覽器還是會(huì)繼請(qǐng)求下載的。你可能想要找到更好的隱藏內(nèi)容方案，例如直接移除DOM而不是display：none