Wydajność z nieskończonym przewijaniem lub wieloma elementami dom?

Mieliśmy do czynienia z podobnym problemem naFoldingText . W miarę powiększania się dokumentu tworzono więcej elementów linii i powiązanych elementów zakresu. Silnik przeglądarki wydawał się dławić, więc trzeba było znaleźć lepsze rozwiązanie.

Oto, co zrobiliśmy, może lub nie być przydatne dla Twoich celów:

Wizualizuj całą stronę jako długi dokument, a Widok przeglądarki jako obiektyw dla określonej części długiego dokumentu. Naprawdę musisz tylko pokazać część w obiektywie.

Więc pierwszą częścią jest obliczenie widocznego portu widoku. (To zależy od tego, jak twoje elementy są umieszczone, absolutne / stałe / domyślne)

var top = document.scrollTop;
var width = window.innerWidth;
var height = window.innerHeight;

Więcej zasobów, aby znaleźć widok oparty na wielu przeglądarkach:

Get the browser viewport dimensions with JavaScript

Metoda Cross-browser do wykrywania przewijania okna przeglądarki

Po drugie, potrzebujesz struktury danych, aby wiedzieć, które elementy są widoczne w obszar

Mieliśmy już zrównoważone binarne drzewo wyszukiwania dla edycji tekstu, więc rozszerzyliśmy je również o zarządzanie wysokością linii, więc ta część była dla nas stosunkowo łatwa. Nie sądzę, że będziesz potrzebował złożonej struktury danych do zarządzania wysokościami elementów; prosta tablica lub obiekt może się przydać. Po prostu upewnij się, że możesz łatwo wyszukiwać wysokości i wymiary. Teraz, jak można uzyskać dane wysokości dla wszystkich elementów. Bardzo prosty (ale kosztowny dla dużych ilości żywiołów!)

var boundingRect = element.getBoundingClientRect()

Mówię w kategoriach czystego javascript, ale jeśli używasz jQuery $.offset, $.position, i metody wymienione tutaj byłyby bardzo pomocne.

Ponownie, użycie struktury danych jest ważne tylko jako pamięć podręczna, ale jeśli chcesz, możesz to zrobić w locie(choć jak już powiedziałem, te operacje są drogie). Uważaj również na zmianę stylów css i wywoływanie tych metod. Te funkcje wymuszają przerysowanie, więc zobaczysz problem z wydajnością.

Wreszcie, po prostu zastąp elementy poza ekranem pojedynczym, powiedzmy <div> elementem o obliczonej wysokości

• Teraz masz wysokość dla wszystkich elementów przechowywanych w Twojej strukturze danych, odpytaj wszystkie elementy, które leżą przed widocznym widokiem.

• Tworzenie <div> z ustawieniem wysokości css (w pikselach) na sumę wysokości elementu

• oznacz go nazwą klasy, abyś wiedział, że jest wypełniaczem div
• Usuń wszystkie elementy z dom, które to Pokrowce div
• Wstaw ten nowo utworzony div zamiast

Powtórz dla elementów leżących po widocznym polu widzenia.

Wyszukaj zdarzenia przewijania i zmiany rozmiaru. Przy każdym przewijaniu musisz wrócić do swojej struktury danych, usunąć divy wypełniacza, utworzyć elementy, które zostały wcześniej usunięte z ekranu, a zatem dodać nowe divy wypełniacza.

:) to długa, złożona metoda, ale w przypadku dużych dokumentów zwiększyła naszą wydajność o dużą margines.

Tl;dr

Nie jestem pewien, czy dobrze to wyjaśniłem, ale istotą tej metody jest:

• poznaj pionowe wymiary swoich elementów
• poznaj przewijany Port widoku
Wszystkie elementy wyświetlane poza ekranem mają jeden div (wysokość równa sumie wszystkich wysokości elementów, dla których obejmuje).]}
• będziesz potrzebował dwóch div w sumie w danym momencie, jeden dla elementów powyżej widocznego viewportu, jeden dla elementów poniżej.
• śledź Port widoku poprzez nasłuchiwanie zdarzeń przewijania i zmiany rozmiaru. Odtwórz odpowiednio Div I widoczne elementy