Princípio: O princípio deste esquema é usar um contêiner grande como a área de rolagem, que possui uma área de conteúdo. JS calcula a altura da área de conteúdo através do número de dados e da altura de cada parte de dados. A área de conteúdo usa preenchimento ou posicionamento absoluto para expandir a área de rolagem. Para tornar o contêiner rolável, e o outro é o item de dados. Ao rolar, calcule a posição atual de rolagem scrollTop e, em seguida, encontre a altura de cada item no item de dados e calcule quais dados são colocados no contêiner no momento.
Para resumir, as cinco principais otimizações
-
Alterar a implementação da tabela para outra implementação de rótulo de elemento
-
Renderizar apenas os dados visíveis na viewport
-
Executar regulagem de função
-
Reduza os componentes residentes do VNode e Vue, em vez de usar o método de slot de subcomponente exibido, crie manualmente um DOM virtual para cortar as referências de objetos
-
Reduza o número de objetos adicionados durante a operação, o componente será atualizado e atualizado durante a operação, o que pode reduzir o número de subcomponentes no componente
Lembre-se da análise do desempenho da memória e otimização de uma longa lista de itens
