LINUX.ORG.RU

Маленький вопрос по оптимизации CSS


0

1
...
<div class="main">
	<div class="post">...<span class="the">some text</span>...</div>
	<div class="post">...</div>
	<div class="post">...</div>
	...
</div>
...
<span class="the">2 some text</span>
...

Какой селектор будет обрабатываться быстрее:

.main .the {...}
или
.post .the {...}

При условии, если .the есть только в одном .post, или наоборот, в нескольких .post...

.post .the {...} должен иметь больший приоритет, тут нет понятия скорости обработки, тут есть очерёдность и приоритеты

shrub ★★★★★
()

Не экономь на спичках. Для чего?

У меня, например, стили бывало вырастали до 20 000 строк (что-то около 5-6 тыс селекторов). Ничего, нигде не тормозило.

SteveBallmer
()
Ответ на: комментарий от shrub

иными словами

<style>
.main .the {color: red}
.post .the {color: green}
</style>
<div class="main">
	<div class="post">...<span class="the">some text</span>...</div>
	<div class="post">...</div>
	<div class="post">...</div>
	...
</div>
[/coode]

цвет текста будет зелёным
shrub ★★★★★
()
Ответ на: комментарий от shrub

> .post .the {...} должен иметь больший приоритет

Спасибо, Кэп.

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

moscwich
() автор топика
Ответ на: комментарий от moscwich

Если делать, так делать идеально (или хотя бы пытаться).

Это не есть идеально. Сколько не работал в команде с разными верстальщиками с версткой, никто не заморачивается на таких ложных оптимизациях. И нигде ничего не тормозит.

CSS и верстка — это все-таки не совсем программирование. Правила немного иные.

SteveBallmer
()
Ответ на: комментарий от SteveBallmer

И тем не менее, у меня нет не одного аргумента в сторону какого-либо из вариантов, а значит я в ступоре и не могу продолжать.

moscwich
() автор топика
Ответ на: комментарий от moscwich

Ок, вот тогда другая

То, что нельзя измерить, нельзя и улучшить.

Другими словами, с чего ты взял, что один вариант будет всегда быстрее другого? Не задумывался о том, что в разных бравзерах всё может отличаться? Как ты это бенчмаркаешь? Если никак, то просто подбрось монетку и избавься от ступора :)

Apple-ch ★★
()
Ответ на: комментарий от moscwich

У веб-дизайнера тоже нет объективного объяснения почему отступ между картинкой и текстом должен равняться 30 пикселям, а не 25, в определенной ситуации. Равно как и ручной кернинг (letter-spacing) понятие очень субъективное и интуитивное для каждого человека/дизайнера.

Ты тоже будешь сидеть и размышлять над тем, лучше ли применить margin:20px 0 0 0; или margin:30px 0 0 0;? Ты ведь просто интуитивно задашь «значение красивее».

Так и в целом: кто-то любит #loginWindowWrap .closeButton .closeButtonCross, а кому-то нравится .b-login-window .b-close-but .ico-but-cross. А на разницу в 2—3 миллисекунды как-то можно не обращать внимание. Читабельность, удобство и consistency — во главе угла.

SteveBallmer
()
Ответ на: комментарий от SteveBallmer

> У веб-дизайнера...

Не быть веб-дизайнером... Имеет место быть практически полное отсутствие ГМ и over9000 подобных психологических особенностей.

Ты ведь просто интуитивно задашь «значение красивее».


Я пробую оба варианта, вижу какой из них лучше смотрится. Это аргумент.

на разницу в 2—3 миллисекунды как-то можно не обращать внимание.


Вот 30 раз по 2 миллисекунды - уже полсекунды, а это уже важно.

Читабельность, удобство и consistency — во главе угла.


Это были бы тоже аргументы. А у меня здесь нет ни одно аргумента: какой из вариантов сабжа читабельные/удобнее?

moscwich
() автор топика
Ответ на: Ок, вот тогда другая от Apple-ch

> Другими словами, с чего ты взял, что один вариант будет всегда быстрее другого? Не задумывался о том, что в разных бравзерах всё может отличаться? Как ты это бенчмаркаешь? Если никак, то просто подбрось монетку и избавься от ступора :)

Религия не позволяет. Это же уже не аргумент...
Мне бы хоть какой-нибудь аргумент, не обязательно по производительности...

moscwich
() автор топика
Ответ на: комментарий от moscwich

> 30 раз по 2 миллисекунды - уже полсекунды

попробуй ещё раз

и я даже не уверен, что переписать свойство объекта займет целых две миллисекунды

wxw ★★★★★
()

На самом деле™ ты должен написать так, как по логике. К чему у тебя the относится? А если будет другое the внутри другого класса внутри main? В зависимости от того, что тебе нужно, то ты и должен написать.

Deleted
()
Ответ на: комментарий от Deleted

> На самом деле™ ты должен написать так, как по логике. К чему у тебя the относится? А если будет другое the внутри другого класса внутри main?

Ну в том то и дело, что нет.

Но спасибо хоть за какой-то аргумент.

moscwich
() автор топика
Ответ на: комментарий от moscwich

Ну, посмотри на это с такой стороны. Они все должны быть в post? Если да, то .post .the, если нет, то .main .the. Если же .the вообще может быть везде, то просто .the. Как-то так.

Deleted
()

Если там поиск втупую, то наверняка он выполняется для каждой ноды в DOM. Тогда, чем больше дырок в цепочке поиска, тем сильнее тормозит. В *main*the* и в *post*the* по три дырки (три звездочки). Вот если бы ты использовал child selector, это нейтрализовало бы одну дырку посередине, и это была бы нефиговая оптимизация =)

stevejobs ★★★★☆
()
Ответ на: комментарий от stevejobs

> нефиговая оптимизация

простейший тест тупо 10000 нод: хром 0.8 секунд на итерацию, в _любом_ варианте

wxw ★★★★★
()
Ответ на: комментарий от SteveBallmer

> Child selector не работает в MSIE6. Бесполезное свойство для профессиональных верстальщиков.

Какой нах IE6 во втором десятке двадцать первого века?
А если заказчик таки такой мyд...к, то для IE<=7 пишется отдельный CSS и впихавается ПХПшом в нужном случае.

moscwich
() автор топика
Ответ на: комментарий от moscwich

Какой нах IE6 во втором десятке двадцать первого века?

А если заказчик таки такой мyд...к, то для IE<=7 пишется отдельный CSS и впихавается ПХПшом в нужном случае.

Я лучше перестрахуюсь лишний раз и посижу 2—3 дня над тем, чтобы верстка работала в MSIE6 тоже. Зато буду уверен, что потенциальный покупатель/регистрант не уйдет просто так с сайта с пустыми руками.

Тем более баги MSIE6 изучены и известны очень хорошо. Можно верстать не глядя в MSIE6 и уже знать, что не понравится ему, когда будешь смотреть в нем. css3pie есть, ddbelatedpng есть, рецептов в сети вагон.

SteveBallmer
()
Ответ на: комментарий от moscwich

на десять тысяч узлов
т.е. применение стиля к каждой отдельной фразы «some text» в среднем занимает 0,00008 сек. (на моем металлоломе)
и это, кстати говоря, со затратами на визуализацию, т.е. сколько всего машинного времени затратил браузер на перекрашивание длиннющей портянки

wxw ★★★★★
()
Ответ на: комментарий от wxw

> на десять тысяч узлов

т.е. сколько всего машинного времени затратил браузер на перекрашивание длиннющей портянки


Я тебя не понимаю. И предыдущий пост толком тоже не понял... Говори по-русски.

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

moscwich
() автор топика

Долбоклюи-оптимизаторы... Как страшно жыть.

anonymous
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.