圖像性能爲背景重複CSS

任何一個人知道這將是這兩個選項之間的瀏覽器加載時間更好：圖像性能爲背景重複CSS

background-image:url('1by1px.png');

或

background-image:url('10by10px.png');

是1x1 1px半透明png爲div重複。或者更大的一個說10px乘10px。

爲了在瀏覽器中顯示重複的圖像必須做某種循環，所以我想知道是否1px by 1px的圖像會導致很多循環來顯示圖像，以至於它實際上可能是比較小尺寸的圖像具有更少的循環速度？

當然，對於1by1而言，相對於10by10，圖像尺寸較小，但並不意味着它更好地變小，因爲多次循環可能不會像循環較大的圖像尺寸那麼小。

有沒有人知道更多關於哪個更好，以及瀏覽器如何處理這種情況？

來源

2013-01-19 Sir

我也很有興趣知道這個問題的答案... – Dyn

好問題:) –

可以推測某些（通常是標準的3D紋理）尺寸會更好，比如128x128,256x256,512x512等上。如果能夠從正在從事硬件加速的人員那裏獲得評論，以便了解哪些是最佳選擇，那將非常好。 – Henrik

當不重複背景圖像時，渲染所需的時間僅取決於最終縮放圖像，而不是原始圖像。

文件中的圖像被壓縮爲PNG格式，但在被瀏覽器加載後，其格式爲RGBA位圖格式（一個像素爲4個字節）。當重複背景（比如在Intel x86上）時，瀏覽器的本機代碼將使用從RAM向位圖存儲器移動位圖數據（這是標準序列，可能在圖形驅動程序的各種實現方式上有所不同，或者在不同的圖形驅動程序實現方式上可能有所不同）特定的GPU）。

假設包含背景的HTML DIV的尺寸爲100x100。

對於唯一的1像素圖像：瀏覽器程序必須執行10萬'REP MOVSD'說明。瀏覽器程序只需要執行'REP MOVSD'10次（1次調用'REP MOVSD'可以渲染圖像的1像素行（像素行））。因此，在這種情況下，執行的'REP MOVSD'指令的數量將僅爲10倍100倍（1幅圖像中爲10次，100幅重複圖像）。這完全需要1千'REP MOVSD'。

因此，基於較大圖像的最終背景會變得更快。

更多注意事項：上述解釋並不意味着10x10圖像的性能正好是10倍。 'REP MOVSD'（例如CX = 9999）只有一條CPU指令，但仍需要通過數據總線傳輸9999x4字節。如果使用9999個簡單的'MOV'，那麼大部分數據仍然需要通過數據總線，但是，CPU必須執行更多的9998個指令。更聰明的瀏覽器會爲複製圖像的背景創建預渲染位圖;所以每次需要傳輸到視頻內存時，它只需要100'REP MOVSD'（100是上面假定的最終背景中的像素行數），而不是1萬或1千。

來源

2013-01-19 08:41:59 jondinham

神奇的解釋。從我身上。 –

是非常好的答案:) – Sir

@paul dinh有沒有一個點，重複的較大的圖像比較小的利益少，必須有一個臨界點？ – Sir

我同意保羅的回答。我最近用Google Chrome開發者工具做了一些粗略的測試。我在背景圖像上使用了不同大小的半透明png圖像，並使用頁面繪製時間來查看刷新屏幕需要多長時間。

下面是結果：

時間沒有-webkit-變換黑客（四捨五入）刷新：

2x2的圖像：65-160ms

10×10的圖像：60-150ms

100x100 image：55-135ms

1000×1000的圖像：55-130ms

時間-webkit-變換黑客（四捨五入）刷新：

2x2的圖像：40-120ms

10×10的圖像：30- 90ms

100x100 image：30-90ms

1000×1000的圖像：30-90ms

就像保羅所說，更大的圖像是以更短的時間來加載（刷新），小於圖像。但是，圖像變得大於10像素後，效果似乎變得越來越差。我沒有看到100x100和1000x1000之間的差異。

在我看來，一個巨大的圖像不會給你一個明顯的結果，它可能會增加加載時間。所以，我認爲任何大小在10-100左右都足夠滿足性能和加載時間。

但是，不同的圖像可能會有不同的結果，我認爲您應該使用Google Chrome開發人員工具中的網頁繪製時間工具測試您的網站以獲得準確的結果。

來源

2014-05-27 15:51:24

良好的信息:) +1 – Sir

圖像性能爲背景重複CSS

回答

相關問題