Какая из этих частей CSS более эффективна для достижения желаемого результата?

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

Вариант 1:

 ol.red-numbers > li:before { color: #A71930; padding-right: 5px; } 
     ol.red-numbers > li:nth-of-type(1):before { content: "1"; } 
     ol.red-numbers > li:nth-of-type(2):before { content: "2"; } 
     ol.red-numbers > li:nth-of-type(3):before { content: "3"; }

Вариант 2:

 ol.red-numbers > li:nth-of-type(1):before { color: #A71930; padding-right: 5px; content: "1"; } 
     ol.red-numbers > li:nth-of-type(2):before { color: #A71930; padding-right: 5px; content: "2"; } 
     ol.red-numbers > li:nth-of-type(3):before { color: #A71930; padding-right: 5px; content: "3"; }

источник

2015-03-02 Neil Peart

«И есть ли какие-либо дополнительные микро-оптимизации, которые я могу сделать?» По крайней мере, ты понимаешь, что делаешь, но ... тебе нечего делать? – BoltClock

@BoltClock Мудрый человек однажды сказал: «Микро-оптимизация - величайшее благо». –

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

..are есть какая-либо дополнительные микро-оптимизация, которые я могу сделать?

Поскольку вы выбираете элементы на основе их индекса, и дать им соответствующее content значение, вы можете использовать counter-increment, чтобы сделать это автоматически, предполагая, что эта картина линейный (как предлагает вам CSS):

ol { 
 
    list-style-type: none; 
 
    counter-reset: item 0; 
 
} 
 
ol > li { 
 
    counter-increment: item; 
 
} 
 
ol.red-numbers > li:before { 
 
    content: counter(item) " pseudo-element "; 
 
    color: #A71930; 
 
    padding-right: 5px; 
 
}

<ol class="red-numbers"> 
 
    <li>List</li> 
 
    <li>List</li> 
 
    <li>List</li> 
 
    <li>List</li> 
 
    <li>List</li> 
 
</ol>

источник

2015-03-02 15:28:00

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

@BramVanroy Хорошая точка. Но, учитывая, что ОП упоминает «устранение пробелов», я предположил, что они означают сокращение байтов в таблице стилей. Не уверен. Это немного странно, учитывая, что список автоматически пронумерован. –

Существует обширный анализ, проведенный Стив souders.Check из этой статьи

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/.

Самым большим сюрпризом является то, насколько маленькая дельта от базовой линии до самой сложной, наихудшей тестовой страницей. Среднее замедление во всех браузерах составляет 50 мс.

Так что практически это не имеет значения, думаю.

источник

2015-03-02 15:33:22

Какая из этих частей CSS более эффективна для достижения желаемого результата?

ответ

Смежные вопросы