У меня есть веб-система поиска/просмотра документации, которую я разрабатываю для клиента. Часть этой системы - это поисковая система, которая позволяет клиенту искать термин [s], содержащийся в документации. У меня есть необходимые файлы данных поиска, но есть много данных, которые необходимо загрузить, и для загрузки всех данных требуется от 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 раз.
Я понял, что это было довольно неэффективно, поэтому я написал script, чтобы взять файл test.js, который содержит все вызовы функций выше, и обработал его, чтобы изменить его на гигантский массив, который равен структуре данных, которая BookData создает. Вместо выполнения всех вызовов функций, которые выполняла старая система, я просто делаю следующее:
var test_array[..........(data structure I need).......]
BookData[BookIndex] = test_array;
Я ожидал увидеть увеличение производительности, потому что я удалял все вызовы функций выше, этот метод занимает немного больше времени для создания точной структуры данных. Я должен отметить, что "test_array" содержит чуть более 90 000 элементов в моем реальном мире.
Кажется, что оба метода загрузки данных имеют примерно одинаковое использование ЦП. Я с удивлением обнаружил это, так как ожидал, что второй метод потребует небольшого времени процессора, так как структура данных создается заранее.
Просьба сообщить?
