Renderizar itens no DOM individualmente pode causar um atraso de desempenho significativo para os usuários, especialmente quando eles estão rolando por listas grandes. Para tornar a rolagem mais eficiente, devemos usar uma lista de rolagem virtual, que aumenta a velocidade de carregamento da página e evita que o aplicativo da web gagueje.
Uma lista de rolagem virtual é semelhante a uma lista de rolagem padrão, no entanto, apenas o os dados na visualização atual do usuário são renderizados a qualquer momento. Conforme um usuário rola para baixo em uma página, novos itens são renderizados conforme os itens mais antigos são removidos.
Neste artigo, exploraremos vue-virtual-scroll-list , uma biblioteca incrível para a criação de listas de rolagem virtuais em Vue.js. Vamos começar!
Renderizando conteúdo em vue-virtual-scroll-list
A biblioteca vue-virtual-scroll-list tem dois métodos principais para renderizar o conteúdo de uma página da web em uma lista, modo de item e modo v para.
O modo de item é ideal para renderizar conteúdo estático. Depois que o conteúdo é anexado ao DOM, o modo de item libera a memória que estava sendo usada. Se você alterar os dados, precisará chamar forceRender () e iniciar o processo novamente.
Para renderizar conteúdo dinâmico, a melhor escolha é o modo v-for. No modo v-for, os dados fornecidos na lista são referenciados dentro da memória. Portanto, quando os dados mudam, os itens da lista são renderizados novamente e o contexto é mantido.
Vamos dar uma olhada mais de perto na biblioteca vue-virtual-scroll-list comparando o desempenho do modo de item com e sem usar uma lista de rolagem virtual.
Primeiro, configuraremos um novo projeto Vue.js e instalaremos vue-virtual-scroll-list. Então, vamos criar uma lista usando dados gerados aleatoriamente. Por fim, renderizaremos nossa lista com e sem rolagem virtual, comparando o desempenho de cada um.
Configurando um projeto Vue.js
Primeiro, certifique-se de ter o Vue.js instalado em sua máquina. Crie um novo projeto Vue.js com o seguinte comando:
vue create virtual-scroll-demo
Assim que o projeto estiver configurado, instale a biblioteca vue-virtual-scroll-list:
npm install vue-virtual-scroll-list–save
Agora, nosso projeto tem a seguinte estrutura:
Gerando uma lista
Agora que temos a base para nossa configuração de projeto, vamos começar na base para a criação de ambas as nossas listas.
Navegue até sua pasta/src e crie um arquivo chamado data.js. Vamos adicionar a seguinte função simples que gera dados aleatórios para data.js:
let idCounter=0; função de exportação getData (contagem) {const data=[]; for (let index=0; index
Renderizando uma lista sem rolagem virtual
Agora que temos uma lista criada, vamos renderizar os itens da lista em nosso DOM sem usar a lista de rolagem virtual vue. Adicione o seguinte código a App.vue:
{{item}}
No bloco de código acima, renderizamos 100.000 itens em nosso DOM. Vamos ver como nossa lista funcionará com tantos dados e nenhuma rolagem virtual. Inicie o projeto com o seguinte comando npm:
npm run serve
Obteremos a seguinte saída:
Quando verificamos o elemento inspecionar no navegador, veremos que todos os elementos HTML foram anexados ao DOM do navegador , como pode ser visto na imagem abaixo:
Anexar elementos no DOM do navegador aumentará o tamanho do DOM. Portanto, o navegador exigirá mais tempo para anexar cada item ao DOM, podendo causar um atraso significativo no desempenho. Vejamos com atenção quanto tempo o navegador levou para anexar nossa lista ao DOM:
O evento DOMContentLoaded disparou após 22 segundos, o que significa que a guia do navegador é necessária 22 segundos para carregar antes de exibir a lista final renderizada. Da mesma forma, como pode ser visto na imagem abaixo, renderizar nossa lista consumiu 128 MB de memória:
Renderizando uma lista com rolagem virtual
Agora, vamos tentar renderizar nossa lista usando um pergaminho virtual. Importe o pacote vue-virtual-scroll-list em main.js:
import Vue de”vue”; importar App de”./App.vue”; Vue.config.productionTip=false; importar VirtualList de”vue-virtual-scroll-list”; Vue.component (“lista-virtual”, VirtualList); new Vue ({render: (h)=> h (App),}). $ mount (“# app”);
A seguir, renderizaremos os dados dos itens dentro do componente de lista virtual. Vamos mudar nosso arquivo App.js para se parecer com o seguinte bloco de código:
Observe que os props de dados são necessários para que a lista virtual renderize os itens. Executar o bloco de código acima nos dará a seguinte saída:
Podemos ver na imagem abaixo que apenas alguns itens são renderizados de uma vez. Quando o usuário rola para baixo, os itens mais recentes são renderizados:
Agora, nossa árvore DOM é muito menor do que antes! Quando renderizamos nossa lista de rolagem virtual, DOMContentLoaded disparará muito mais rápido do que antes!
Como visto na imagem acima, o evento disparou em apenas 563 milissegundos. Da mesma forma, nossa operação consumiu apenas 79 MB de memória, o que é muito menos do que quando não usamos um pergaminho virtual.
Conclusão
Agora você sabe como criar uma lista de rolagem virtual em Vue.js usando a biblioteca vue-virtual-scroll-list!
Neste tutorial, criamos uma lista estática que usa dados gerados aleatoriamente e a implementamos em nosso aplicativo Vue.js, comparando seu desempenho com e sem o uso de uma rolagem virtual.
Listas de rolagem virtuais têm alto desempenho, especialmente quando você tem uma grande lista de itens em sua página da web. Usar uma lista de rolagem virtual pode aumentar a velocidade de carregamento da página e melhorar a experiência do usuário em geral!
