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

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

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

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

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

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

實際瀏覽器行為：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

實際瀏覽器行為：

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

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

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

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

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

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

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

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

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

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

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

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

關(guān)鍵要點：

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

這些會影響哪些情況

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

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