Wie kann das Front-End die 100.000 vom Back-End zurückgegebenen Daten besser anzeigen?

Inhaltsverzeichnis

Vorarbeit

Backend-Konstruktion
Frontend-Seite

Direktes Rendering

setTimeout Seitendarstellung

AnfrageAnimationFrame

Dokumentfragmente + requestAnimationFrame

Lazy Loading

Lassen Sie uns heute darüber sprechen. Wenn das Backend tatsächlich 100.000 Daten an das Frontend zurückgibt, wie können wir sie dann elegant auf dem Frontend anzeigen?

Vorarbeit

Machen Sie zuerst die Vorarbeit, dann können Sie es später testen.

Backend-Konstruktion

Erstellen Sie eine neue server.js Datei, starten Sie einen einfachen Dienst, geben Sie 10w Daten an das Front-End zurück und starten Sie den Dienst über nodemon server.js

Wenn nodemon nicht installiert ist, können Sie es zunächst global mit npm i nodemon -g installieren.

// server.js
const http = erfordern('http').
konstanter Port = 8000; 
http.createServer(Funktion (Anforderung, Res) {
  // Cors aktivieren
  res.writeHead(200, {
    //Legen Sie den Domänennamen fest, der domänenübergreifend zulässig ist. Sie können auch * festlegen, um alle Domänennamen zuzulassen. 'Access-Control-Allow-Origin': '*',
    //Domänenübergreifend zulässige Anforderungsmethoden. Sie können * auch so festlegen, dass alle Methoden zulässig sind "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
    //Erlaubte Header-Typen 'Access-Control-Allow-Headers': 'Content-Type'
  })
  lass Liste = []
  sei num = 0
 
  // Eine Liste mit 100.000 Datensätzen erstellen
  für (sei i = 0; i < 1000000; i++) {
    Zahl++
    Liste.push({
      Quelle: 'https://p3-passport.byteacctimg.com/img/user-avatar/d71c38d1682c543b33f8d716b3b734ca~300x300.image',
      Text: „Ich bin Gast Nummer ${num} Lin Sanxin“,
      tid: Nummer
    })
  }
  res.end(JSON.stringify(Liste));
}).listen(Port, Funktion () {
  console.log('Server lauscht auf Port ' + Port);
})

Frontend-Seite

Erstellen Sie zunächst eine neue index.html

// index.html
// Stil <Stil>
    * {
      Polsterung: 0;
      Rand: 0;
    }
    #Behälter {
      Höhe: 100vh;
      Überlauf: automatisch;
    }
    .Sonnenschein {
      Anzeige: Flex;
      Polsterung: 10px;
    }
    img {
      Breite: 150px;
      Höhe: 150px;
    }
  </Stil> 
// HTML-Teil <body>
  <div id="Behälter">
  </div>
  <script src="./index.js"></script>
</body>

Erstellen Sie dann eine neue index.js Datei und kapseln Sie eine AJAX -Funktion ein, um diese 10w -Daten anzufordern

// index.js 
// Anforderungsfunktion const getList = () => {
    returniere neues Promise((lösen, ablehnen) => {
        //Schritt 1: Asynchrones Objekt erstellen var ajax = new XMLHttpRequest();
        //Schritt 2: Legen Sie die Anforderungs-URL-Parameter fest. Parameter 1 ist der Anforderungstyp und Parameter 2 ist die Anforderungs-URL. Sie können ajax.open('get', 'http://127.0.0.1:8000'); verwenden.
        //Schritt 3: Anfrage senden ajax.send();
        //Schritt 4: Registrieren Sie das Ereignis onreadystatechange. Wenn sich der Status ändert, ajax.onreadystatechange = function () {
            wenn (ajax.readyState == 4 und ajax.status == 200) {
                //Schritt 5 Wenn Sie bis zu diesem Punkt gelangen, bedeutet das, dass die Daten einwandfrei zurückgegeben werden und die angeforderte Seite existiert. resolve(JSON.parse(ajax.responseText))
            }
        }
    })
} 
// Containerobjekt abrufen const container = document.getElementById('container')

Direktes Rendering

Der direkteste Weg ist das direkte Rendern, aber dieser Ansatz ist definitiv nicht ratsam, da das Rendern 10w Knoten gleichzeitig sehr zeitaufwändig ist. Schauen wir uns den Zeitaufwand an. Es dauert ungefähr 12秒, was sehr zeitaufwändig ist.

const renderList = async () => {
    console.time('Listenzeit')
    const list = warte auf getList()
    Liste.fürJeden(Element => {
        const div = Dokument.createElement('div')
        div.className = "Sonnenschein"
        div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
        container.anhängenKind(div)
    })
    console.timeEnd('Listenzeit')
}
renderList()

setTimeout Seitendarstellung

Diese Methode besteht darin, 10w entsprechend limit pro Seite in insgesamt Math.ceil(total / limit) aufzuteilen und dann jedes Mal mit setTimeout eine Seite mit Daten zu rendern. Auf diese Weise wird die Zeit zum Rendern der Homepage-Daten erheblich reduziert.

const renderList = async () => {
    console.time('Listenzeit')
    const list = warte auf getList()
    console.log(Liste)
    const total = Liste.Länge
    Konstante Seite = 0
    Konstantengrenze = 200
    const totalPage = Math.ceil(Gesamt / Limit) 
    const render = (Seite) => {
        if (Seite >= Gesamtseite) return
        setzeTimeout(() => {
            für (sei i = Seite * Limit; i < Seite * Limit + Limit; i++) {
                const Element = Liste[i]
                const div = Dokument.createElement('div')
                div.className = "Sonnenschein"
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                container.anhängenKind(div)
            }
            rendern(Seite + 1)
        }, 0)
    }
    rendern(Seite)
    console.timeEnd('Listenzeit')
}

AnfrageAnimationFrame

Die Verwendung requestAnimationFrame anstelle von setTimeout verringert die Anzahl der重排und verbessert die Leistung erheblich. Es wird empfohlen, requestAnimationFrame beim Rendering häufiger zu verwenden.

const renderList = async () => {
    console.time('Listenzeit')
    const list = warte auf getList()
    console.log(Liste)
    const total = Liste.Länge
    Konstante Seite = 0
    Konstantengrenze = 200
    const totalPage = Math.ceil(Gesamt / Limit)
    const render = (Seite) => {
        if (Seite >= Gesamtseite) return
        // Verwenden Sie requestAnimationFrame anstelle von setTimeout
        requestAnimationFrame(() => {
            für (sei i = Seite * Limit; i < Seite * Limit + Limit; i++) {
                const Element = Liste[i]
                const div = Dokument.createElement('div')
                div.className = "Sonnenschein"
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                container.anhängenKind(div)
            }
            rendern(Seite + 1)
        }, 0)
    }
    rendern(Seite)
    console.timeEnd('Listenzeit')
}

Dokumentfragmente + requestAnimationFrame

Vorteile der Dokumentfragmentierung

1. Bisher wurde appendChild jedes Mal aufgerufen, wenn ein div Tag erstellt wurde. Bei Dokumentfragmenten können jedoch div Tags einer Seite zuerst in die Dokumentfragmente eingefügt und dann appendChild gleichzeitig an container angehängt werden. Dies reduziert die Anzahl der appendChild -Aufrufe und verbessert die Leistung erheblich.

2. Die Seite rendert nur die vom Dokumentfragment umschlossenen Elemente, nicht jedoch das Dokumentfragment selbst.

const renderList = async () => {
    console.time('Listenzeit')
    const list = warte auf getList()
    console.log(Liste)
    const total = Liste.Länge
    Konstante Seite = 0
    Konstantengrenze = 200
    const totalPage = Math.ceil(Gesamt / Limit) 
    const render = (Seite) => {
        if (Seite >= Gesamtseite) return
        requestAnimationFrame(() => {
            // Ein Dokumentfragment erstellen const fragment = document.createDocumentFragment()
            für (sei i = Seite * Limit; i < Seite * Limit + Limit; i++) {
                const Element = Liste[i]
                const div = Dokument.createElement('div')
                div.className = "Sonnenschein"
                div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
                // Zuerst das Dokumentfragment einfügen fragment.appendChild(div)
            }
            // Einmaliges appendChild
            container.appendChild(fragment)
            rendern(Seite + 1)
        }, 0)
    }
    rendern(Seite)
    console.timeEnd('Listenzeit')
}

Lazy Loading

Für eine allgemeinere Erklärung starten wir ein vue Frontend-Projekt und der Backend-Dienst ist noch offen.

Tatsächlich ist das Implementierungsprinzip sehr einfach. Lassen Sie es uns anhand eines Bildes zeigen. Setzen Sie am Ende der Liste einen leeren Knoten blank , rendern Sie dann zuerst die erste Seite mit Daten, scrollen Sie nach oben und warten Sie, bis blank in der Ansicht erscheint, was das Ende bedeutet. Laden Sie dann die zweite Seite und so weiter.

Um festzustellen, ob in der Ansicht blank angezeigt wird, können Sie getBoundingClientRect verwenden, um top Attribut abzurufen.

<script setup lang="ts">
importiere { onMounted, ref, berechnet } von 'vue'
const getList = () => {
  //Gleicher Code wie oben}
const container = ref<HTMLElement>() // Containerknoten const blank = ref<HTMLElement>() // leerer Knoten const list = ref<any>([]) // Liste const page = ref(1) // aktuelle Seitenzahl const limit = 200 // Anzeige einer Seite // maximale Seitenzahl const maxPage = computed(() => Math.ceil(list.value.length / limit))
// Die tatsächlich angezeigte Liste const showList = computed(() => list.value.slice(0, page.value * limit))
const handleScroll = () => {
  // Vergleich der aktuellen Seitenzahl und der maximalen Seitenzahl if (page.value > maxPage.value) return
  const clientHeight = container.Wert?.clientHeight
  const blankTop = blank.Wert?.getBoundingClientRect().top
  wenn (Clienthöhe === blankTop) {
    // In der Ansicht erscheint ein Leerzeichen, die aktuelle Seitenzahl wird um 1 erhöht
    Seite.Wert++
  }
} 
beimMounted(async () => {
  const res = warte auf getList()
  Liste.Wert = Res
})
</Skript> 
<Vorlage>
  <div Klasse="Container" @scroll="handleScroll" ref="Container">
    <div Klasse="Sonnenschein" v-for="(Artikel) in ShowList" :key="Artikel.tid">
      <img :src="item.src" />
      <span>{{ Artikel.text }}</span>
    </div>
    <div ref="blank"></div>
  </div>
</Vorlage>

Oben sind die Details, wie das Front-End die 100.000 Daten, die vom Back-End zurückgegeben werden, besser anzeigen kann. Weitere Informationen zur Anzeige der 100.000 Daten, die vom Back-End zurückgegeben werden, durch das Front-End finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:

So zeigen Sie mit JavaScript Zehntausende Daten gleichzeitig an
js Front-End-Anzeige und Verarbeitungsmethoden für große Datenmengen
Java realisiert die Anzeige von Hintergrunddaten im Frontend
Zusammenfassung der Methoden zur Implementierung der Front-End- und Back-End-Dateninteraktion

<<: Element mit Auswahltabelle zum Ändern des Kontrollkästchens in der Kopfzeile in Textimplementierungscode

>>: Zusammenfassung der Zeilenumbruchprobleme bei Textbereichen in HTML

Lösen Sie das chinesische verstümmelte Problem der MySQL5.5-Datenbank-Befehlszeile unter Windows 10

Wie kann das Front-End die 100.000 vom Back-End zurückgegebenen Daten besser anzeigen?

Inhaltsverzeichnis

Vorarbeit

Backend-Konstruktion

Frontend-Seite

Direktes Rendering

setTimeout Seitendarstellung

AnfrageAnimationFrame

Dokumentfragmente + requestAnimationFrame

Lazy Loading

Lösen Sie das chinesische verstümmelte Problem der MySQL5.5-Datenbank-Befehlszeile unter Windows 10

So verwenden Sie CURRENT_TIMESTAMP in MySQL

So sichern Sie MySQL unter Linux automatisch remote

Kurze Analyse der Einführung und grundlegenden Verwendung von Promise

Ausführliches Installationstutorial für MySQL 8.0.12 winx64

Allgemeines Startskriptbeispiel für ein Linux-Java-Programm

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.17

Implementierung der automatischen Vervollständigung von Docker-Befehlen

Anweisungen zur Verwendung des Meta-Viewport-Tags (Zoom-Steuerung beim mobilen Surfen)

Über Tomcat kombiniert mit Atomikos zur Implementierung von JTA

Artikel empfehlen

Uniapp verwendet Baidu Voice, um die Funktion zum Konvertieren von Aufnahmen in Text zu realisieren

XHTML drei Dokumenttypdeklarationen

So erstellen Sie eine Testdatenbank mit zig Millionen Testdaten in MySQL

JavaScript zum Implementieren einer einfachen Tab-Leiste zum Wechseln der Inhaltsleiste

Detaillierte Erläuterung von acht Möglichkeiten zur Optimierung der MySQL-Datenbank (klassische Pflichtlektüre)

JS-Interviewfrage: Kann forEach aus der Schleife aussteigen?

MySQL-Startfehler InnoDB: Sperren nicht möglich/ibdata1-Fehler

So überspringen Sie Fehler bei der MySQL-Master-Slave-Replikation

Häufige Fragen und Antworten im Vorstellungsgespräch für Stellen als Webdesigner

So aktivieren Sie Flash in Windows Server 2016

Erläuterung der Zusammenführung von TypeScript-Namespaces

Wie können die Transaktionseigenschaften von MySQL InnoDB sichergestellt werden?

Detaillierte Schritte zur vollständigen Deinstallation von MySQL 5.7

Analyse und Anwendung des Wasserfallflussprinzips unregelmäßiger Bilder

So fügen Sie eine Nginx-Proxy-Konfiguration hinzu, um nur internen IP-Zugriff zuzulassen