Como renderizar corretamente uma lista de até 10000 elementos.
A tecnologia infinita de carregamento suspenso permite que os usuários role e visualizem na frente de um grande número de blocos de conteúdo. Este método é continuar carregando novo conteúdo enquanto você rola para baixo.
Quando você usa a rolagem como o principal método de descobrir dados, ele pode permitir que seus usuários permaneçam na página da web por mais tempo e aumentem o envolvimento do usuário. Com a popularidade das mídias sociais, uma grande quantidade de dados é consumida pelos usuários. A rolagem sem fio fornece uma maneira eficiente de permitir que os usuários naveguem enormes quantidades de informações sem precisar esperar que a página seja pré -carregada.
Se mudarmos nossa maneira de pensar, se houver 10.000 componentes seguidos em uma página, como podemos usar 5 componentes para renderizar dinamicamente a página inteira?
SoluçãoNa otimização de listas longas, temos muitas soluções, como paginação, carregamento preguiçoso etc. Existe uma interação muito boa (imagem do crisântemo), para que o usuário possa esperar. Este plano também é muito bem -sucedido.
Como encontrar outra maneira?
1. Na aplicação de páginas únicas, podemos analisar o esquema de paginação uma vez, com 10 elementos por página e 10 elementos por página são renderizados de acordo com
2. Podemos usar um suporte para suportar todo o comprimento da lista quando a tela rola para a posição correspondente e renderizar os 10 elementos correspondentes
Problema piscandoQuando implementarmos essa ideia, haverá um problema de tremeluzência. Como os eventos de rolagem são frequentes, descobrimos que os elementos que vemos estão constantemente repintando, porque descobrimos quais dez elementos precisam ser renderizados em cada cena e depois substituí -los diretamente.
A idéia aqui é que, quando vejo a posição da tela, renderizarei 10 e depois 10 para cima e para baixo, com um total de 30. Ao controlar a renderização, sempre substituo os elementos superior ou inferior, para que a parte que possamos ver no meio não seja repintada e renderizada. É que os dados pré-renderizados estão sendo redesenhados.
princípioImplemente um componente que pode exibir uma lista de n itens com um tamanho de janela fixo de 5 elementos: ou seja, a qualquer momento, existem apenas 5 contêineres DOM nos elementos infinitos de rolagem.
<ul> <estilo li = transform: translate3d (0px, 0px, 0px);>… </li> <style = transform: translate3d (0px, 60px, 0px);>… </li> </ul>
Por exemplo: 100 elementos, 5 são exibidos na página inicial. Inicialização de [0,1,2,3,4] Esses 5 <li> precisam ser renderizados. Quando eu rolar um pouco, [1,2,3,4,5], esses <li> precisam ser renderizados. No momento, não substitua diretamente o geral, apenas os termos da diferença devem ser substituídos. A estrutura deve ser [5,1,2,3,4]. Como é um posicionamento absoluto, será separado do fluxo padrão. Um único redesenho não afetará os outros quatro, melhorando o desempenho.
Como implementá -lo <! Doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = width, escala inicial = 1.0> <meta http-equiv = x-ua-compatível = ie = borda> <script src = https: //cdn.bootcss.com/jquery/3.2.1/jquery.min.js> </script> <titter> preenchimento: 0; estilo de lista: nenhum; } ul {Position: relativo; } ul li {posição: absoluto; topo: 0; largura: 100%; Altura: 31px; altura da linha: 32px; fundo de borda: 1px sólido #ccc; } </style> </head> <body>> // elementos no intervalo visual var showlist = []; // renderizar contêiner var renderlist = []; // altura de cada contêiner var lineHeight = 32 // inicializa 1000 elementos para (var i = 0; i <1000; i ++) {list.push ({id: i, text: 'th' + (i + 1) + 'elementos', topo: i * lineHeight, inferior: (i + 1) * lineHeight}} // LineHeight+'px') // Encontre a renderização da função (superior, inferior) do contêiner inicial {showList = [] // Marque quais dados são repetidos com os renderizados após o fato de ser renderizado, essa parte não será renderizada repetidamente varendex = [] // Descubra qual elemento lister lister i.l)) (item.top <= window.scrolly && item.bottom> window.scrolly) {currentIndex = i; quebrar; } } var range = 0 // Find the elements to be displayed up and down respectively in the currently found element, until the total number reaches 35 while (range < 100 && showList.length + sameIndex.length < 35) { if (currentIndex - range >= 0) { // Compare whether the elements that meet the conditions are in the rendered list, mark them when they are in the rendered list, and if they are not there, put them in the Showlist Naquela época, substitua o elemento não marcado se (renderlist.includes (list [currentIndex - range] .id)) {// SameIndex.push (currentIndex) SameIndex.UnShift (renderlist.indexof (List [CurrentIndex] .Id))} else {ShowList.UnShft (List [CurrentIndex -. <list.length && range! = 0) {if (renderlist.includes (list [currentIndex + range] .id)) {SameIndex.push (renderlist.indexOf (list [currentIndex + range] .id))} else {showList.push (list [curta + range])}}}} não estão marcados se (renderlist.length> 0) {for (var i = 0; i <renderlist.length; i ++) {if (! SameIndex.includes (i) && showList.length) {renderlist [i] = showList.shift (). id $ ('ul li'). eq (i) .html (list [renderlist [i]. LIST [renderlist [i]]. top + 'px, 0px);')}}} else {// inicialize a lista pela primeira vez renderlist = showList.map (function (val) {return val.id}) renderlist.map (function) {$ ('ul). Lista [key] .top + 'px, 0px);>#' + list [key] .id + list [key] .text + '</li>'))})} console.log (renderlist)} // rendering render () $ (window) .scroll (função (e) {render ()}); PENDÊNCIAPontos -chave
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.