Влияет ли порядок правил в таблице стилей 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 будет отображаться быстрее или проще для браузера, чем:

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

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

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

13
css html minify optimization rendering

6 ответов

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

однако, как в CSS расшифровывается как Каскадные Таблицы Стилей Я считаю, что это спорный вопрос, как порядок правил тут вопрос. Так что вы не вправе свободно передвигаться вокруг. Если, конечно, вы не поставляете постоянно более конкретные селекторы (т. е. html body div.foo), что, я думаю, будет иметь последствия для производительности. Если ничего больше в файле размер.

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

6

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

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

CSS-селекторы специфика

2

обычно не рекомендуется строго вводить классы и идентификаторы для определенного типа элемента.

div.foo {}

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

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

Это немного лучше.

1

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

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

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

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

сначала я попробовал эти тесты с правилами 1.000.000 divs и 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 ) действительно не оценил меня, играя с этим, у него действительно были некоторые проблемы с генерацией вывода, иногда эта программа не отвечает на сообщение, не боялась показать свое лицо.

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

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

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

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

1

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

0

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

-1