Проблема с производительностью в библиотеке Javascript dtree.js

Question

В моем приложении (разработанном еще в 2006 году) разработчики использовали dtree.js ( Link ) для визуализации иерархического дерева.Проблема возникла, когда в 2010 году дерево выросло до 1300 узлов и глубины до 13 уровней.После этого страница начала загружаться очень медленно, и в IE она выдала печально известное «Прекратить запускать этот скрипт?»ошибка.Я хочу улучшить производительность, но все мои уловки провалились:

1. Кэширование переменных, элементы DOM.
2. Расчет длины массива вне циклов.
3. Минимизация использованияloops.

Помимо этого, я пытался использовать setTimeout (), чтобы прервать выполнение небольших задач, но я не могу заставить его работать, поскольку у него много ограничений.Кроме того, я не могу переместить рендеринг дерева на сервер.

Любая помощь приветствуется.

Спасибо, Сид

Answer 1

Обычно то, что медленно в любом браузере, связано с DOM.

Если вы можете лениво загрузить любую часть HTML-представления дерева, сделайте это.

В общем, попробуйтечтобы свести к минимуму количество попыток редактирования DOM.

Пример:

for(var i = 0; i < data.length; i += 1) {
    dom_element.innerHTML += data.some_data;
}

vs

var string = "";
for(var i = 0; i < data.length; i += 1) {
    string += data.some_data;
}
dom_element.innerHTML += string; // only one call to innerHTML, likely much faster!

innerHTML также быстрее, чем при использовании стиля DOMDocument (document.createElement, element.append и т. Д.)