Нужна помощь в ускорении этого процесса JQuery - PullRequest
Новая
       15

Нужна помощь в ускорении этого процесса JQuery

3 голосов
/ 08 октября 2010

Я создал следующий процесс.По сути, он проходит по гигантскому неупорядоченному списку с несколькими уровнями вложенных списков и создает двухуровневый неупорядоченный список.Это хорошо работает, но очень медленно в IE7.У FireFox и Safari нет больших проблем с этим.Не очень хорошо в jQuery Мне было интересно, смогу ли я ускорить это, используя лучшие / быстрее / умнее функции.Из-за CMS, которую я использую, я не могу изменить ни вывод, ни версию jQuery, которую я использую, а именно 1.2.6.

Вот что у меня есть;?Если требуется дополнительная информация, дайте мне знать!

Приветствия

РЕДАКТИРОВАТЬ:

Спасибо за все ответы.Еще не пробовал все.Используя var $ this = $ (this);ускорил вещи на 20 миллисекунд.Ну, я возьму их.Вся помощь по-прежнему приветствуется!Вот разметка перед: 

<ul id="mainnav">
<li><a href="#">A-1</a>
    <ul>
        <li><a href="#">A-1-1</a>
            <ul>
                <li><a href="#">A-1-1-1</a></li>
                <li><a href="#">A-1-1-2</a></li>
                <li><a href="#">A-1-1-3</a></li>
            </ul>
        </li>
        <li><a href="#">A-1-2</a></li>
        <li><a href="#">A-1-3</a>
            <ul>
                <li><a href="#">A-1-3-1</a></li>
                <li><a href="#">A-1-3-2</a></li>
                <li><a href="#">A-1-3-3</a></li>
            </ul>
        </li>
        <li><a href="#">A-1-4</a>
            <ul>
                <li><a href="#">A-1-4-1</a></li>
                <li><a href="#">A-1-4-2</a></li>
                <li><a href="#">A-1-4-3</a></li>
                <li><a href="#">A-1-4-4</a></li>
                <li><a href="#">A-1-4-5</a></li>
            </ul>
        </li>
        <li><a href="#">A-1-5</a>
            <ul>
                <li><a href="#">A-1-5-1</a></li>
                <li><a href="#">A-1-5-2</a></li>
                <li><a href="#">A-1-5-3</a></li>
                <li><a href="#">A-1-5-4</a></li>
                <li><a href="#">A-1-5-5</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">B-1</a>
    <ul>
        <li><a href="#">B-1-1</a>
            <ul>
                <li><a href="#">B-1-1-1</a></li>
                <li><a href="#">B-1-1-2</a></li>
                <li><a href="#">B-1-1-3</a></li>
            </ul>
        </li>
        <li><a href="#">B-1-2</a></li>
        <li><a href="#">B-1-3</a>
            <ul>
                <li><a href="#">B-1-3-1</a></li>
                <li><a href="#">B-1-3-2</a></li>
                <li><a href="#">B-1-3-3</a></li>
            </ul>
        </li>
        <li><a href="#">B-1-4</a>
            <ul>
                <li><a href="#">B-1-4-1</a></li>
                <li><a href="#">B-1-4-2</a></li>
                <li><a href="#">B-1-4-3</a></li>
                <li><a href="#">B-1-4-4</a></li>
                <li><a href="#">B-1-4-5</a></li>
            </ul>
        </li>
        <li><a href="#">B-1-5</a>
            <ul>
                <li><a href="#">B-1-5-1</a></li>
                <li><a href="#">B-1-5-2</a></li>
                <li><a href="#">B-1-5-3</a></li>
                <li><a href="#">B-1-5-4</a></li>
                <li><a href="#">B-1-5-5</a></li>
            </ul>
        </li>
    </ul>
</li>

А вот после; 

<ul id="mainnav">
<li><a href="#">A-1</a>
    <div class="listContainer1">
        <ul class="megamenu listCol1">
            <li class="depth-2"><a href="#">A-1-1</a></li>
            <li class="depth-3"><a href="#">A-1-1-1</a></li>
            <li class="depth-3"><a href="#">A-1-1-2</a></li>
            <li class="depth-3"><a href="#">A-1-1-3</a></li>
            <li class="depth-2"><a href="#">A-1-2</a></li>
        </ul>
        <ul class="listCol2 megamenu">
            <li class="depth-2"><a href="#">A-1-3</a></li>
            <li class="depth-3"><a href="#">A-1-3-1</a></li>
            <li class="depth-3"><a href="#">A-1-3-2</a></li>
            <li class="depth-3"><a href="#">A-1-3-3</a></li>
            <li class="depth-2"><a href="#">A-1-4</a></li>
        </ul>
        <ul class="listCol3 megamenu">
            <li class="depth-3"><a href="#">A-1-4-1</a></li>
            <li class="depth-3"><a href="#">A-1-4-2</a></li>
            <li class="depth-3"><a href="#">A-1-4-3</a></li>
            <li class="depth-3"><a href="#">A-1-4-4</a></li>
            <li class="depth-3"><a href="#">A-1-4-5</a></li>
        </ul>
        <ul class="listCol4 megamenu">
            <li class="depth-2"><a href="#">A-1-5</a></li>
            <li class="depth-3"><a href="#">A-1-5-1</a></li>
            <li class="depth-3"><a href="#">A-1-5-2</a></li>
            <li class="depth-3"><a href="#">A-1-5-3</a></li>
            <li class="depth-3"><a href="#">A-1-5-4</a></li>
        </ul>
        <ul class="listCol5 megamenu last">
            <li class="depth-3"><a href="#">A-1-5-5</a></li>
        </ul>
    </div>
</li>
<li><a href="#">B-1</a>
    <div class="listContainer2">
        <ul class="megamenu listCol1">
            <li class="depth-2"><a href="#">B-1-1</a></li>
            <li class="depth-3"><a href="#">B-1-1-1</a></li>
            <li class="depth-3"><a href="#">B-1-1-2</a></li>
            <li class="depth-3"><a href="#">B-1-1-3</a></li>
            <li class="depth-2"><a href="#">B-1-2</a></li>
        </ul>
        <ul class="listCol2 megamenu">
            <li class="depth-2"><a href="#">B-1-3</a></li>
            <li class="depth-3"><a href="#">B-1-3-1</a></li>
            <li class="depth-3"><a href="#">B-1-3-2</a></li>
            <li class="depth-3"><a href="#">B-1-3-3</a></li>
            <li class="depth-2"><a href="#">B-1-4</a></li>
        </ul>
        <ul class="listCol3 megamenu">
            <li class="depth-3"><a href="#">B-1-4-1</a></li>
            <li class="depth-3"><a href="#">B-1-4-2</a></li>
            <li class="depth-3"><a href="#">B-1-4-3</a></li>
            <li class="depth-3"><a href="#">B-1-4-4</a></li>
            <li class="depth-3"><a href="#">B-1-4-5</a></li>
        </ul>
        <ul class="listCol4 megamenu">
            <li class="depth-2"><a href="#">B-1-5</a></li>
            <li class="depth-3"><a href="#">B-1-5-1</a></li>
            <li class="depth-3"><a href="#">B-1-5-2</a></li>
            <li class="depth-3"><a href="#">B-1-5-3</a></li>
            <li class="depth-3"><a href="#">B-1-5-4</a></li>
        </ul>
        <ul class="listCol5 megamenu last">
            <li class="depth-3"><a href="#">B-1-5-5</a></li>
        </ul>
    </div>
</li>

Ответы [ 5 ]

1 голос
/ 09 октября 2010

Еще одна вещь, которая должна помочь, - это исключить избыточные вызовы jquery, сохранив результирующий объект в переменной.Например, измените это: 

$('ul#mainnav li ul li').each(function() {
    // add level class
    $(this).addClass('depth-'+$(this).parents('ul').length);
    // make uls siblings in stead of children
    $($(this).children('ul')).insertAfter($(this));
});

на следующее: 

$('ul#mainnav li ul li').each(function() {
    var $this = $(this);
    // add level class
    $this.addClass('depth-'+$this.parents('ul').length);
    // make uls siblings in stead of children
    $($this.children('ul')).insertAfter($this);
});

Обратите внимание на соглашение о начале имени переменной с $, когда оно ссылается на объект jquery.

* 1008Кроме того, я не уверен, но я думаю, что есть более прямой способ добавить список детей, который может упростить последнюю строку кода выше.Может быть, что-то вроде $ this.children ('ul'). Append?

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

0 голосов
/ 13 октября 2010

Вы пытались использовать .detach () -подобные обходные пути для предыдущих версий jQuery (так как detach зависит от 1.4)?

Конкретно этот пример может работать (не уверен, я больше не использую 1.2.6, а запрашивающий запросил обходной путь 1.3.2). 

elem.clone(true);
elem.remove();
0 голосов
/ 11 октября 2010

Ну, сегодня вечером я узнаю много нового о jQuery ... Я попробовал совершенно другой подход.Причина, по которой я хотел, чтобы все элементы списка 2-го уровня и глубже как братьев и сестер, заключалась в том, что я хотел использовать плагин easylistsplitter.Поскольку это съело много ресурсов, я создал следующий код.Мне не нужны элементы списка, Google не запускает jQuery, поэтому он будет видеть элементы списка, мои пользователи увидят аккуратное маленькое меню с пунктами меню, разбитыми на столбцы.Надеюсь, что этот код помогает другим, он выполняет работу вдвое быстрее, чем первый код.

Если у кого-то есть какие-либо указания по созданию этого кода еще быстрее, сообщите мне. 

    $('ul#mainnav).each(function() {
    $(this).children('li').append('<div class="megamenu" />');
});
$('ul#mainnav').each(function() {
    var $this = $(this);
    var $length = $this.parents('ul').length;
    $this.addClass('depth-'+$length);
    if($length > 1) {
        $this.appendTo($this.parents('li').find('div.megamenu'));
    }
});
$('ul#mainnav ul').remove();
$('ul#mainnav div.megamenu').each(function() {
    var links = $(this).find('a');
    var columns = 5;
    var perCol = Math.ceil(links.length/columns);
    for(var i = 0; i < links.length; i+=perCol) { 
      links.slice(i, i+perCol).wrapAll('<div>'); 
    }
});
0 голосов
/ 09 октября 2010

Одна вещь, которую вы могли бы сделать, это предоставить контекст для вашего селектора .megamenu.Выбор по имени класса занимает немного больше времени, чем выбор по идентификатору, потому что в Javascript нет встроенной функции для этого.Установка области видимости для селектора помогает jQuery сузить поиск элементов этого класса.Это выглядело бы так: 

$('.megamenu', $('#someelement'))

Но это может быть невозможно в вашей настройке.

Другая вещь будет состоять в том, чтобы создать строку html, которую вы добавляете в свое мегаменю одновременновместо запуска append () для каждого LI в вашем списке.Метод добавления jQuery прекрасно работает с большими строками HTML, если вы хотите сократить время, необходимое для вставки DOM-узлов.Это, кажется, самая большая проблема здесь ... вы используете много циклов DOM-манипуляций внутри циклов.Вы хотите сократить как можно больше из них, где можете.Однако в вашем сценарии может оказаться невозможным многое сделать, кроме создания строки html, которая сразу добавляется в megamenu (который, возможно, должен быть идентификатором, а не классом).

0 голосов
/ 09 октября 2010

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

...