mootools: как разместить 10000 тегов <div>на одной странице - PullRequest
Новая
       12

mootools: как разместить 10000 тегов <div>на одной странице

1 голос
/ 07 февраля 2011

Я разработал приложение в mootools.Но его количество медленных тегов почти равно 10000.и структура каждого тега имеет вид: 

<div style="float:left;padding:5px;margin: 6px;"> <!-- tag-1 -->
 <img src=""> <p>name</p> <p>Gender</p> <p>Mood</p> 
</div>

в следующем контейнере 

<div id="tags_container" style="overflow: scroll;height: 700px;">
 <div style="float:left;padding:5px;margin: 6px;"> <!-- tag-1 -->
  <img src=""> <p>name</p> <p>Gender</p> <p>Mood</p> 
 </div>
 <!-- tag-2 -->
   .  
   .
   .
 <!-- all tags one after another -->
</div>

im, показывающий эти теги в формате строк и столбцов (5 столбцов и 2000 строк).Id = "tags_container"

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

что мне с этим делать?

если мне изменить метод реализации с тегов

натег

Ответы [ 6 ]

7 голосов
/ 07 февраля 2011

Я сделал как-то так раньше.Используйте больше классов CSS и меньше элементов, и удалите все ненужное (например, комментарии).Хотя данные носили табличный характер, я обнаружил, что намного проще создать идеальный по пикселям макет, используя <div> s.

Разметка 

<div class="cell">
 <img src=""> <p>name</p> <p>Gender</p> <p>Mood</p> 
</div>

CSS 

div.cell {
    float: left;
    padding: 5px;
    margin: 6px;
}

Если возможно, также может быть быстрее использовать CSS spriting для изображений, а не 10k больше элементов для изображений.Что-то вроде:

Разметка 

<div class="cell" style="background-position: 0px 0px;">
    <p>name</p> <p>Gender</p> <p>Mood</p> 
</div>

CSS 

div.cell {
    float: left;
    padding: 5px;
    margin: 6px;
    background-image: url(path/to/sprite);
    background-repeat: no-repeat;
}

Редактировать Если вам нужно сделатьЛюбая манипуляция DOM с этими элементами, я рекомендую загрузить их все в массив JS - один раз - и затем обращаться к ним по индексу из массива.Неоднократные запросы DOM для тех же элементов приведут к снижению производительности.

Если возможно, также удалите элементы <p> внутри каждого <div>.Если у вас есть 10k <div> элементов, каждый из которых содержит 3 <p> s, то вы действительно работаете с минимумом 40k элементов.

Это много DOM, детка.

Если вы можете понять, как получить одинаковую раскладку, удаляя даже 1 или 2 <p> с из каждого <div>, вы мгновенно получаете до 20К или 30К элементов.

1 голос
/ 07 февраля 2011

Почему бы не использовать стол? Похоже, вы пытаетесь построить таблицу с divs.

0 голосов
/ 08 февраля 2011

Нужно ли показывать все 10000 строк на странице одновременно?Возможно, вы могли бы взглянуть на реализацию плагина ScrollSpy , разработанного Дэвидом Уолшем.Это позволит вам загрузить меньший начальный набор записей, а затем получить доступ к большему количеству записей при необходимости.

0 голосов
/ 07 февраля 2011

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

0 голосов
/ 07 февраля 2011

Это, кажется, точная причина, по которой таблицы были созданы в первую очередь - данные табличных стилей. По какой причине вы еще не используете таблицы?

0 голосов
/ 07 февраля 2011

Для меня это звучит как табличный документ.Почему бы не использовать таблицу?

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

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

...