Digamos que você esteja tentando implementar um grande conjunto de dados em uma tabela. Quão grande, você pergunta? Digamos que 100.000 linhas precisam ser visualizadas em um único formato tabular.
Se você usar a implementação nativa em Vue.js, levará uma eternidade para a página renderizar todos os dados. Só porque você é um desenvolvedor de front-end, não significa que tem um passe livre em ter que se preocupar com problemas de desempenho!
Mesmo se você estiver renderizando uma tabela com apenas 1.000 linhas, não vai ser divertido para o usuário trabalhe em uma tabela desse comprimento. Você notará que a rolagem não é tão suave como normalmente é, especialmente ao usar a roda do mouse.
Neste artigo, falaremos sobre várias maneiras de reduzir o tempo de renderização e aumentar o desempenho geral para grandes conjuntos de dados. no Vue, bem como algumas dicas de manuseio de memória que ajudarão seus sites com muitos dados a funcionar mais suavemente e usar menos RAM.
Paginação
Esta é uma das soluções mais comuns para renderizar grandes conjuntos de dados. Paginação significa dividir a tabela em páginas separadas, de modo que renderizará apenas uma página por vez.
Você pode usar os itens prop, que aceita a função de provedor do item para buscar dados de um banco de dados remoto. Em seguida, use a paginação e a filtragem em sua solicitação de API para buscar apenas os dados necessários para cerca de 100 itens em cada solicitação.
Isso parece bastante simples. Mas e se você precisar carregar toda a tabela em uma única página? Talvez você precise de um ponto de extremidade para puxar tudo de volta e executar alguns cálculos nos dados.
Nesse caso, há outro método que podemos usar para carregar nossa tabela.
Carregar e exibir áreas específicas de dados
Existem algumas maneiras de carregar áreas específicas de dados sem paginação: com Clusterize.js e com Vue-virtual-scroller e outros componentes relacionados.
Clusterize.js
Clusterize.js é uma biblioteca JavaScript que resolve esse problema com bastante facilidade. Ele nos permite carregar e exibir apenas uma área específica da tabela. Então, como isso funciona?
A tabela é colocada dentro de um contêiner rolável que exibe algumas linhas por vez e permite que você navegue por toda a tabela. Apenas a parte visível da tabela será criada na estrutura DOM.
Assim que o usuário rolar dentro do contêiner da tabela, novos dados da tabela são carregados. Assim, o carregamento dos dados acontece em segundo plano e o usuário não notará nenhuma diferença.
Usar Clusterize.js em seu código é bastante simples.
A diferença no desempenho depois de adicionar este plugin é notável. No entanto, se você precisar ter certeza, há um exemplo atraente no topo do site que permite que você facilmente compare uma tabela regular com uma tabela otimizada para Clusterize.js. Certifique-se de verificar o playground deles também, para obter ainda mais provas.
Vue-virtual-scroller e Vue-virtual-scroll-list
Esses componentes populares permitem rápida percorrer grandes quantidades de dados em aplicativos Vue, mas vêm com uma ressalva; Vue-virtual-scroller e Vue-virtual-scroll-list não lida com alturas dinâmicas a menos que você as codifique. Se você quiser testá-lo, há um playground disponível para Vue Virtual Scroller aqui .
Outra opção é o Vue-collection-cluster componente, que permite calcular alturas dinamicamente, mas atrasa miseravelmente em cerca de 50.000 itens.
No entanto, mesmo com essas desvantagens, cada uma dessas bibliotecas permite que você construa um pergaminho virtual adequado. No final, se você tiver um banco de dados que empurra cerca de 10–100 MB de dados JSON, o desempenho está pronto.
Se o desempenho do seu site for otimizado, podemos prosseguir para a próxima seção.
Manuseio de memória
Ao lidar com um grande conjunto de dados, a maior coisa com que você precisa se preocupar é lidar com o uso de memória. Se você permitir que os usuários editem uma tabela com muitos dados, você atingirá o limite de memória e seu navegador irá parar de executar o JavaScript por completo.
Carregar tantos dados sobrecarrega os navegadores ( e o número de nós que eles podem reter na memória) e faz com que o uso de RAM de seus dispositivos dispare.
O problema será amplificado em dispositivos com menos memória, como smartphones e tablets, e pode até paralisar esses dispositivos. Está mordendo mais do que você pode mastigar.
Agora, o manuseio da memória pode ser melhorado de várias maneiras. Vou separá-lo em cinco etapas abaixo.
1. Limite a passagem desnecessária de dados
Podemos manter as coisas simples e reduzir o estresse em nosso back-end, buscando objetos simples sem modelos relacionados. Então, os resultados principais terão apenas chaves de ID para objetos relacionados.
Além disso, usando Axios (ou uma biblioteca semelhante) para buscar dados relacionados com solicitações AJAX separadas (por exemplo, “clientes”, “projetos” , “Locais”), nós pode usar VueX para armazená-los em suas próprias propriedades de lista. Isso evitará buscar árvores de modelo completo.
Primeiro, crie getters para cada objeto para que possamos usar modelos relacionados para buscar rótulos (ou objetos completos quando necessário) e nosso back end não precisa buscar itens relacionados dados mais de uma vez:
projectsById: state=> {return _.keyBy (state.projects,”id”)},
Então, podemos buscar listas diferentes, cada uma com seu próprio endpoint de controlador e cache os resultados para a loja VueX. Lembre-se de que você pode enviar várias solicitações usando Axios.all ([…]).
2. Otimize o manuseio de dados
É necessário otimizar a maneira como tratamos nossos dados. Você pode usar o objeto de componente como armazenamento de dados para seus objetos personalizados e listas de objetos.
Uma configuração de componente de lista otimizada é semelhante a:
module.exports={items: [], mixins: [ sharedUtils], data: function () {return {colunas: {all: [] etc…
3. Torne-o não reativo
É melhor lidar com uma matriz de itens como não reativa, mas como podemos lidar com isso de uma maneira não reativa se quisermos que a tabela seja reativa com filtros em tempo real?
Sempre que um usuário clica em um botão de filtro ou insere um filtro de string (como um nome), precisamos acionar a filtragem da matriz de itens. Este método processFilters passa pela matriz de itens não responsivos e retorna filterItems, que são armazenados em DataContext, de forma que se torna automaticamente reativo conforme é transformado:
Dessa forma, todos os itens dentro dos itens filtrados permanecem reativos, mas também perdem reatividade quando são filtrados, economizando muita memória.
No entanto, o problema aqui é que não podemos apenas usar itens no DataContext diretamente dentro de um modelo.
Portanto, você não pode usar este:
Por exemplo, imagine que você tem um objeto-aluno que contém um objeto-universidade. Agora, vários alunos vão para a mesma universidade. Mas quando você busca dados JSON do back-end, tem certeza de que esses objetos universitários duplicados são a mesma universidade? Ou são várias representações do mesmo objeto?
Você pode, é claro, passar a universidade como uma propriedade para seu objeto de aluno. Ao mesmo tempo, se você não tiver certeza se está se referindo a um objeto universitário compartilhado ou usando dezenas de instâncias dos mesmos subobjetos, pode simplesmente fazer a referência dentro de seu componente de lista de alunos.
Um aluno conterá um id de universidade, portanto, busque uma lista de universidades com um método REST separado (por exemplo, getUniversities ()) e faça o emparelhamento no nível da IU. Dessa forma, você tem apenas uma lista de universidades e pode resolver a universidade a partir dessa lista e injetá-la em uma pessoa, fazendo referência a apenas uma.
Basicamente, você precisa gerenciar seus registros mestre (por exemplo, pessoas ou produtos) vs. registros relacionados (subobjetos ou objetos relacionais).
Lembre-se de que você não pode usar este método se o subobjeto for reativo. Se ele precisa ser editável, você precisa ter certeza de que não está usando o objeto referido!
Conclusão
Neste artigo, discutimos brevemente a paginação e o uso de Clusterize.js para otimizar o desempenho de um site. Em seguida, mergulhamos no manuseio de memória com cinco etapas fáceis: limitar a passagem desnecessária de dados, otimizar o manuseio de dados, torná-los não reativos, ter um contêiner oculto e diferenciar instâncias de objetos das referenciadas.
Todas as coisas considerado, o Vue é bastante eficiente no tratamento de grandes conjuntos de dados. Mas, como tudo, a melhor maneira de ver se é adequado para suas necessidades seria criar o tipo de componentes, filtros e classificações de que você precisa e, em seguida, carregá-los com grandes conjuntos de dados (semente ou teste) para verificar se eles têm desempenho suficiente para as suas necessidades.
