Implementierungscode für unendliches Scrollen mit n Containerelementen

Szenario

So rendern Sie Listen mit bis zu 10.000 Elementen korrekt.

Durch die Technologie zum unendlichen Laden von Dropdown-Menüs sind Benutzer gezwungen, ständig zu scrollen, um große Inhaltsblöcke anzuzeigen. Bei diesem Ansatz werden beim Scrollen nach unten kontinuierlich neue Inhalte geladen.

Wenn Sie Scrollen als primäre Methode zum Entdecken von Daten verwenden, können Ihre Benutzer länger auf Ihrer Seite bleiben und das Engagement der Benutzer erhöhen. Aufgrund der Popularität sozialer Medien werden von den Benutzern große Mengen an Daten verbraucht. Durch unendliches Scrollen können Benutzer effizient große Mengen an Informationen durchsuchen, ohne auf das Vorladen der Seite warten zu müssen.

Wenn wir unsere Denkweise ändern: Wenn eine Seite aus 10.000 Komponenten in voller Breite besteht, wie können wir dann 5 Komponenten verwenden, um die gesamte Seite dynamisch darzustellen?

Lösung

Wir haben viele Lösungen zur Optimierung langer Listen, wie etwa Paging, Lazy Loading usw. Es gibt eine sehr gute Interaktion (Chrysanthemenbild), die den Benutzern das Warten erleichtert. Auch dieser Plan war sehr erfolgreich.

Wie kann man einen anderen Ansatz finden?

1. Können wir die Paging-Lösung in einer Single-Page-Anwendung analysieren? Es gibt 10 Elemente pro Seite und jedes Paging rendert 10 Elemente entsprechend

2. Können wir eine Klammer verwenden, um die Länge der gesamten Liste zu unterstützen und die entsprechenden 10 Elemente zu rendern, wenn der Bildschirm zur entsprechenden Position scrollt?

Problem mit Flackern

Wenn wir diese Idee umsetzen, treten Flackerprobleme auf. Aufgrund der häufigen Bildlaufereignisse stellen wir fest, dass die angezeigten Elemente ständig neu gezeichnet werden, da wir bei jedem Übergang feststellen, welche zehn Elemente gerendert werden müssen, und sie dann direkt ersetzen.

Die Idee besteht darin, 10 an der für mich sichtbaren Bildschirmposition zu rendern und dann 10 Renderings nach oben und unten abzuleiten, also insgesamt 30. Ersetzen Sie beim Steuern des Renderings immer das obere oder untere Element, damit der Teil, den wir in der Mitte sehen, nicht neu gezeichnet werden muss. Es werden lediglich die vorab gerenderten Daten neu gezeichnet.

Prinzip

Implementieren Sie eine Komponente, die eine Liste mit n Elementen bei einer festen Fenstergröße von 5 Elementen anzeigen kann: d. h., es befinden sich zu jedem Zeitpunkt nur 5 DOM-Container im Infinite-Scroll-Modus mit n Elementen.

 <ul>
        <li style="transform: translate3d(0px, 0px, 0px);">……</li>
        <li style="transform: translate3d(0px, 60px, 0px);">……</li>
    </ul>

• Der Inhalt einer langen Liste weist im Allgemeinen ein regelmäßiges Muster auf. Die Höhe dieser Liste kann direkt anhand der Anzahl der <li> berechnet werden. Wenn es beispielsweise 1000 Elemente gibt und die Höhe jedes Elements 60 Pixel beträgt, können wir schnell berechnen, dass die Höhe der gesamten Liste 60000 Pixel beträgt.
• Nachdem der Container erstellt wurde, wird das interne <li> absolut relativ zu <ul> positioniert und js wird verwendet, um das entsprechende Attribut „transform: translate3d(0px, 0px, 0px);“ jedes <li> direkt zu berechnen.
• Durch die Überwachung der Scrollzeit können wir kontinuierlich das <li> finden, das an der aktuellen Position gerendert werden muss, es mit dem vorherigen Satz von Renderingdaten vergleichen, dasselbe <li> überspringen, die verschiedenen Elemente aus dem vorherigen Satz von Renderingdaten finden und dann entsprechende Ersetzungen vornehmen.

Beispiel: Es gibt 100 Elemente, und nur 5 werden auf der Startseite angezeigt. Zunächst müssen diese 5 <li> [0,1,2,3,4] gerendert werden. Wenn ich ein wenig nach unten scrolle, müssen diese <li> [1,2,3,4,5] gerendert werden. Ersetzen Sie zu diesem Zeitpunkt nicht direkt das gesamte Element, sondern nur die unterschiedlichen Elemente. Die Struktur sollte [5,1,2,3,4] sein. Da es absolut positioniert ist, weicht es vom Standardfluss ab. Ein einzelnes Neuzeichnen wirkt sich nicht auf die anderen vier aus, wodurch die Leistung verbessert wird.

So erreichen Sie es

<!DOCTYPE html>
<html lang="de">

<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
  <meta http-equiv="X-UA-kompatibel" content="ie=edge">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <title>Dokument</title>
  <Stil>
    Körper,
    ul,
    li {
      Rand: 0;
      Polsterung: 0;
      Listenstil: keiner;
    }

    ul {
      Position: relativ;
    }

    ul li {
      Position: absolut;
      oben: 0;
      Breite: 100 %;
      Höhe: 31px;
      Zeilenhöhe: 32px;
      Rahmen unten: 1px durchgezogen #ccc;
    }
  </Stil>
</Kopf>

<Text>
  <ul>
  </ul>
</body>
<Skript>
  //Gesamtcontainer var list = [];
  //Elementcontainer innerhalb des sichtbaren Bereichs var showList = [];
  // Container rendern var renderList = [];
  // Die Höhe jedes Containers var lineHeight = 32

  // Initialisiere 1000 Elemente für (var i = 0; i < 1000; i++) {
    list.push({ id: i, text: 'Zeilenhöhe' + (i + 1) + 'Zeilenhöhe', oben: i * Zeilenhöhe, unten: (i + 1) * Zeilenhöhe })
  }
  // Containerhöhe initialisieren $('ul').attr('style', 'height:' + 1000 * lineHeight + 'px')
  // Suche die Funktion die den Container initialisiert render(top, bottom) {
    Liste anzeigen = []
    // Markiere mit den gerenderten Daten, welche Daten wiederholt werden, und dieser Teil wird nicht wiederholt gerendert var sameIndex = []
    // Herausfinden, auf welchem ​​Element sich die Scrollposition befindet var currentIndex = 0
    für (var i = 0; i < Liste.Länge; i++) {
      var Element = Liste[i]
      wenn (Element oben <= Fenster.ScrollY && Element unten > Fenster.ScrollY) {
        aktuellerIndex = i;
        brechen;
      }
    }
    Variablenbereich = 0
    // Suche nach den anzuzeigenden Elementen über und unter dem aktuell gefundenen Element, bis die Gesamtzahl 35 erreicht, while (range < 100 && showList.length + sameIndex.length < 35) {
      wenn (aktuellerIndex - Bereich >= 0) {
        // Vergleichen Sie, ob die Elemente, die die Bedingungen erfüllen, in der gerenderten Liste vorhanden sind. Wenn ja, markieren Sie sie. Wenn nicht, fügen Sie sie in die ShowList ein und ersetzen Sie die nicht markierten Elemente zu diesem Zeitpunkt if (renderList.includes(list[currentIndex - range].id)) {
          // sameIndex.push(aktuellerIndex-Bereich)
          sameIndex.unshift(renderList.indexOf(Liste[aktuellerIndex - Bereich].id))
        } anders {
          showList.unshift(Liste[aktuellerIndex - Bereich])
        }
      }

      wenn (aktuellerIndex + Bereich < Listenlänge und Bereich != 0) {
        wenn (renderList.includes(Liste[aktuellerIndex + Bereich].id)) {
          sameIndex.push(renderList.indexOf(Liste[aktuellerIndex + Bereich].id))
        } anders {
          showList.push(Liste[aktuellerIndex + Bereich])
        }
      }
      Bereich++
    }
    // Ersetze die neuen Elemente, die gerendert werden müssen, durch die nicht markierten Elemente in der Renderliste if (renderList.length > 0) {
      für (var i = 0; i < renderList.length; i++) {
        wenn (!sameIndex.includes(i) && showList.length) {
          renderList[i] = showList.shift().id
          $('ul li').eq(i).html(Liste[renderList[i]].id + Liste[renderList[i]].text).attr('Stil', 'transformieren: übersetzen3d(0px, ' + Liste[renderList[i]].top + 'px, 0px);')
        }
      }
    } anders {
      // Initialisiere die Liste zum ersten Mal renderList = showList.map(function (val) { return val.id })
      renderList.map(Funktion (Schlüssel) {
        $('ul').anhängen($('<li style="transform: translate3d(0px, ' + list[key].top + 'px, 0px);"">#' + list[key].id + list[key].text + '</li>'))
      })
    }
    console.log(renderListe)
  }
  // Erstes Rendern render()
  $(Fenster).scroll(Funktion (e) {
    machen()
  });

</Skript>

</html>

ZU TUN

1. Im Vergleich zur Methode zum Ersetzen von Containerelementen scheint es immer optimierungsfähig zu sein, wodurch die Betriebseffizienz verbessert und der beim schnellen Scrollen angezeigte weiße Bildschirm optimiert werden kann.
2. Hier ist eine Denkfrage [0,1...,10000]. Nehmen Sie jedes Mal 5 Elemente heraus, vergleichen Sie die neu ausgewählten mit den alten, behalten Sie die Schnittmenge der beiden Arrays bei und ersetzen Sie die Nicht-Schnittmenge des alten Arrays durch die neuen Elemente im neuen Array. Wenn beispielsweise das erste Mal [0,1,2,3,4] und das zweite Mal [2,3,4,5,6] ist, generiert der Vergleich [5,6,2,3,4], und wenn das dritte Mal [4,5,6,7,8] ist, ist der generierte Wert [5,6,7,8,4]. Holen Sie sich dieses Ergebnis-Array mit der geringsten Codemenge.

Zusammenfassung

1. Komplettes Layout und Initialisierung durch Daten
2. Abweichen von Containern vom Standardfluss durch deren Positionierung
3. Durch den Vergleich der Daten können wir die unterschiedlichen Containerelemente herausfinden und bei jedem Mal möglichst wenig Containerelemente neu zeichnen.

Nächstes Problem ----- Komponentenzusammenstellung zum Erreichen einer langen Liste

Wichtige Punkte

1. Komponenten unterscheiden sich von normalen Listen. Die Höhe der Komponenten ist möglicherweise nicht steuerbar und kann je nach Mobilgerät variieren.
2. Aufgrund der unterschiedlichen Bauteilhöhen ist auch die Anzahl der Bauteile im Rendering-Bereich unterschiedlich, was zu unterschiedlichen Container-Anzahlen führt.
3. Die Höhe lässt sich nicht einfach direkt über die Daten berechnen. Wenn das gesamte Rendering erforderlich ist und dann die Position und Höhe über DOM berechnet werden, wird dies die erste Ladeleistung verbrauchen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.