So rendern Sie eine Liste von bis zu 10000 Elementen richtig.
Mit der Infinite Dropdown-Ladetechnologie können Benutzer vor einer großen Anzahl von Inhaltensblöcken scrollen und anzeigen. Diese Methode soll weiterhin neue Inhalte laden, während Sie nach unten scrollen.
Wenn Sie das Scrollen als primäre Methode zum Erkennen von Daten verwenden, können Ihre Benutzer länger auf der Webseite bleiben und das Engagement der Benutzer erhöhen. Mit der Beliebtheit von sozialen Medien wird eine große Menge an Daten von den Benutzern verbraucht. Wireless Scrolling bietet eine effiziente Möglichkeit, um Benutzern massive Informationen zu durchsuchen, ohne dass die Seite warten muss.
Wenn wir unsere Denkweise ändern, wenn auf einer Seite 10.000 gerade Spaltenkomponenten vorhanden sind, wie können wir 5 Komponenten verwenden, um die gesamte Seite dynamisch zu rendern?
LösungBei der Optimierung langer Listen haben wir viele Lösungen wie Paging, faules Laden usw. Es gibt eine sehr gute Interaktion (Chrysanthemenbild), damit der Benutzer warten kann. Dieser Plan ist auch sehr erfolgreich.
Wie finde ich einen anderen Weg?
1. In der Anwendung von einzelnen Seiten können wir das Paging -Schema einmal mit 10 Elementen pro Seite analysieren, und 10 Elemente pro Seite werden gemäß den
2. Können wir eine Klammer verwenden, um die gesamte Listenlänge zu unterstützen, wenn der Bildschirm in die entsprechende Position scritiert und die entsprechenden 10 Elemente rendert
BlinkproblemWenn wir diese Idee implementieren, wird es ein flackerndes Problem geben. Da Scrolling -Ereignisse häufig sind, stellen wir fest, dass die Elemente, die wir sehen, ständig neu lackieren, da wir feststellen, welche zehn Elemente in jeder Zwischensequenz gerendert werden müssen, und sie dann direkt ersetzen müssen.
Die Idee hier ist, dass ich, wenn ich die Bildschirmposition sehe, 10 und dann 10 nach oben und unten mit insgesamt 30 rendern werde. Bei der Kontrolle des Renders ersetze ich immer die oberen oder unteren Elemente, so dass der Teil, den wir in der Mitte sehen können, nicht neu gestrichen und gerendert werden. Es ist nur so, dass die vorgezogenen Daten neu gezeichnet werden.
PrinzipImplementieren Sie eine Komponente, die eine Liste von N -Elementen mit einer festen Fenstergröße von 5 Elementen anzeigen kann: Das heißt jederzeit nur 5 DOM -Container auf den unendlichen Scroll -N -Elementen.
<ul> <li style = transform: Translate3d (0px, 0px, 0px);>… </li> <li style = Transform: Translate3d (0px, 60px, 0px);>… </li> </ul>
Zum Beispiel: 100 Elemente, 5 werden auf der Startseite angezeigt. Initialisierung von [0,1,2,3,4] Diese 5 <li> müssen gerendert werden. Wenn ich ein wenig nach unten scrolle [1,2,3,4,5] müssen diese <li> s gerendert werden. Ersetzen Sie zu diesem Zeitpunkt nicht direkt die Gesamtdifferenzierung, nur die Differenzbegriffe sollten ersetzt werden. Die Struktur sollte [5,1,2,3,4] sein. Da es sich um eine absolute Positionierung handelt, wird es vom Standardstrom getrennt. Ein einzelnes Neubau betrifft nicht die anderen vier und verbessert damit die Leistung.
Wie man es implementiert <! DocType html> <html Lang = en> <kopf> <meta charset = utf-8> <meta name = Ansichtsportinhalt = width = Gerätebreite, initial-scale = 1.0> <meta http-äquiv = x-ua-compatible content = ie src = https: //cdn.bootcs.com/jquery/3.2.1/jquery.min.js> </script> <title> document </title> <style> body, ul, li {margin: 0; Polsterung: 0; Listenstil: Keine; } ul {Position: relativ; } ul li {Position: absolut; Top: 0; Breite: 100%; Höhe: 31px; Zeilenhöhe: 32px; Border-Bottom: 1PX Solid #CCC; } </style> </head> <body> <ul> </ul> </body> <script> // Total Container var list = []; // Elemente im visuellen Bereich var showlist = []; // Container var renderList = []; // Höhe jedes Containers var lineHeight = 32 // 1000 Elemente für (var i = 0; i <1000; i ++) {list.push ({id: i, text: 'th' + (i + 1) + 'Elements', oben: I * LineHeight: (i + 1) * LineHeight}),}////////// // -Kundhöhe $ ('. 1000 * LineHeight+'PX') // Finden Sie den Funktionsrender (oben, unten) des Anfangsbehälters {showlist = [] // markieren Sie, welche Daten mit dem gerenderten nach seiner Renderung wiederholt werden. Dieser Teil wird nicht wiederholt wiederholt VAR IHERINIDEX = [] // Finden Sie heraus, welches Element die Position variieren. (item.top <= window.scrolly && item.bottom> window.scrolly) {currentIndex = i; brechen; }} var range = 0 // finde die Elemente im aktuell gefundenen Element nach oben und unten angezeigt, bis die Gesamtzahl der Gesamtzahl 35 erreicht (Bereich <100 && Showlist.Length + SameIndex.Length <35) {if (CurrentIndex - Bereich> = 0) {// Vergleichen Sie, ob die Elemente, in denen die Bedingungen erfüllt sind, in der Liste. showList At that time, replace the unmarked element if (renderList.includes(list[currentIndex - range].id)) { // sameIndex.push(currentIndex-range) sameIndex.unshift(renderList.indexOf(list[currentIndex - range].id)) } else { showList.unshift(list[currentIndex - range]) } } } if (currentIndex + range < list.length && range! markiert if (renderlist.length> 0) {für (var i = 0; i <renderlist.length; i ++) {if (! SameIndex.includes (i) && showlist.length) {renderlist [i] = showlist.shift (). id $ ('ul li'). EQ (i) .html (Liste [Renderlist [i]. LIST [RenderList [i]]. Top + 'PX, 0px);')}}} else {// Initialisieren Sie die Liste zum ersten Mal renderlist = showlist.map (function (val) {return val.id}) renderlist.map (function (taste) {$ ('uls'). Anhang ($ ($). 'px, 0px);>#' + list [key] .id + list [key] .text + '</li>')})} console.log (renderlist)} // Rendering Render () $ (Fenster) .Scroll (e) {render ()}); </script> </html> TodoSchlüsselpunkte
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.