顏色聲明之間的性能差異？

在CSS中，我們可以用幾種不同的方法來定義顏色：顏色聲明之間的性能差異？

顏色的字：red
十六進制：#FF0000
紅/綠/藍道：rgb(255, 0, 0)
色相/飽和度/明度：hsl(0, 100%, 50%)

_{我也知道使用命名的顏色是不是好主意，因爲不同的瀏覽器對aquamarine的外觀有自己的想法。}

忽略alpha通道和瀏覽器支持，這4種方法在性能上有差異嗎？

如果我們試圖擠出的最後一位優化出我們的CSS，哪一個會是首選的，如果有的話？顏色值是在內部轉換爲特定格式還是其性能取決於其他任何內容（如使用哪種渲染代理或瀏覽器）？

如果可能，尋找「技術」答案，引用讚賞。

來源

2011-07-22 Wesley Murch

真的嗎？我不知道使用命名的顏色是一個壞主意。我會假定海藍寶石在所有操作系統上的所有瀏覽器上都等於某個數值。我的假設是否不正確？ – Marvo

相關http://stackoverflow.com/questions/1171422/are-there-any-good-reasons-for-using-hex-over-decimal-for-rgb-colour-values-in-cs – andyb

@andyb：謝謝爲鏈接。這些答案雖然有些鬆散，但沒有技術含義，但有點像另一個方向，比如「我最容易輸入或理解的是什麼？」 –

如果我們假設現代瀏覽器充分利用GPU，那麼內部顏色表示將是RGB浮動。忽略顏色名稱 - 可能只是一個映射到十六進制 - 我認爲十六進制和頻道將是最快的。 HSB無疑是最慢的，因爲從HSB到RGB的轉換確實需要一些工作 - 大約有50行C代碼。

但是，我認爲，爲了CSS的目的，這是一個完全不相關的問題。即使HSB到RGB，一種顏色的工作量也是微不足道的。作爲對此的支持，我有幾個程序 - 包括那些在手機上運行的程序 - 在每個像素級別上對RGB-> HSB - >（某些操作） - > RGB的較大圖像執行顏色處理。即使在iPad上執行此操作100,000次也只會導致延遲幾秒 - 所以在這個相對較慢的平臺上，我認爲您的典型最壞情況轉換可以安全地假定爲小於0.0001秒。這是悲觀的。

所以，只要使用最簡單的代碼即可。

ADDED：支持不用擔心這個選項。在GPU內部，將以浮點數組形式操作顏色，因此在C語言中

float color [4];

或類似的東西。因此，對數字選項進行的唯一轉換是簡單除以255.

另一方面，將HSB轉換爲RGB需要相當長的時間 - 據我估計，從編寫代碼開始，大約需要10到20項行動。因此，粗略地說，HSB速度要慢很多，但現代GPU上的20（甚至20,000）操作不值得擔心 - 它不可察覺。

來源

2011-07-23 00:17:32 Cruachan

我想有人會告訴我不要擔心它，我試圖避開這些類型的評論。我對此也有好奇心，所以這並不是完全不相關的，而且一個準確的，具體的答案*必須存在，對嗎？那麼你是否說Hex轉換爲RGB，而RGB可能是最快的？我同意顏色名稱，我想我們可以認爲它不是贏家:)感謝你分享你的經驗。 –

@WesleyMurch，它真的不值得擔心，我想你完全忽略了CPU的速度。例如，英特爾i7的運行速度爲每秒約150,000,000,000次操作。如果你通過遍歷代碼來複合，你只會看到這類事情的重大問題。一個CSS文件中的幾個項目是無關緊要的，幾個數量級。 – Cruachan

要明確一點，我完全理解，性能差異超出*微不足道，你真的不需要說服我，但我有一個想法是好奇這些事情是如何工作的，並想知道更多關於它的信息。我沒有在Google上找到任何信息，我猜這是一個很有趣的話題。再次感謝您分享您的知識。 –

編輯：每個進程必須歸結爲r，g和b的二進制值。十六進制和RGB字節已經爲此設置，所以我猜他們可能實際上是大致相同的速度。其餘的必須經歷一個過程，達到一個十六進制/ RGB值

#FF0000 = memory values of: 1111 1111 0000 0000 0000 0000 

rgb(255,0,0) = memory values of: 1111 1111 0000 0000 0000 0000

兩種情況最有可能存儲在第3個INT變量。所以真正的問題是，哪些處理成這些整數的二進制值更快？ HEX還是DEC？我認爲HEX，但我不能支持這一點。無論如何，代碼只需要這些變量的二進制值。

來源

2011-07-23 00:04:24

任何參考或稍微更詳細的解釋將是偉大的，如果你有它。我幾乎不知道二進制翻譯的十六進制與另一種方法有什麼不同，特別是在渲染顏色方面，這種方式可以更好地表現爲其他格式之一。 –

@韋斯利當然，我更新 –

通常，css優化都是關於最小化通過線路傳輸的字節數。十六進制顏色往往是最短的（在你的例子中，＃f00可以用來代替＃ff0000）。

我意識到這並不完全回答你問過的問題，但我還沒有看到任何試圖測量不同顏色表示如何影響渲染速度的瀏覽器測試。

來源

2011-07-23 00:04:54

我也對此感到好奇（這是一個星期五下午）。這裏有一個JSPerf的各種CSS顏色的方法：

http://jsperf.com/css-color-names-vs-hex-codes/18

來源

2015-01-30 15:13:17 cloakedninjas

據此，答案是顏色名稱和十六進制。 –

下面是結果，包括顏色名稱，短十六進制，十六進制，RGB，RGBA，HSL和HSLA。您可以自己運行測試here。

來源

2017-03-28 16:03:56

顏色聲明之間的性能差異？

回答

相關問題