Есть несколько способов генерации html в скрипте,
1 вариант:
function CreateHtml() {
var Modules = getModules();
var Result = '<div class="randClass">... *Modules ...</div>';
// *Modules, тут мы вызываем другие функции построения модулей шаблона, уровень вложенности элементов может быть конским, конечный размер строки может составлять 300-500кб
return Result;
}
или
вариант 2:
function CreateHtml() {
var Modules = getModules();
var Result = $('<div/>', {
'class':'randClass'
})
.append (
Modules
);
// *Modules, фактически все происходит как и в 1 примере, но используется метод Jquery append
return Result;
}
или
вариант 3:
function CreateHtml() {
var Modules = getModules();
var Result = document.createElement('div');
Result.class = 'randClass';
Result.innerHTML = Modules;
// *Modules, аналогично 1 и 2 примеру, но построение элементов происходит через метод createElement
return Result;
}
Уточнение 1. К чему я привел вышеуказанные функции? Для пояснения того, что само построение строки или объекта разными методами, занимает достаточно мало времени (тут можно мне поверить, не буду приводить ненужные примеры) и составляет максимум 100 мс для 750кб конечного HTML-кода.
Уточнение 2. Тянуть с сервера уже готовый html или использовать готовые js-шаблонизаторы я не могу. Т.к. общение с сервером происходит по JSON, а конечный код генерируется по многим условиям. Да и не в этом дело, а в чем дело, читай дальше. =)
Проблема. Как только я собираюсь разместить полученный результат в DOM-дереве различными методами - рендеринг занимает уже от 500 мс и до десятков секунд. При наличии многих тысяч элементов, браузер фактически зависает и прелоадерами тут не отделаться.
Вопрос. Какими путями можно решить проблему с долгой генерацией DOM-дерева исходя из вышеописанных условий?
Простой