Оправдывает ли порядок правил в таблице стилей CSS скорость рендеринга?

Хотя это может привести к простому да или нет, я все равно пойду за него.

Рассмотрим следующий пример:

HTML

<html>
    <head>
    </head>
    <body>
        <div class="foo">
            <span class="bar">Hello world!</span>
            <p>Some really interesting text.</p>
        </div>
    </body>
</html>

CSS

html {
    /* some css */
}
body {
    /* some css */
}
div.foo {
    /* some css */
}
div.foo span.bar {
    /* some css */
}
div.foo p {
    /* some css */
}

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

Таким образом, выше css script будет выглядеть быстрее или проще для браузера, чем:

div.foo p {
    /* some css */
}
div.foo span.bar {
    /* some css */
}
div.foo {
    /* some css */
}
body {
    /* some css */
}
html {
    /* some css */
}

Ухаживают ли браузеры? Должны ли мы?

Прочитайте, прежде чем спрашивать:

Ответ 1

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

Не было "разбитого нераскрытого контента" или подобных, для загрузки страницы потребовалось больше времени (путь длиннее: D)

Тесты, которые я выполнял Я создал тестовую страницу с 60 000 элементами div, каждая из которых имеет уникальный атрибут идентификатора. Каждый из этих идентификаторов имел свое собственное правило css, применяемое к нему. Ниже, что у меня был единственный элемент span с атрибутом CLASS, который также имел связанное с ним правило css.

Эти тесты создали html файл размером 2 МБ с соответствующим файлом css размером 6 МБ.

Сначала я попытался выполнить эти тесты с 1.000.000 div и css правилами, но Firefox не одобрил и начал плакать, умоляя меня остановиться.

Я сгенерировал эти элементы и их css со следующими простыми фрагментами PHP.

<?PHP

    for ($i = 0; $i < 60000; $i++) {
        echo "
#test$i {
    position: absolute;
    width: 1px;
    height: 1px;
    top: " . $i . "px;
    left: 0;
    background: #000;
} <br />
";
    }

?>

<?PHP

    for ($i = 0; $i < 60000; $i++) {
        echo "
<div id=\"test$i\"></div>
";
    }

?>

Затем результат был помещен в html и css файл для проверки результатов.

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

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

Я проверил несколько вариантов выше:

Размещение элемента перед всеми сгенерированными divs в посередине и в конце.
Размещение определения css cans раньше, в середине или в конце файла css.

О, и могу ли я предложить: http://www.youtube.com/watch?v=a2_6bGNZ7bA, в то время как это не совсем касается этого вопроса, оно содержит некоторые интересные подробности о том, как Firefox (и, возможно, другие браузеры) работают с материалом, который мы бросаем на него.

Ответ 2

Я не могу говорить о порядке правил, касающихся скорости.

Однако, поскольку CSS означает Cascading Stylesheets, я считаю его спорным, поскольку порядок ваших правил имеет. Таким образом, вы не всегда можете свободно перемещать их. Если, конечно, вы не поставляете постоянно более специфичные селектора (т.е. html body div.foo), что, я думаю, будет иметь последствия для производительности. Если в файле больше ничего.

В конце концов, помните, что преждевременная оптимизация - это корень всего зла. Кроме того, есть другие вещи, которые будут иметь большее влияние на скорость (минимизация, статический домен и т.д.), Чем порядок правил. Не говоря уже о том, что нужно что-то сказать для читаемости кода.

Ответ 3

Это важно для важности ваших селекторов, добавление таких деталей, как классы или идентификаторы или родительские элементы, повысит важность этого правила над другими.

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

Специфика селекторов CSS

Ответ 4

Как правило, не рекомендуется применять строгие типы ваших классов и идентификаторов к определенному типу элемента.

div.foo {}

Будет работать только для Div. Тогда вы не можете повторно использовать этот стиль в другом месте, если это не элемент Div.

.foo { /* Base Style */ }
div.foo { /* Specific to if a DIV is used */ }

Это немного лучший подход.

Ответ 5

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

Ответ 6

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