Jump to content
  • 0

DOM или Sprite


sktemp
 Share

Question

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

Link to comment
Share on other sites

17 answers to this question

Recommended Posts

  • 0

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

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

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

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

Link to comment
Share on other sites

  • 0

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

? ? ?

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

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

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

Edited by sktemp
Link to comment
Share on other sites

  • 0

Вместо


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

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


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

и стиль ему


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

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

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

Edited by sktemp
Link to comment
Share on other sites

  • 0

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

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

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

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

Edited by wwt
Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

Плагины:

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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


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

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

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

Link to comment
Share on other sites

  • 0

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

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


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

или


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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

Чем же он удобнее? В первом случае все правила в одном месте и не требуется искать по всему 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 by wwt
  • Like 2
Link to comment
Share on other sites

  • 0

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

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

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

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

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy