Метод переключения JQuery Медленный на 1000+ UL

Question

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

Я не делаю никакой анимации или чего-либо еще, просто пытаюсь скрыть следующий UL в элементе, используя функцию переключения JQuery. У кого-нибудь есть идеи как улучшить производительность?

Спасибо !!

Answer 1

Если переключение медленное, вы можете установить стили CSS напрямую через jquery, например:

$(".tree_item").click(function(){
  //check the next ul if it is expanded or not
  if(this.next('ul:hidden').length == 0){
    //if expanded hide it
    this.next('ul').css('display', 'none');
  }else{
    //if not shown, show it
    this.next('ul').css('display', 'block');
  }
});

такой подход помог бы. Я не знаю, будет ли это работать быстрее, но попробуйте ...

Синан.

Answer 2

Я обнаружил, что .toggle (showOrHide) работает быстро. Он был добавлен в jQuery 1.3 и действительно имеет значение для больших коллекций (более 50 элементов) в IE8, если анимация не требуется. Текущее состояние видимости можно получить из первого элемента, например:

    var isVisible = $('.myClass').first().is(':visible');
    $('.myClass').toggle(!isVisible);

Answer 3

Меня совсем не удивляет, что это медленно, если у тебя такое большое дерево. Silverlight 3 решает эту проблему с помощью UI Virtualization .

Вам придется свернуть свое собственное в javascript, но это не должно быть так сложно. Просто создайте огромный пустой div, который будет размером с визуализированным деревом, и поместите его в прокручиваемый div, а затем визуализируйте только то, что должно появиться Измените его в событии onscroll.

Answer 4

Вы можете попытаться при запуске построить свой собственный объект дерева из документа DOM.

Просто переберите все элементы и вложите их в стандартные атрибуты и переменные. Вы можете создать дополнительные указатели для родителей и детей, используя $(element).get(0).parent = $(parent).get(0);

Тогда, если вы хотите получить указанные элементы, используйте функцию $.map.

Мы использовали его, чтобы подготовить что-то вроде firebug в проекте. Он восстановил все порталы 5000+ узлов за 3 секунды и обеспечил быстрый доступ на ie6 +