Влияет ли порядок правил в таблице стилей CSS на скорость рендеринга? - PullRequest
Новая
       27

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

13 голосов
/ 04 августа 2011

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

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

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 */
}

Заботятся ли браузеры? Должны ли мы?

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

Ответы [ 6 ]

6 голосов
/ 04 августа 2011

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

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

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

2 голосов
/ 04 августа 2011

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

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

1 голос
/ 06 августа 2011

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

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

Проведенные мною тесты Я создал тестовую страницу с 60 000 элементов div, каждый из которых имеет уникальный атрибут ID.К каждому из этих идентификаторов было применено собственное правило 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, возможно, что внешние серверы приведут к другому набору результатов, но в настоящее время я не могу это проверить.

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

  • Размещение элемента перед всеми сгенерированными элементами div, посередине и в конце
  • Перед размещением определения CSS диапазона,в середине или в конце файла CSS.

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

1 голос
/ 04 августа 2011

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

div.foo {}

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

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

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

0 голосов
/ 04 августа 2011

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

0 голосов
/ 04 августа 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...