Самый оптимизированный CSS для браузеров

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

Учитывая следующее изображение:

A, B, C и D - DOM-объекты (скажем, DIV-элементы) и числа 1-17 представляют атрибуты (например, цвет, фон, ширина, высота и т.д.)

В то время как все числа представляют собой уникальные атрибуты. например:

4 = background-color: #FF0;    
5 = width: 50px;
10 = background-color: #F00;

Существует несколько способов генерации кода css для этого веб-сайта:

Все собственные идентификаторы

#A { 1 2 5 8 9 10 12 }
#B { 1 4 5 11 12 13 14 15 }
#C { 1 2 3 5 7 }
#D { 3 4 5 6 16 17 }

Тем не менее, файл будет очень большим, атрибуты не будут использоваться совместно и простые тестовые доказательства, которые это довольно медленно сделать. (image1.html, см. создание файла script ниже)

Поделиться некоторыми общими атрибутами

#A { 2 8 9 10 12 }
#B { 4 11 12 13 14 15 }
#C { 2 3 7 }
#D { 3 4 6 16 17 }
.1 { 1 }
.5 { 5 }

Файл будет меньше, и рендеринг кажется более быстрым. (см. image2.html)

Поделиться всеми общими атрибутами

#A { 8 9 10 }
#B { 11 13 14 15 }
#C { 7 }
#D { 6 16 17 }
.1 { 1 }
.3 { 3 }
.2 { 2 }
.4 { 4 }
.5 { 5 }
.12 { 12 }

Файл будет еще меньше (большую часть времени), и, как оказалось, рендеринг идет быстрее. Но обратите внимание, что A, B и C заканчивается одним ID и 4 классами, которые содержат только один атрибут! (см. image3.html)

Теперь это три простых примера кода CSS. Но, как вы можете себе представить, когда существует больше объектов DOM и существует больше совпадений атрибутов, теоретически вы можете получить один объект DOM с 1 идентификатором и 10'-ыми классами!

Какой CSS-код гипотетически наиболее оптимизирован? (для современных браузеров) Должны ли вы ограничивать количество классов на объект DOM? если вы предпочитаете "отдельный атрибут, содержащий класс", добавляя его в ID?

p.s. В качестве теста я загрузил изображение с помощью PHP. Затем прочитайте значение пикселя этого PNG и создайте ту же картинку, используя CSS и DIV-элементы. Код для генерации image1.html, image2.html и image3.html можно найти здесь Вы можете использовать ЛЮБЫЕ изображения PNG... Я использовал это изображение

Ответ 1

Браузеры должны делать такую оптимизацию внутренне, поскольку они "компилируют" CSS. Компилятор отвечает за оптимизацию, потому что он знает о деталях его реализации и способен рассказать, что лучше всего соответствует его потребностям.

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

Это фактически соответствует тому, что Antti Koivisto, вкладчик ядра WebKit, сказал в 2011 году, потратив некоторое время на оптимизацию своего выбора селектора CSS:

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

^{Цитата через Изменена производительность селектора CSS! (К лучшему) Николь Салливан. Хороший источник современной оптимизации CSS, BTW. Статья упоминается в примечании в верхней части устаревшей статьи 2000 Написание эффективного CSS" Дэвида Хаятта.}

Поэтому беспокойство о преждевременной оптимизации, выраженное некоторыми комментаторами и разделяемое мной, вероятно, оправданно.

Ответ 2

вы уже ответили на свой вопрос с помощью теста, который вы создали.

@torazaburo предоставил хорошие результаты для вашего вопроса.

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

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

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

Ответ 3

Одна неудача, о которой я думаю, является отзывчивой. Возьмем, например, этот код:

HTML:

<ul class="overflowHidden blackOnePixelBorder resetPadddingAndMargin noListStyle">
    <li class="backgroundGreen floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundRed floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundBlue floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundRed floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundBlue floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundGreen floatLeft threePerRow heightTwoHunderPixels"></li>
</ul>

CSS

.resetPadddingAndMargin {
    padding: 0;
    margin: 0;
}
.noListStyle {
    list-style: none;
}
.overflowHidden {
    overflow: hidden;
}
.blackOnePixelBorder {
    border: 1px solid #000;
}
.backgroundRed {
    background: #f00;
}
.backgroundGreen {
    background: #0f0;
}
.backgroundBlue {
    background: #00f;
}
.floatLeft {
    float: left;
}
.threePerRow {
    width: 33.33%;
}
.heightTwoHunderPixels {
    height: 200px;
}

http://jsfiddle.net/bqh8he7e/

Как вы собираетесь решить проблему перекрытия CSS-кода или хотите использовать один класс в разных разрешениях или устройствах без перезаписи, когда хотите иметь все квадраты в одной строке? (* без JS)

(Надеюсь, я понял вашу идею)