Нам довелося мати справу з подібною проблемою на FoldingText . У міру того як документ збільшувався, створювалося більше елементів рядка та пов'язаних з ним елементів прольоту. Здавалося, двигун браузера просто задихнувся, і тому потрібно було знайти краще рішення.
Ось що ми зробили, може бути, а може не бути корисним для ваших цілей:
Візуалізуйте всю сторінку як довгий документ, а область перегляду браузера як об’єктив для певної частини довгого документа. Насправді вам потрібно лише показати ту частину в об’єктиві.
Отже, перша частина - це обчислення порту видимого перегляду. (Це залежить від розміщення елементів, абсолютного / фіксованого / за замовчуванням)
var top = document.scrollTop;
var width = window.innerWidth;
var height = window.innerHeight;
Дещо більше ресурсів, щоб знайти більше вікна перегляду на основі браузера:
Отримайте розміри області перегляду браузера за допомогою JavaScript
Метод перехресного перегляду для виявлення прокрутки доверху вікна браузера
По-друге, вам потрібна структура даних, щоб знати, які елементи видно в цій області
У нас вже було збалансоване двійкове дерево пошуку для редагування тексту, тому ми також розширили його для управління висотами рядків, тому ця частина для нас була відносно простою. Я не думаю, що вам знадобиться складна структура даних для управління висотами елементів; простий масив або об'єкт може добре справитись. Просто переконайтеся, що ви можете легко запитувати висоту та розміри на ньому. Тепер, як би ви отримали дані про висоту для всіх ваших елементів. Дуже простий (але обчислювально дорогий для великої кількості елементів!)
var boundingRect = element.getBoundingClientRect()
Я говорю з точки зору чистого JavaScript, але якщо ви використовуєте JQuery $.offset, $.positionі методи , перераховані тут , було б дуже корисним.
Знову ж таки, використання структури даних важливо лише як кеш, але якщо ви хочете, ви можете зробити це на льоту (хоча, як я вже зазначав, ці операції є дорогими). Крім того, остерігайтеся зміни стилів css та виклику цих методів. Ці функції змушують перемальовувати, тому ви побачите проблему з продуктивністю.
Нарешті, просто замініть елементи поза екраном на один, скажімо, <div>елемент із розрахунковою висотою
Тепер у вас є висоти для всіх елементів, що зберігаються у вашій структурі даних, запитуйте всі елементи, які лежать перед видимим вікном перегляду.
Створіть <div>з набором висоти css (у пікселях) суму висот елементів
- Позначте його назвою класу, щоб ви знали його заповнювач div
- Видаліть усі елементи з купола, який охоплює цей div
- вставити замість цього щойно створений div
Повторіть для елементів, які лежать після видимого вікна перегляду.
Шукайте події прокрутки та зміни розміру. На кожному прокручуванні вам потрібно буде повернутися до структури даних, видалити заповнювачі div, створити елементи, які раніше були видалені з екрана, і відповідно додати нові div заповнювача.
:) Це довгий, складний метод, але для великих документів він значно збільшив наші показники.
tl; д-р
Я не впевнений, що я це правильно пояснив, але суть цього методу:
- Знайте вертикальні розміри ваших елементів
- Знати порт прокрутки подання
- Представляти всі позаекранні елементи за допомогою одного div (висота, що дорівнює сумі всіх висот елементів, які вона охоплює)
- У будь-який момент вам знадобляться два div, загалом, один для елементів над видимим вікном перегляду, другий для елементів нижче.
- Відстежуйте порт перегляду, слухаючи події прокрутки та зміни розміру. Відтворіть відповідно div та видимі елементи
Сподіваюся, це допомагає.
