平鋪一百個1px方塊VS平鋪四個25px方塊

這個問題更多地與瀏覽器處理由HTML和CSS創建/呈現的對象的方式有關，而不僅僅是一個腳本問題。

如果我有一個100像素×100像素的div，我希望它具有很好的半透明藍色背景，但我不想使用CSS將背景顏色設置爲RGBA（然後只調整Alpha），因爲瀏覽器兼容性問題，所以而是我做了一個固體半透明的藍色的.png文件，並將div的背景圖像設置爲該PNG文件，然後將其平鋪...平鋪一百個1px方塊VS平鋪四個25px方塊

我可以平鋪一百個1px圖像正方形。

或

我可以平鋪四個25px圖像正方形。

兩者都會創建相同的效果，除了1px圖片廣場會比25px圖片廣場更快加載....但我想知道如果在屏幕上有100個圖片廣場會滯後瀏覽器超過只有4屏幕上的圖像是大圖像？瀏覽器本身是否會爲每個圖像拼貼塊創建一個新的引用，然後必須跟蹤它們並更新它們的位置？

看起來好像在網頁屏幕上放置100,000個1px乘1px的圖像會比在屏幕上放置一個100,000px乘以100,000px的圖像滯後更多？特別是如果用戶正在向上或向下滾動。對？

來源

2013-10-20 Albert Renshaw

我認爲在這種情況下它只加載一個小圖片。在我使用一個方形的png代替rgba之前，我做了這樣的事情。我不記得具體細節，但它加載方式比CSS方塊更快。我實際上重新創建了它，你可以看到CSS很慢。您應該製作其中的一個，並觀察開發工具時間軸事物，並查看加載速度更快。 http://codepen.io/sheriffderek/pen/plAzv – sheriffderek

這似乎很容易測試。你是否？ –

重複圖像n次的任務是由用戶的機器執行。這取決於普通用戶機器的處理能力。

如果您認爲平均用戶的計算機平均可以獲得2-3GHz的處理能力，並將其與平均下載速度10兆比特/秒進行比較，那麼我會說瓶頸是下載速度。現在，網絡速度的滯後幾乎可以忽略不計，所以差異會很小，以至於它並不值得擔心，但是，下載較大圖像的網絡延遲可能會比處理器的延遲更糟糕瀏覽器的圖像。

無論你將較大的圖像放大20倍還是放大200倍，瀏覽器仍然會使用相同的執行循環來執行圖像的平鋪，而後者只是更多的迭代，所以我認爲處理器會是比網絡高效得多。

另外，我想說，如果你能達到與較小的圖像效果相同，其更加周到和禮貌的用戶使用絕對最小帶寬可能與這些瘋狂的ISP的價格和公平使用原則。

來源

2013-10-21 01:45:57 Justin

謝謝！正是我在找的！ –

平鋪一百個1px方塊VS平鋪四個25px方塊

回答

相關問題