Tengo un sistema de búsqueda / visualización de documentación basado en la web que estoy desarrollando para un cliente. Parte de este sistema es un sistema de búsqueda que permite al cliente buscar un término [s] contenido en la documentación. Tengo los archivos de datos de búsqueda necesarios creados, pero hay muchos datos que deben cargarse, y se tarda entre 8 y 20 segundos en cargar todos los datos. Los datos se dividen en 40-100 archivos, según la documentación que se deba buscar. Cada archivo tiene entre 40 y 350 kb.

Además, esta aplicación debe poder ejecutarse en el sistema de archivos local, así como a través de un servidor web.

Cuando la página web se carga, puedo generar una lista de los archivos de datos de búsqueda que necesito cargar. Esta lista completa debe cargarse antes de que la página web pueda considerarse funcional.

Con ese prefacio fuera del camino, veamos cómo lo estoy haciendo ahora.

Después de saber que se carga toda la página web, invoco una función 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);
    }
  }

Lo que esto hace es procesar una matriz de archivos secuencialmente, tomando un descanso de 1 ms entre archivos. Esto ayuda a evitar que el navegador se bloquee por completo durante el proceso de carga, pero el navegador aún tiende a atascarse al cargar los datos. Cada uno de los archivos que estoy cargando se ve así:

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]);

Donde cada línea es una llamada de función que agrega datos a una matriz. La función "AddToBookData" simplemente hace lo siguiente:

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

Este es el sistema existente. Después de cargar todos los datos, "AddToBookData" puede llamarse más de 100,000 veces.

Pensé que era bastante ineficiente, así que escribí un script para tomar el archivo test.js que contiene todas las llamadas a funciones anteriores, y lo procesé para cambiarlo a una matriz gigante que es igual a la estructura de datos que BookData está creando. En lugar de hacer todas las llamadas a funciones que hacía el sistema anterior, simplemente hago lo siguiente:

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

Esperaba ver un aumento en el rendimiento porque estaba eliminando todas las llamadas a funciones anteriores, este método toma un poco más de tiempo para crear la estructura de datos exacta. Debo señalar que "test_array" contiene algo más de 90,000 elementos en mi prueba del mundo real.

Parece que ambos métodos de carga de datos tienen aproximadamente la misma utilización de CPU. Me sorprendió encontrar esto, ya que esperaba que el segundo método requiriera poco tiempo de CPU, ya que la estructura de datos se está creando de antemano.

¿Por favor avise?