Эффективность выбора цвета в html. RGB vs hex vs name

Есть ли разница в скорости, которую браузер может анализировать цветом?

например, красный цвет, я мог бы использовать следующий css:

.red
{
    color:red;
    color:#ff0000;
    color:rgb(255,0,0);
}

все они производят одинаковый результат, цвет текста красный, но в смысле эффективности, с чем лучше всего идти?

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

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

Ответ 1

Я думаю, что можно с уверенностью сказать, что браузеры будут обрабатывать страницы быстрее, если вы используете хеши цвета #rrggbb в своем CSS.

Я сделал супер-тривиальную веб-страницу, которая помещала цвет фона и переднего плана в элемент body через CSS, немного JS внизу страницы в тайм-ауте, чтобы вывести первое время рендеринга (к сожалению, я использовал производительность .timing.msFirstPaint, поэтому он будет работать только в IE, но вы можете получить суть из этого). Я сделал страницу десять раз и взял средний. Затем я изменил названия цветов ( "зеленый" и "белый" ) в CSS, изменил их на шестнадцатеричные значения (# 008000 и #fff) и повторил измерения. Используя имена, страница отображается в среднем 41.6мс; используя шестнадцатеричные значения: 14,5 мс. Учитывая, насколько проста тестовая страница, только с двумя цветами, я чувствую, что довольно значительная разница.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Color name test</title>
    <style>body{background-color:green;color:white;}</style>
</head>
<body>
    <h1 id="foo"></h1>
    <script>
        setTimeout(function ()
        {
            var start = performance.timing.domLoading;
            document.getElementById("foo").innerHtml = 
              performance.timing.msFirstPaint - start;
        }, 1000);
    </script>
</body>
</html>

Ответ 2

Вы не сможете измерить разницу в трех параметрах на любой нетривиальной веб-странице.

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

Измерения производительности, предоставляемые @Vinny, поддерживают это.

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

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

Ответ 3

red является самым простым для анализа, но для поиска фактического значения потребуется таблица поиска.

#ff0000 является следующим простым для анализа, для получения фактического значения требуется 3 Text → Int преобразования.

rgb(255,0,0) является наиболее сложным для синтаксического анализа и по-прежнему требует, чтобы 3 Text → Int конверсии получили фактическое значение.

Второй, скорее всего, самый быстрый результат, так как метод red (скорее всего) требует операции хеширования (другое преобразование текста → Int, просто не то, что мы обычно думаем), а затем поиск. Также токен red может быть сколь угодно длинным по сравнению с #ff0000.

Я не буду комментировать аспекты микро-оптимизации или его мудрость.