CSS效率問題

Question

爲了這個問題，讓「效率」意味着或多或少的頁面渲染速度。儘管如此，我們還應該考慮性能問題，如平滑滾動。

假設你在頁面上放置條紋背景。從效率的角度來看，平鋪100px寬（顯示10條）或寬20px（顯示兩條）圖像會更好嗎？當然，一張大圖片需要更多時間才能加載，但我覺得在拼貼非常小的圖片時遇到了麻煩。有一個最佳點嗎？

我開始覺得這取決於瀏覽器，尤其是考慮這個問題的第二部分（可能的操作系統呢？）：

要達到透明度，是更有效的瓷磚半透明.png文件，或者使用CSS不透明屬性（再次提及大塊和小塊的問題）？根據我的經驗，舊版本的IE似乎比使用CSS不透明屬性的平鋪半透明PNG更好（儘管我從未做過任何科學測試）。

圓角是另一個很好的例子......在一些瀏覽器中，使用圖像而不是CSS屬性或JavaScript實現似乎使頁面更快，更平滑的滾動。

這確實是一個比CSS更廣泛的問題，但這只是我最近一直在考慮的問題。

-Peter

Answer 1

是的，這是所有的操作系​​統和瀏覽器爲中心。

例如，在Safari中，使用CSS轉換來動畫元素比JS更有效。

一般：

• 要避免平鋪非常小的圖像。一個20像素的圖像會比1像素更好，因爲瀏覽器在重新繪製整個屏幕方面做的很少。不過，20px和100px之間的差別可能不大。
• 任何可以用CSS完成的事情都可能比加載其他圖像更有效率。 （如圓角，陰影等）
• 一個很大的警告是IE的css過濾器。其中很多效率不高，你可能會更好地恢復圖像。

Answer 2

根據我的測試，似乎頁面呈現較快用最小的圖像成爲可能，讓CSS做瓷磚本身。這發生的速度完全取決於瀏覽器。

對於半透明的背景，使用CSS會帶寬更輕，但CSS不透明仍然不完全支持，所以我會考慮到這一點時考慮到這一點。

我會很好奇，想了解其他人的測試結果...