У меня есть система поиска / просмотра документации на основе Интернета, которую я разрабатываю для клиента. Частью этой системы является поисковая система, которая позволяет клиенту искать термин (и), содержащийся в документации. У меня созданы необходимые файлы поисковых данных, но нужно загрузить много данных, и загрузка всех данных занимает от 8 до 20 секунд. Данные разбиты на 40-100 файлов, в зависимости от того, какую документацию нужно искать. Каждый файл находится где-то от 40-350 КБ.

Также это приложение должно запускаться как в локальной файловой системе, так и через веб-сервер.

Когда веб-страница загружается, я могу создать список файлов поисковых данных, которые мне нужно загрузить. Весь этот список должен быть загружен, прежде чем веб-страницу можно будет считать функциональной.

С этим предисловием, давайте посмотрим, как я это делаю сейчас.

После того, как я знаю, что вся веб-страница загружена, я вызываю функцию 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);
    }
  }

Это последовательно обрабатывает массив файлов с интервалом в 1 мс между файлами. Это помогает предотвратить полную блокировку браузера во время процесса загрузки, но браузер все еще имеет тенденцию зависать при загрузке данных. Каждый из загружаемых файлов выглядит следующим образом:

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

Где каждая строка - это вызов функции, которая добавляет данные в массив. Функция «AddToBookData» просто делает следующее:

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

Это существующая система. После загрузки всех данных «AddToBookData» может вызываться более 100 000 раз.

Я подумал, что это было довольно неэффективно, поэтому я написал скрипт для файла test.js, который содержит все вызовы функций выше, и обработал его, чтобы превратить его в гигантский массив, равный структуре данных, создаваемой BookData. Вместо того, чтобы делать все вызовы функций, которые делала старая система, я просто делаю следующее:

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

Я ожидал увидеть повышение производительности, потому что я удалил все вызовы функций выше, этот метод требует немного больше времени для создания точной структуры данных. Я должен отметить, что «test_array» содержит чуть более 90 000 элементов в моем реальном тесте.

Кажется, что оба метода загрузки данных имеют примерно одинаковую загрузку ЦП. Я был удивлен, обнаружив это, так как ожидал, что второй метод потребует небольшого процессорного времени, так как структура данных создается заранее.

Пожалуйста, порекомендуйте?