Вопросы Теги

Действительно ли полностью определенные стили CSS эффективны?

Вложенная IFS (незначительно менее подробный): 

if not isNull(Rs("myField")) Then
   if Rs("myField") <> 0 then
11
задан ChrisP 14 August 2009 в 01:21
поделиться

6 ответов

Google (не поиск, на самом деле они), кажется, думает, что это действительно снижает производительность.

Кроме того, в Mozilla Foundation есть статья « Написание эффективных CSS для использования в пользовательском интерфейсе Mozilla ", в котором описаны возможные проблемы с производительностью селекторов CSS в их браузерах и способы оптимизации правил стиля для их механизма визуализации. В их статье есть масса примеров того, что хорошо, а что плохо. Однако имейте в виду, что это относится только к их браузерам.

Также есть несколько общедоступных тестов, касающихся влияния селекторов CSS на скорость рендеринга:

Я, однако, думаю, что это, по большей части, конский навоз. Вы можете значительно повлиять на скорость загрузки / рендеринга вашей страницы, используя некоторые другие простые оптимизации. Я считаю, что ваше здравомыслие и хорошо организованная кодовая база должны быть на первом месте. Если бы это было такой большой проблемой, как некоторые думают, мы бы все вернулись, используя атрибуты HTML <4 (bgcolor =, border = и т.д.) для стилизации наших веб-страниц.

7
ответ дан 3 December 2019 в 08:30
поделиться
  1. Поиск #id работает быстро.
  2. Поиск тега немного медленнее.
  3. Поиск .class - самый медленный.

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

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

5
ответ дан 3 December 2019 в 08:30
поделиться

Есть ли снижение производительности из-за полной квалификации стиля, то есть он длиннее?

Да, при каждом динамическом изменении DOM-дерева CSS-выражение должно быть повторно сопоставлено по крайней мере с некоторыми узлами . Я сомневаюсь, что это приведет к какой-либо заметной задержке.

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

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

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

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

0
ответ дан 3 December 2019 в 08:30
поделиться

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

0
ответ дан 3 December 2019 в 08:30
поделиться

Возможно, вас заинтересует доклад Дэвида Барона (Mozilla) Google Tech .

1
ответ дан 3 December 2019 в 08:30
поделиться

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

Причина не в размере файла, а в возможности расширить ваш сайт без изменения основного CSS.

Например, у вас есть эта часть на вашем html-сайте: 

<div id="Header">
    <h1>Css example</h1>
    <h2>Welcome to the css example site</h2>
    <p>An example page by davy</p>
</div>

, и это CSS : 

#Header 
{
    background-color: #ffeedd;
    padding: 1em;
}
#Heading h1
{
    font-size: 3em;
    color: #333;
}
#Heading h2
{
    font-size: 1.5em;
    color: #666;
}
#Heading p
{
    margin: 0 0.5em 1.5em 1em;
    font-size: 1.1em;
    color: #999;
}

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

Если бы вы выбрали использование div # Header в основном файле css, вам пришлось бы либо изменить html (что в зависимости от вашей системы может означать создание другого шаблона / главной страницы), чтобы добавить extra class, или создайте более квалифицированный селектор css, такой как body div # Header .

Используя самый короткий селектор, вы все равно можете использовать div # Header {background: ...} для изменения заголовка. Вы можете создать дополнительный файл css и загрузить его в свой заголовок на этой странице (если это разрешено) или добавить определение стиля непосредственно в раздел . Приятно то, что ваш файл css не увеличивается с помощью селекторов для каждой отдельной страницы, и вы можете держаться подальше от classitis .

Вы также можете использовать его для переключения метода изменения размера вашей страницы ( static / fluid), так что один шаблон / главная страница использует CSS по умолчанию, а другой является производным от этого шаблона / masterpage и просто связывает CSS с именем FluidWitdth90.css, чтобы изменить шаблон на гибкий макет шириной 90%.

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

Вы также можете использовать его для переключения метода изменения размера вашей страницы ( static / fluid), так что один шаблон / главная страница использует CSS по умолчанию, а другой является производным от этого шаблона / мастер-страницы и просто связывает CSS с именем FluidWitdth90.css, чтобы изменить шаблон на гибкий макет шириной 90%.

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

Вы также можете использовать его для переключения метода изменения размера вашей страницы ( static / fluid), так что один шаблон / главная страница использует CSS по умолчанию, а другой является производным от этого шаблона / masterpage и просто связывает CSS с именем FluidWitdth90.css, чтобы изменить шаблон на гибкий макет шириной 90%.

0
ответ дан 3 December 2019 в 08:30
поделиться