Otimize seus arrays em JS
Você já se perguntou como os arrays em JavaScript funcionam por baixo do capô?
Se você já teve alguma experiência com linguagens de programação como o C, C++, Java, entre outras, sabe que o jeito de utilizar os arrays é bem diferente. Nelas, os arrays têm tamanhos definidos durante sua criação e não podem ter seu tamanho alterado, a não ser que você crie manualmente outro array e copie TUDO para ele, para assim poder adicionar mais elementos.
Linguagens interpretadas e modernas como JavaScript e Python trouxeram muita facilidade para o desenvolvimento de software através de abstrações. Porém, será que podemos usá-las como mágica, sem entender o que acontece nos bastidores?
Hoje, iremos abordar como o seu uso de grandes Arrays sem esse conhecimento pode estar drenando a performance de sua aplicação. Vamos mergulhar nas diferenças fundamentais e descobrir como você pode otimizar o uso de arrays em JavaScript para garantir que suas aplicações rodem de forma mais eficiente.
A Diferença entre Arrays em C e JavaScript
Imagine um array em C como um grande estacionamento com vagas numeradas e já reservadas. Quando você cria um array com 10 vagas, a memória do computador é reservada de uma só vez, e cada vaga (elemento) tem seu lugar garantido. Para encontrar um carro (dado), o computador sabe exatamente para qual vaga ir, o que é super rápido.
Já um array em JavaScript é como um diário de anotações flexível. Você pode ir adicionando entradas (elementos) à medida que precisa. Acontece que, por baixo dos panos, o computador tenta guardar essas anotações em um espaço de memória. Se esse espaço encher, ele precisa encontrar um espaço maior, copiar todas as anotações antigas para lá e só depois adicionar a nova entrada.
Por que isso é um problema?
Essa "mudança de local" constante no JavaScript pode ser lenta, principalmente quando você está trabalhando com milhões de itens. Isso é uma perda de desempenho que pode ser evitada. O C não tem esse problema porque o estacionamento já foi planejado e reservado com antecedência.
Como podemos melhorar isso no JavaScript?*
Se você já sabe o tamanho aproximado das suas anotações, você pode "reservar o espaço" do JavaScript de uma forma mais inteligente. Em vez de começar com anotações vazias e ir adicionando itens um por um (causando as cópias de memória), você pode começar com um array já grande o suficiente.
Por exemplo, se você espera ter 1000 elementos, é melhor criar o array já com esse tamanho.
Exemplo prático:
Maneira que pode ser mais lenta (e causa cópias de memória):
let colecao = []; // Começa com 0 elementos
for (let i = 0; i < 1000; i++) {
colecao.push(i); // A cada "push" ele pode precisar realocar a memória
}Maneira mais eficiente (reservando o espaço de uma vez):
let colecao = new Array(1000); // Já cria o array com 1000 espaços vazios
for (let i = 0; i < 1000; i++) {
colecao[i] = i; // Apenas preenche os espaços que já existem
}A segunda abordagem é mais rápida** porque evitamos as realocações e cópias de memória que podem acontecer com o push. Ao inicializar o array com new Array(1000), você diz ao JavaScript para reservar o espaço de uma vez. Dessa forma, você aproveita o melhor dos dois mundos: a flexibilidade do JavaScript e a eficiência de um array com tamanho já definido.
* ' **: Nos testes que fiz que estão disponiveis abaixo para a maioria dos casos a versão mais otimizada de fato entregou mais performance, principalmente em testes com o Google Chrome, em que a diferença é expressiva! Testes no Firefox entregaram mais velocidade na forma "menos otimizada" para a boa parte dos casos que testei (diferenças ínfimas). Mas vale salientar que estes foram testes super simples, pequenas variações do teste que está disponível abaixo para voce testar na sua máquina e seu navegador. Talvez para situações de trabalho intenso e uso extensivo de memória mesmo com o motor do firefox pode ser que tenhamos um ganho de performance com o algorítimo otimizado.
See the Pen Untitled by Flou-Ainan (@flou-ainan) on CodePen.
Muito boa sua explicação!
ResponderExcluir