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

So finden Sie bei der Anmeldeoberfläche die richtige Balance zwischen Benutzerfreundlichkeit und Sicherheit

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

So finden Sie bei der Anmeldeoberfläche die richtige Balance zwischen Benutzerfreundlichkeit und Sicherheit

Detaillierte Erläuterung der Verwaltung und Verwendung von Docker Secrets

Detaillierte Erklärung, wie Vue-Komponenten Werte untereinander übertragen

Einfache Methode zur Installation von MySQL unter Linux

HTML ist etwas, das Webseiten-Ersteller lernen und beherrschen müssen.

Mit CSS3 3D-Effekten einen Würfel erstellen

Ausführliche Erklärung zu Slots und Filtern in Vue

Anwendungsbeispiele für die try_files-Direktive von Nginx

Detailliertes Installations- und Konfigurationstutorial für PostgreSQL 11 unter CentOS7

Erfahren Sie, wie Sie die Selbstüberwachung von Apache SkyWalking schnell aktivieren

Artikel empfehlen

Eine detaillierte Einführung in die Speicherverwaltung und -adressierung unter Linux

Spezifische Verwendung der MySQL-Segmentierungsfunktion substring()

Was tun, wenn Sie das Root-Passwort von Mysql5.7 vergessen (einfache und effektive Methode)

JS erkennt den Fall der Eliminierung von Sternen

Erfahren Sie in einem Artikel mehr über JavaScript-Closure-Funktionen

Was tun, wenn Sie bei der Installation von MySQL auf einem Mac das ursprüngliche Kennwort vergessen?

Details zur Vue-Vorlagenkompilierung

Windows 10 ist zu schwierig zu verwenden. Wie passen Sie Ihr Ubuntu an?

Baidu Input Method öffnet API und behauptet, es könne portiert und nach Belieben verwendet werden

So vergessen Sie das Root-Passwort in Mysql8.0.13 unter Windows 10

Detaillierte Erläuterung der Idee zur Implementierung der Funktion zum Anzeigen und Verbergen von Passwörtern in Vue

Lassen Sie sich die tiefe Kopie von js verstehen

Führen Sie die Schritte zum Konfigurieren der IP-Adresse in Ubuntu 18.04 LTS aus

Vue verwendet Canvas, um Kreise zufälliger Größe und ohne Überlappung zu erzeugen

Erläuterung unveränderlicher Werte in React