Code d'implémentation pour l'implémentation de défilement infini de n éléments de conteneur

Comment rendre correctement une liste de 10000 éléments.

La technologie de chargement déroulant Infinite permet aux utilisateurs de faire défiler et de visualiser devant un grand nombre de blocs de contenu. Cette méthode consiste à continuer de charger de nouveau contenu lorsque vous faites défiler vers le bas.

Lorsque vous utilisez le défilement comme méthode principale pour découvrir des données, il peut permettre à vos utilisateurs de rester sur la page Web plus longtemps et d'augmenter l'engagement des utilisateurs. Avec la popularité des médias sociaux, une grande quantité de données est consommée par les utilisateurs. Le défilement sans fil offre un moyen efficace de permettre aux utilisateurs de parcourir des quantités massives d'informations sans avoir à attendre que la page soit préchargée.

Si nous modifions notre façon de penser, s'il y a 10 000 composants de colonne droite sur une page, comment pouvons-nous utiliser 5 composants pour rendre dynamiquement la page entière?

Dans l'optimisation des longues listes, nous avons de nombreuses solutions, telles que la pagination, le chargement paresseux, etc. Il y a une très bonne interaction (image de Chrysanthemum), afin que l'utilisateur puisse attendre. Ce plan est également très réussi.

Comment trouver une autre façon?

1. Dans l'application de pages uniques, pouvons-nous analyser le schéma de pagination une fois, avec 10 éléments par page, et 10 éléments par page sont rendus en fonction de

2. Pouvons-nous utiliser un support pour prendre en charge toute la longueur de liste lorsque l'écran défile vers la position correspondante et rendre les 10 éléments correspondants

Lorsque nous mettons en œuvre cette idée, il y aura un problème vacillant. Étant donné que les événements de défilement sont fréquents, nous constatons que les éléments que nous voyons sont constamment repeints, car nous trouvons quels dix éléments doivent être rendus dans chaque cinématique, puis les remplacer directement.

L'idée ici est que lorsque je vois la position de l'écran, je rendrai 10 puis 10 vers le haut et vers le bas, avec un total de 30. Lors du contrôle du rendu, je remplace toujours les éléments supérieurs ou inférieurs, de sorte que la pièce que nous pouvons voir au milieu ne sera pas repeinte et rendue. C'est juste que les données pré-rendues sont en cours de redessation.

Implémentez un composant qui peut afficher une liste de n éléments avec une taille de fenêtre fixe de 5 éléments: c'est-à-dire, à tout moment, il n'y a que 5 conteneurs DOM sur les éléments de défilement de défilement infini.

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

• Le contenu d'une longue liste a généralement des règles. La hauteur de cette liste peut être calculée directement via le nombre de <li> s. Par exemple, 1 000 éléments, et la hauteur de chaque élément est de 60 pix. Ensuite, nous pouvons rapidement calculer que la hauteur de la liste réelle est de 60 000px.
• Après avoir eu le conteneur, le <li> interne est absolument positionné par rapport à <ul>, puis utilise JS pour calculer directement le 'Transform: tradlate3d (0px, 0px, 0px);' attribut correspondant à chaque <li>
• En écoutant le temps de défilement, nous trouvons constamment le <li> qui doit être rendu à l'emplacement actuel, le comparons avec l'ensemble précédent de données rendues. S'il y a le même <li>, sautez-le, découvrez les différents éléments de l'ensemble précédent de données rendues, puis effectuez le remplacement correspondant.

Par exemple: 100 éléments, 5 sont affichés sur la page d'accueil. L'initialisation de [0,1,2,3,4] Ces 5 <li> doivent être rendues. Lorsque je fais défiler un peu, [1,2,3,4,5] Celles-ci ont besoin d'être rendues. Pour le moment, ne remplacez pas directement le global, seuls les termes de différence doivent être remplacés. La structure doit être [5,1,2,3,4]. Puisqu'il s'agit de positionnement absolu, il sera séparé du flux standard. Un seul refroidissement n'affectera pas les quatre autres, améliorant ainsi les performances.

 <! Doctype html> <html Lang = en> <éadf> <meta charset = utf-8> <meta name = viceport contenu = width = device-width, initial-scale = 1.0> <meta http-equiv = x-ua-compatible contenu = ie = edge> <script src = https: //cdn.bootcss.com/jquery/3.2.1/jquery.min.js> </ script> <ititle> Document </Title> <style> body, ul, li {margin: 0; rembourrage: 0; Style de liste: aucun; } ul {position: relative; } ul li {position: absolue; en haut: 0; Largeur: 100%; hauteur: 31px; hauteur de ligne: 32px; Border-Bottom: 1px solide #ccc; } </ style> </ head> <body> <ul> </ul> </body> <script> // Container total var list = []; // éléments dans la plage visuelle var showList = []; // Render le conteneur var renderList = []; // Hauteur de chaque conteneur var lineHeight = 32 // Initialiser 1000 éléments pour (var i = 0; i <1000; i ++) {list.push ({id: i, texte: 'th' + (i + 1) + 'Elements', top: i * lineheight, en bas: (i + 1) * lineheight})} // Initialize Container Height $ ('ul'). 1000 * LineHeight + 'PX') // Trouvez le rendu de fonction (en haut, en bas) du conteneur initial {showList = [] // Marque quelles données sont répétées avec le rendu après son élément, cette partie ne sera pas rendue à plusieurs reprises pour (var i = 0; i <list.Length; i ++) {var) (item.top <= window.scrolly && item.bottom> window.scrolly) {currentIndex = i; casser; }} var plage = 0 // Trouvez que les éléments s'affichent respectivement de haut en bas dans l'élément actuellement trouvé, jusqu'à ce que le nombre total atteigne 35 while (plage <100 && showlist.length + mêmeIndex.length <35) {if (currentIndex - plage> = 0) {// Comparez si les éléments qui remplissent les conditions sont dans la liste surestimés, les marquent dans lesque ShowList à ce moment-là, remplacez l'élément non marqué if (renderList.includes (list [currentIndex - range] .id)) {// mêmeIndex.push (currentIndex-Range) SameIndex.unshift (renderList.indexof (list [listhengle - gamme - range]) && range! = 0) {if (renderList.includes (list [currentIndex + range] .id)) {mêmeIndex.push (renderList.Indexof (list [currentIndex + range] .id))} else {shows.push (list [currentIndex + range])}}} plage ++} // ne pas remplacer les nouveaux éléments qui ne doivent pas être Rende (renderList.length> 0) {for (var i = 0; i <renderList.length; i ++) {if (! SameIndex.incluses (i) && showList.length) {renderList [i] = showList.shift (). id $ ('ul li'). eq (i) .html (list [renderList [i]]. id + list [renderList [i]]. Liste [renderList [i]]. TOP + 'PX, 0px);')}}} else {// initialiser la liste pour la première fois renderList = showList.map (function (val) {return val.id}) renderList.map (fonction (key) {$ ('ul'). 'px, 0px);> #' + list [key] .id + list [key] .text + '</li>'))})} console.log (renderList)} // Rendu First Render () $ (fenêtre).

1. La méthode de remplacement des éléments des conteneurs estime toujours qu'elle peut être optimisée, ce qui peut améliorer l'efficacité opérationnelle et optimiser l'écran blanc qui apparaît rapidement.
2. Voici également une question de réflexion [0,1 ..., 10 000]. À chaque fois, 5 éléments sont retirés, les nouveaux sélectionnés sont comparés aux anciens et la partie d'intersection des deux tableaux est conservée, et la partie non intérieure de l'ancien réseau est remplacée par les nouveaux éléments du nouveau tableau. Par exemple, la première fois est [0,1,2,3,4], et la deuxième fois est [2,3,4,5,6]. Ensuite, après la comparaison, [5,6,2,3,4] est généré. Si la troisième fois est [4,5,6,7,8], celle générée est [5,6,7,8,4]. Utilisez le nombre minimum de codes pour obtenir ce tableau de résultats.

1. Compléter la disposition et l'initialisation à travers les données
2. En sentant le positionnement, le conteneur est retiré du flux standard
3. Grâce à la comparaison des données, découvrez les différents éléments de conteneur et redessinez le moins d'éléments de conteneur que possible à chaque fois.

Points clés

1. Le composant est différent d'une liste régulière. La hauteur du composant peut être incontrôlable et semblera inutilisée en fonction de différents appareils de téléphone mobile.
2. Étant donné que les composants sont de la même hauteur, le nombre de plusieurs composants dans la zone de rendu est également différent, ce qui entraîne différents dénombrements de conteneurs.
3. Pour les hauteurs qui ne sont pas faciles à calculer directement via les données, si vous devez effectuer un rendu global, puis calculer la position et la hauteur via le DOM, il consommera de toute première performance de chargement.

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.