DOM или Sprite

sktemp · September 12, 2012

В вёрстке мне необходимо изображать несколько квадратов внутри ячейки таблицы. Их можно сделать с помощью применения стилей к некоторому элементу DOM. Например, сделать три div. С одинаковой шириной и высотой, дать отступ справа, выровнять их вправо с помощью float. Но можно сделать Sprite и подставлять эти же квадратики фоном. Я уже делал и так и так. По моим наблюдение много float тормозит отображение. А использование фонового изображения создаёт эффект, что картинки появляются не сразу. Так как таких квадратиком до сотни на странице. Какие вы видите за или против этих двух способов? Или может есть что-то лучше, чем я описал?

ShumNo · September 12, 2012

если делали и так и так показали бы результат - был бы наглядный предмет обсуждения

sktemp · September 14, 2012

если делали и так и так показали бы результат - был бы наглядный предмет обсуждения

Вот результат

Он пока без пресловутых квадратиков, так как я не знаю как их вставить в этом сервисе. Справа от зелёного слова ТЕКТ должны быть квадратики. Но вопрос не только в них. Я сверстал нижние блоки в ячейках с помощью float. Я ещё знаю два способа. С помощью позиционирования внутри каждой ячейки. И с помощью inline-block. Что вы посоветуете?

И те же квадратики можно сделать с помощью float:right. А можно фоновую картинку делать.

wwt · September 14, 2012

а зачем там вообще эти квадратики? Каково их назначение?

ЗЫ Такой вариант не рассматривали ?

? ? ?

Edited September 14, 2012 by wwt

sktemp · September 14, 2012

ЗЫ Такой вариант не рассматривали ?
? ? ?

Нет, не рассматривал. Даже не знал, что такое вариант есть. Но чтобы их сделать по правому краю, а зелёный текст по левому надо делать дополнительный тег. Так ведь? У меня задача не просто сверстать, а чтобы это отображалось быстро. Фоновая картинка не требует дополнительного тега, но в Explorer возникает эффект, что все ячейки уже отобразились и только в самом конце после паузы появляются квадратики. А использование float замедляет отображение ячеек в том же Explorer. Оба эффекта заметны когда несколько сотен ячеек.

а зачем там вообще эти квадратики? Каково их назначение?

Показать тип ячейки. Такой дизайн, он не подлежит переработке. Мне надо увеличить скорость работы.

Edited September 14, 2012 by sktemp

wwt · September 17, 2012

Вместо


<strong>ТЕКСТ</strong>

сделайте еще раз


<div>ТЕКСТ</div>

и стиль ему


text-align:left;
background-image: url(my.jpg) no-repeat;
background-position:right;

sktemp · September 17, 2012

Вместо
<strong>ТЕКСТ</strong>
сделайте еще раз
<div>ТЕКСТ</div>
и стиль ему
text-align:left;
background-image: url(my.jpg) no-repeat;
background-position:right;

А зачем text-align:left;?

Вы считаете что добавление фонового изображения будет работать быстрее, чем увеличение количества элементов DOM?

Edited September 17, 2012 by sktemp

wwt · September 17, 2012

А зачем text-align:left;?
Вы считаете что добавление фонового изображения будет работать быстрее, чем увеличение количества элементов DOM?

1) ну можно и не задавать выравнивание в лево если оно и так по умолчанию влево.

2) Вы сами не знаете чего хочете, то жалуетесь что float будет тормозить, то картинки будут медленнее доп. элементов. Вы уж определитесь.Я вам написал как сделать так чтоб был 1 элемент содержащий и текст и квадратики на бекграунде, без дополнительных элементов и флоатов. Дальше решайте сами как поступить.

Edited September 17, 2012 by wwt

sktemp · September 17, 2012

А зачем text-align:left;?
Вы считаете что добавление фонового изображения будет работать быстрее, чем увеличение количества элементов DOM?
1) ну можно и не задавать выравнивание в лево если оно и так по умолчанию влево.
2) Вы сами не знаете чего хочете, то жалуетесь что float будет тормозить, то картинки будут медленнее доп. элементов. Вы уж определитесь.Я вам написал как сделать так чтоб был 1 элемент содержащий и текст и квадратики на бекграунде, без дополнительных элементов и флоатов. Дальше решайте сами как поступить.

Я делал и так и так. Моя задача сделать отображение максимально быстрым. Решил обратиться к опыту сообщества. На данный момент вёрстка уже внедрена способом, подобным предложенным вами. Отличие в том, что я использую strong, чтобы были разные теги. Как вы считаете будет быстрее работать - делать разные классы или делать один основной класс и далее все стили применить к тегам внутри этого класса?

Неужели нет тестов для проверки скорости отображения страницы?

Viper · September 17, 2012

Неужели нет тестов для проверки скорости отображения страницы?

Их просто немерено...

Плагины:

Yslow, Page Speed, в Firebuge закладка - Сеть, различные Profiles(для js) и Timelines и тд...

Онлайн тесты, например:

_http://womtec.ru/2010/09/web-site-speed-check-tools/

Как вы считаете будет быстрее работать - делать разные классы или делать один основной класс и далее все стили применить к тегам внутри этого класса?

Меньше каскада в CSS - больше скорость. Но каждый сайт нужно анализировать отдельно, а не бросаться бездумно в минимализм...

П.С. "Скорость рендеринга страниц: исследования, замеры, автоматизация": _http://video.yandex.ua/users/ya-events/view/275/?cauthor=ie6-exe&cid=1

sktemp · September 17, 2012

Спасибо. Буду изучать.

Как вы считаете будет быстрее работать - делать разные классы или делать один основной класс и далее все стили применить к тегам внутри этого класса?
Меньше каскада в CSS - больше скорость. Но каждый сайт нужно анализировать отдельно, а не бросаться бездумно в минимализм...

Я не понял ваш ответ. Я всегда делаю так:

#apa div{}
#apa span{}
#apa strong{}

Но может быть быстрее будет отображаться, если сделать 3 класса? Я всегда исходил из того, что писать class - это лишние килобайты, которые будут передаваться. А css кешируется.

Viper · September 17, 2012

Я не понял ваш ответ. Я всегда делаю так:
#apa div{}
#apa span{}
#apa strong{}
Но может быть быстрее будет отображаться, если сделать 3 класса? Я всегда исходил из того, что писать class - это лишние килобайты, которые будут передаваться. А css кешируется.

Лучше, например, так:


.apa-div{}
.apa-span{}
.apa-strong{}

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

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

sktemp · September 17, 2012

Спасибо за разъяснение.

А что будет быстрее применяться?


.class1{ color:green;
}
.class2{ color:green;
}
.class3{ color:green;
}

или


.class1, .class2, .class3{ color:green;
}

Стоит ли для каждого класса описывать все свойства или повторяющиеся свойства записывать в группы?

Viper · September 17, 2012

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

sktemp · September 18, 2012

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

Чем же он удобнее? В первом случае все правила в одном месте и не требуется искать по всему CSS остальные свойства для этого элемента.

wwt · September 18, 2012

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

Удобнее к примеру


.class1,
.class2,
.class3 {
   font-family:Arial;
   font-size: 1em;
   color: blue;
}

Вы задаете настройки шрифта в одном месте, а не для каждого класса в отдельности.

Это много удобнее чем так:


...
.class1 {
   font-family:Arial;
   font-size: 1em;
   color: blue;
}
...
.class2 {
   font-family:Arial;
   font-size: 1em;
   color: blue;
}
...
.class3 {
   font-family:Arial;
   font-size: 1em;
   color: blue;
}
...

Да и файл весит меньше.По-моему это очевидно что группировать нужно общие по смыслу свойства, а если у .class1 к примеру есть еще свои свойства, вам ничто не мешает сделать так:


.class1,
.class2,
.class3 {
   font-family:Arial;
   font-size: 1em;
   color: blue;
}
.class1 {
   padding:5px;
}

Как говорится нужно понимать когда группировка нужна а когда нет.

Edited September 18, 2012 by wwt

Viper · September 18, 2012

Чем же он удобнее? В первом случае все правила в одном месте и не требуется искать по всему CSS остальные свойства для этого элемента.

В твоем примере нету разницы в стилях. Всегда нужно анализировать ситуацию исходя из поставленных задач и имеющихся факторов/данных.

Не бывает единого ответа на все случаи жизни.

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

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

sktemp · September 19, 2012

Я переверстал ячейки, уменьшив число элементов DOM. Теперь Yslow пишет Grade C on Reduce the number of DOM elements (раньше было D). Значит ли это, что Yslow знает способ сделать ещё меньше элементов? Я вот не представляю что ещё можно сделать.

Sign In

DOM или Sprite

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information