Управление памятью при скролле JavaScript?

Question

[Igor Fedorov]

Здравствуйте. Допустим, есть такое дерево:

<div id="wrap">
    <div><b>Title</b><span>Content</span></div>
    <div><b>Title</b><span>Content</span></div>
    <div><b>Title</b><span>Content</span></div>
    <div><b>Title</b><span>Content</span></div>
    <div><b>Title</b><span>Content</span></div>
    <div><b>Title</b><span>Content</span></div>
    <div><b>Title</b><span>Content</span></div>
    <div><b>Title</b><span>Content</span></div>
    <div><b>Title</b><span>Content</span></div>
    <div><b>Title</b><span>Content</span></div>
    <div><b>Title</b><span>Content</span></div>
    <div><b>Title</b><span>Content</span></div>
    <div><b>Title</b><span>Content</span></div>
    <div><b>Title</b><span>Content</span></div>

    <!-- И таких порядка 3-5 тысяч. Причём, вложенных элементов гораздо больше, чем в примере -->

</div>

Как оптимизировать всё это?
ТО есть скролл такого списка на компе превращается в ад, про телефон я молчу.
Какие есть методы?

Answer 1

[Nwton]

Гугли "javascript infinite scroll optimization". Куча решений проблемы схожей с твоей.

Answer 2

[romy4]

Генерируете внизу слои, удаляете сверху. Вместо верхник просто добавляете margin слоёв, чтобы выглядело реально со скролом. А реальный контет хранится у вас где-то в переменных.

Comments

[Igor Fedorov]

Очень бы хотелось увидеть где-то реализацию. Контент хранится в переменной.

[romy4]

Igor Fedorov: я такой [пример] контент предоставить не могу, за него заплачено много денег. Но что-то подобное, вроде бы, видел в Tables для Angular