Дерево Dijit, как улучшить производительность для большого дерева с 500 дочерними узлами под root

Question

Каждый узел дерева содержит другие внутренние виджеты, поэтому рендеринг целых 500 элементов занимает много времени, особенно в IE.

Для отображения дерева в IE может потребоваться 10-20 секунд.

Мне было интересно, как его улучшить, сократить время рендеринга.

Есть предложения по этому поводу?

Я обнаружил, что существует TreeGrid, показывающий только несколько строк за раз и обновляющий представление во время пользовательской прокрутки, имеет ли dijit.Tree такую ​​возможность?

Answer 1

Если у вас не так много корневых узлов, вы можете использовать механизм отложенной загрузки, см., Например, эту статью на sitepen

Будьте предупреждены, он хорошо работает с dojo 1.4 - 1.5.1, в dojo 1.6.1 есть некоторые странные проблемы с JsonRestStore.

См. этот вопрос в stackoverflow

изменить в соответствии с уточнением

Я не думаю, что дерево может строить только узлы в области просмотра. По крайней мере, это невозможно с помощью стандартного дерева dijit.tree.

В одном из наших приложений мы вставили узлы структуры в качестве обходного пути, т.е.

root
---[1..30] - structure node 
  ---item 1
  ---item 2
  ...
---[31..60] - structure node
   ---item 31
   ---item 32
   ...
...

с другой стороны, звучит так, будто древовидная сетка близко соответствует тому, что вы хотите, возможно, она могла бы работать с небольшим количеством стиля

Answer 2

Это может быть поздний ответ, но у проекта, над которым я работаю, была та же проблема, и приложение должно было работать в IE7, поэтому производительность была определенно не хорошей.Основная проблема заключается в том, что у вас есть много узлов на одном уровне, и мы имели дело с сотнями, если не с тысячей, вызывая всплывающее ужасное диалоговое окно запуска скриптов.

Недавно мы заменили использование dijit.Treeс нашей собственной реализацией дерева, находя дополнительную абстракцию резервного хранилища ненужной, так как сервер уже был уровнем абстракции данных.Следовательно, у нас есть сервер, который генерирует фрагмент HTML, используя div и span для представления структуры дерева и пользовательских атрибутов для связи данных для каждого узла.CSS используется для визуального форматирования данных.

Этот подход использует встроенную способность браузера обрабатывать HTML.Несколько подключений к событиям мыши и клавиатуры позволяют нам эффективно получать полную функциональность на основе дерева (включая всплывающие подсказки для узлов).Вот упрощенный пример типа HTML-структуры, которую генерирует наш сервер:

<div class="treeFolder">
   <span class="treeFolderInd">+</span>
   <span class="treeFolderLabel">Folder label</span>
   <div class="treeFolderContent">
      <div class="treeFolder">
         <span class="treeFolderInd">+</span>
         <span class="treeFolderLabel">Sub-folder</span>
         <div class="treeFolderContent">
            <div class="treeItem" my-action="doSomething"
                 my-data="{arg1:'hello', arg2:'world'"
                 my-tooltip="Goodbye">
               <span class="treeItemInd">o</span>
               <span class="treeItemContent">
                Item text
               </span>
            </div>
            <div class="treeItem" my-action="doSomethingElse"
                 my-data="{arg1:'foo', arg2:'bar'}"
                 my-tooltip="Another tip">
               <span class="treeItemInd">o</span>
               <span class="treeItemContent">
                Item text
               </span>
            </div>
            ...

Имена классов используются для форматирования CSS.Различные атрибуты my- * - это пользовательские атрибуты, которые клиентская часть приложения использует для привязки действий, когда пользователь выбирает узел дерева.Мы используем строку JSON для представления в данных, поэтому dojo.fromJson () можно использовать для атрибута, чтобы получить данные, связанные с узлом (мы внутренне кэшируем объект, созданный с помощью узла DOM, поэтому метод fromJson () не должениспользоваться каждый раз, когда к данным обращаются.

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

Конечно, можно создавать альтернативные структуры для представления данных дерева, но я думаю, что вы поняли идею. Мы инкапсулируем основные функциональные возможности дерева в классе с некоторыми виртуальными событиями, которые представляют при нажатии на элементи другие действия дерева. Пользователь класса просто уses dojo.connect () для подключения к интересующим событиям дерева.

Примечание: создание экземпляров dijit.Tooltip для всех элементов стало существенным фактором снижения производительности.Чтобы обойти это, мы управляем отображением подсказок, используя dijit.showTooltip () и dijit.hideTooltip () непосредственно против создания экземпляров dijit.Tooltip.

Одна неприятная вещь для нас - это застревание в IE7.IE7 ухудшает общую производительность при работе с большими наборами данных, даже если в системе достаточно оперативной памяти.IE8 и IE9 значительно улучшены в этом отношении.

Answer 3

Вы можете попробовать использовать Lazy Tree Grid вместе с Query Read Store.Это делает то, что вам нужно.Ленивая загрузка детей после энергичной загрузки родителей.Количество родительских элементов, которые необходимо загрузить, также можно контролировать с помощью grid.rowsPerPage