Eu tenho um sistema de pesquisa / visualização de documentação baseado na Web que estou desenvolvendo para um cliente. Parte deste sistema é um sistema de pesquisa que permite ao cliente procurar por um termo [s] contido na documentação. Criei os arquivos de dados de pesquisa necessários, mas há muitos dados que precisam ser carregados e leva de 8 a 20 segundos para carregar todos os dados. Os dados são divididos em 40 a 100 arquivos, dependendo da documentação que precisa ser pesquisada. Cada arquivo está entre 40-350kb.

Além disso, esse aplicativo deve ser capaz de executar no sistema de arquivos local, bem como através de um servidor da web.

Quando a página é carregada, posso gerar uma lista de quais arquivos de dados de pesquisa eu preciso carregar. Toda a lista deve ser carregada antes que a página da web possa ser considerada funcional.

Com esse prefácio fora do caminho, vejamos como estou fazendo isso agora.

Depois de saber que toda a página da Web está carregada, chamo a função loadData ()

function loadData(){
            var d = new Date();
            var curr_min = d.getMinutes();
            var curr_sec = d.getSeconds();
         var curr_mil = d.getMilliseconds();
         console.log("test.js started background loading, time is: " + curr_min + ":" + curr_sec+ ":" + curr_mil);
          recursiveCall();
      }


   function recursiveCall(){
      if(file_array.length > 0){
         var string = file_array.pop();
         setTimeout(function(){$.getScript(string,recursiveCall);},1);
    }
    else{
        var d = new Date();
        var curr_min = d.getMinutes();
        var curr_sec = d.getSeconds();
        var curr_mil = d.getMilliseconds();
        console.log("test.js stopped background loading, time is: " + curr_min + ":" + curr_sec+ ":" + curr_mil);
    }
  }

O que isso faz é processar uma matriz de arquivos sequencialmente, fazendo uma pausa de 1ms entre os arquivos. Isso ajuda a impedir que o navegador fique completamente bloqueado durante o processo de carregamento, mas o navegador ainda tende a ficar atolado ao carregar os dados. Cada um dos arquivos que estou carregando fica assim:

AddToBookData(0,[0,1,2,3,4,5,6,7,8]);
AddToBookData(1,[0,1,2,3,4,5,6,7,8]);
AddToBookData(2,[0,1,2,3,4,5,6,7,8]);

Onde cada linha é uma chamada de função que está adicionando dados a uma matriz. A função "AddToBookData" simplesmente faz o seguinte:

    function AddToBookData(index1,value1){
         BookData[BookIndex].push([index1,value1]);
    }

Este é o sistema existente. Depois de carregar todos os dados, "AddToBookData" pode ser chamado mais de 100.000 vezes.

Achei que isso era bastante ineficiente, então escrevi um script para pegar o arquivo test.js, que contém todas as chamadas de funções acima, e processei-o para transformá-lo em uma matriz gigante, igual à estrutura de dados que o BookData está criando. Em vez de fazer todas as chamadas de função que o sistema antigo fazia, basta fazer o seguinte:

var test_array[..........(data structure I need).......]
BookData[BookIndex] = test_array;

Eu esperava ver um aumento no desempenho porque estava removendo todas as chamadas de função acima, esse método leva um pouco mais de tempo para criar a estrutura de dados exata. Devo observar que "test_array" contém pouco mais de 90.000 elementos no meu teste do mundo real.

Parece que ambos os métodos de carregamento de dados têm aproximadamente a mesma utilização da CPU. Fiquei surpreso ao descobrir isso, pois esperava que o segundo método exigisse pouco tempo de CPU, pois a estrutura de dados está sendo criada antes da mão.

Por favor informar?