譯文-瀏覽器下載圖片的方式和時間點

原文連接：https://csswizardry.com/2018/...

背景資料

爲了更好地控制產品主頁縮略圖的顯示，（做者）團隊選擇了css的background-image而不是<img>標籤；除了語義上的擔心，在樣式的角度看，用css能夠更好的控制圖片在容器中的大小和位置；這種方式惟一值得商榷的是，當圖片定義在css而不是html中時，圖片的請求會在瀏覽器建立渲染樹以後開始，也就是說直到css文件被下載、解析，而且瀏覽器得知cssDOM構造的這個class的div在當前頁面上是可見，背景圖片纔會被下載。

下面瀑布流圖片展現了：瀏覽器是在CSSOM加載完成後纔開始發送圖片請求，你能夠清楚的看到css需求在任何圖片開始以前完成。這能夠得出一個結論：在CSSOM創建以前，瀏覽器不知道須要哪些圖片。

這對於用戶但願能儘快看到而且有着重要內容的縮略圖來講已經太晚了。

經過將圖片放置到<img/>標籤上能解決這個問題，瀏覽器能儘快發現這些img標籤，語義上講也更爲合適。由於他們已經暴露在瀏覽器的預加載掃描器上，而且在cssom構建完成以前（或者是並行）去發出圖片請求。

列舉一下咱們目前所知道的規則：

1.瀏覽器須要在構建好cssom以後再去下載background-image
2.瀏覽器不會延遲下載img標籤上的圖片（css不影響img標籤圖片的請求）

我開始在思考瀏覽器是怎麼去處理可見或者不可見（display:none）的img圖片,不可見的時候理想狀況下應該是不要去下載這個圖片，以節省請求；但問題是瀏覽器只有在cssom完成構建後才能知道圖片是否是不可見，因此當圖片不可見時瀏覽器是否是會放慢了img默認的下載行爲呢？

background-imgae

先從研究瀏覽器對於background-image處理開始，由於這是個人產品初始案例。我以爲background-image的行爲是最容易預測的，由於cssom老是在下載圖片前構建好。

預測瀏覽器行爲：

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

實際瀏覽器行爲：

• chrome（v67.0.3396.79）
  1.和預測同樣，cssom構建完成前瀏覽器不能觸發下載background-image圖片

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

• Safari (v11.1 (13605.1.33.1.4))
  1.和預測同樣，cssom構建完成前瀏覽器不能觸發下載background-image圖片

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

• Firefox (v60.0.1)
  1.和預測同樣，cssom構建完成前瀏覽器不能觸發下載background-image圖片

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

• Opera (v53.0.2907.68)
  1.和預測同樣，cssom構建完成前瀏覽器不能觸發下載background-image圖片

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

• Edge (v17.17134)
  1.和預測同樣，cssom構建完成前瀏覽器不能觸發下載background-image圖片

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

總結

YES 或者NO 表明實際結果，√和×表明時候符合預期（做者認爲是瀏覽器這樣作是表現更好的）和不符合預期

• firefox 和 safari在圖片不可見的狀況下不會去下載background-image的行爲彷佛是更可取的。
• chrome，opera和edge會下載不能夠見的backgroud-image感受是浪費資源的，但我懷疑這是一個提早加載的優化，保證在使圖片可見的潛在事件發生以前就作好準備。但我以爲若是真的是這樣的話，這種優化行爲應該交由開發者去處理。

<img/>

接下來看看瀏覽器是怎麼處理<img/>
預測瀏覽器行爲：

1.瀏覽器下載圖片應該獨立於cssom的構建。若是在cssom的構建中阻塞<img/>的請求效率是很低的，而且會致使延遲下載內容。
2.那麼相應的瀏覽器就會下載不可見的img（display：none）。由於若是瀏覽器在cssom構建前開始下載img，它是沒有辦法知道這張圖片是否是須要展現在頁面上。

實際瀏覽器行爲：

- Chrome 
    1.和預測同樣，瀏覽器下載圖片應該獨立於cssom的構建

2.和預測同樣，瀏覽器會先下載後再把圖片隱藏

- safri
      1.和預測同樣，safari沒有阻塞img請求

2.和預測同樣，瀏覽器會先下載後再把圖片隱藏

- firefox
        1.出人意料的是，火狐會等到cssom構建完成纔去請求img，這是使人驚訝的低效率。

2.出人意料的是，儘管火狐是等到cssom構建完纔去請求img，也就是說它能夠知道img不可見，仍是會去下載img。我以爲很是奇怪，這兩個方面都是很是低效率的。

- opera
         1.和預測同樣，opera沒有阻塞img請求

2.和預測同樣，瀏覽器會先下載後再把圖片隱藏

-edge
        1.和預測同樣，opera沒有阻塞img請求

2.和預測同樣，瀏覽器會先下載後再把圖片隱藏

總結

YES 或者NO 表明實際結果，√和×表明時候符合預期（做者認爲是瀏覽器這樣作是表現更好的）和不符合預期

firefox阻塞了cssom構建中的img請求，這是彷佛是一個低效率的行爲；在css文件下載，解析，應用以前沒有一張圖片會被加載。這意味着你的樣式是阻塞的話，也會阻塞你的img加載，若是img是種重要的內容這影響將會是尤爲嚴重。
firefox的表現很是奇怪，不管img是否可見，都要等到cssom構建完纔會觸發請求。這是一種雙重低效行爲。

關鍵要點：

1.chrome、opera和edge下不管background-image是否可見都會下載，謹防不可見的圖片下載可能會形成額外的資源浪費。
2.firefox在構建cssom完成前阻塞img下載，意味着延遲下載；
3.而且firefox在知道img不可見的狀況下仍然會請求img；謹防不可見的圖片下載可能會形成額外的資源浪費。

這些會影響哪些狀況

1. 若是你的產品是嚴重依賴圖像的內容（例如：在線出版社，攝影做品等等），firefox會阻塞img直到css文件加載完。這種狀況應該預加載一些關鍵的圖像內容。

2. 若是你第一次加載的時候並無把全部圖片顯示出來（並無用到全部的圖片），你要意思到一些瀏覽器仍是會繼請求下載的。你可能想要找到更好的隱藏內容方案，例如直接移除DOM而不是display：none