Различия в производительности между объявлениями цвета?

В CSS мы можем использовать несколько разных методов для определения цвета:

  • Цветное слово: red
  • Шестнадцатеричный: #FF0000
  • Красный/Зеленый/Синий каналы: rgb(255, 0, 0)
  • Оттенок/насыщенность/легкость: hsl(0, 100%, 50%)

Я действительно понимаю, что использование названных цветов не является хорошей идеей, так как разные браузеры имеют собственное представление о том, как выглядит aquamarine.

Игнорируя поддержку альфа-канала и браузера, существуют ли различия между этими 4 способами?

Если бы мы пытались выжать каждый последний бит оптимизации из нашего CSS, какой из них был бы предпочтительнее, если таковой был? Являются ли значения цвета преобразованными в определенный формат внутри, или его производительность зависит от чего-либо еще (например, какой агент визуализации или браузер используется)?

Ищите "технический" ответ, если это возможно, ссылки оцениваются.

Ответы

Ответ 1

Если мы предположим, что современный браузер полностью использует графический процессор, то внутренним представлением цвета будут RGB-поплавки. Игнорирование имени цвета - это, вероятно, всего лишь карта для шестнадцатеричного кода, - я думаю, что шестнадцатеричный и каналы будут самыми быстрыми. HSB, несомненно, будет самым медленным, поскольку преобразование из HSB в RGB требует некоторой работы - около 50 строк кода C.

Однако, я думаю, что для целей CSS это совершенно нерелевантный вопрос. Даже для HSB для RGB объем работы над одним цветом будет абсолютно тривиальным. В качестве поддержки для этого у меня есть несколько программ, в том числе работающих на мобильных телефонах, которые выполняют манипуляции цветом на уровне пикселей на довольно больших изображениях, где я делаю RGB-> HSB → (некоторые манипуляции) → RGB. Даже выполнение этой операции 100 000 раз на ipad приводит только к задержке в пару секунд - так на этой относительно медленной платформе, я думаю, что ваше типичное преобразование наихудшего случая можно смело считать менее 0,0001 секунды. И это пессимистично.

Поэтому просто используйте все, что проще всего закодировать.

ДОБАВЛЕНО: для поддержки не беспокойтесь об этом варианте. Внутренне GPU будет манипулировать цветами как массив поплавков, поэтому в терминах C

флоат-цвет [4];

или что-то подобное. Таким образом, единственное преобразование для числовых опций - это простое разделение на 255.

С другой стороны, преобразование HSB в RGB занимает значительно больше времени - я бы оценил, от написания кода до этого, от 10 до 20 операций. Таким образом, в грубом смысле HSB значительно медленнее, НО 20 (или даже 20 000) операций на современном графическом процессоре не стоит беспокоиться - это незаметно.

Ответ 2

Как правило, оптимизация css сводится к минимизации количества байтов, проходящих по проводу. Шестнадцатеричные цвета, как правило, самые короткие (в вашем примере # f00 можно использовать вместо # ff0000).

Я понимаю, что это точно не отвечает на заданный вами вопрос, но я не видел никаких тестов в браузере, которые пытаются измерить, как разные цветовые представления влияют на скорость рендеринга.

Ответ 3

Вот результаты, включая названия цветов, короткие шестнадцатеричные, шестнадцатеричные, rgb, rgba, hsl и hsla. Вы можете запустить тест самостоятельно здесь.

Performance Test Results

Ответ 5

Изменить: каждый процесс должен перейти к двоичному значению для r, g и b. Для этого уже установлены байты Hex и rgb, поэтому я думаю, что они могут быть примерно одинаковой скоростью. Остальные должны пройти процесс, чтобы достичь значения hex/rgb

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

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

Оба случая, скорее всего, хранятся в трех переменных int. Итак, реальный вопрос заключается в том, что быстрее обрабатывать двоичные значения для этих целых чисел? HEX или DEC? Я думаю, HEX, но я не могу это сделать. Во всяком случае, код просто берет двоичные значения этих переменных.