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

Question

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

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

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

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

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

Если возможно, ищите «технический» ответ, ссылки приветствуются.

Answer 1

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

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

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

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

плавающий цвет [4];

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

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

Answer 2

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

Answer 3

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

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

Answer 4

Мне тоже было любопытно по этому поводу (сегодня пятница). Вот JSPerf для различных цветовых методов CSS:

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

Answer 5

Редактировать : Каждый процесс должен получить двоичное значение для r, g и b.Шестнадцатеричные и 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

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

Answer 6

Я использовал тот же инструмент из jsperf.com , что и другие, и создал свой собственный тест для различных цветовых форматов.Затем я провел тест на IE11, Edge17, FF64 и Chrome71 и собрал все результаты в компактную таблицу Excel.

Верхние три - зеленые, нижние три - красные, лучшие и худшие - жирные.

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

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

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

Не стесняйтесь обновлять результаты, если они меняются в новых версиях браузеров.