需要帮助来加速这个 jQuery 过程

Question

我创建了以下流程。基本上，它循环遍历一个具有多层嵌套列表的巨大无序列表，并创建一个 2 层嵌套无序列表。它运行良好，但在 IE7 中非常慢。 FireFox 和 Safari 没有什么大问题。不太擅长 jQuery 我想知道是否可以通过使用更好/更快/更智能的函数来加快速度。由于我使用的 CMS，我无法更改输出，也无法更改我使用的 jQuery 版本（1.2.6）。

这就是我所拥有的；

$('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));
});
// take all lis out of their uls
$('ul#mainnav li ul').each(function() {
    $(this).replaceWith($(this).children());                
});
// wrap chidlren lis with div
$('ul#mainnav li').each(function() {
    $(this).children('li:first').before('<ul class="megamenu" />');     
    $(this).children('.megamenu').append($(this).children('li'));
});
// apply plugin easyLisSplitter
$('.megamenu').easyListSplitter({ 
    colNumber: 5
});

有什么想法吗？如果需要更多信息，请告诉我！

干杯

编辑：

感谢所有回复。还没有尝试一切。使用 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>

Answer 1

另一件应该有所帮助的事情是通过将结果对象存储在变量中来消除冗余的 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 对象时，变量名称以 $ 开头的约定。

另外，我不确定，但我认为有一种更直接的方法来附加到子列表，这可能会简化上述代码的最后一行。也许像 $this.children('ul').append 之类的东西？

正如其他答案所说，只改变 live dom 一次。另一种方法是克隆您正在处理的整个结构，操作克隆，然后用克隆替换原始结构。无论您如何操作，关键是要避免浏览器尝试渲染所做的每个更改。

Answer 2

您是否尝试在应用更改时隐藏列表，以避免浏览器在每次更改后重新排列布局？

Answer 3

您可以做的一件事是为您的 .megamenu 选择器提供上下文。按类名选择比按 id 选择需要更长的时间，因为 Javascript 中没有本地函数可以执行此操作。在选择器上设置范围有助于 jQuery 缩小对该类元素的搜索范围。它看起来像这样：

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

但这在您的设置中可能是不可能的。

另一件事是构造一个 html 字符串，将其一次性附加到您的megamenu，而不是为列表中的每个 LI 运行append()。如果您想减少插入 DOM 节点所需的时间，jQuery 的追加方法非常适合处理大型 HTML 字符串。这似乎是这里最大的问题...您在循环内运行了大量 DOM 操作方法。您希望尽可能减少这些。然而，除了构造一个 html 字符串以一次将所有内容附加到 megamenu（可能应该是一个 ID，而不是一个类）之外，在您的脚本中可能无法做太多事情。

Answer 4

好吧，今晚我正在学习大量有关 jQuery 的知识...我尝试了一种完全不同的方法。我想要第二级及更深层次的所有列表项作为兄弟姐妹的原因是因为我想使用 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>'); 
    }
});

Answer 5

您是否尝试过对以前版本的 jQuery 使用 .detach() 类似的解决方法（因为 detach 是 1.4具体的）？

具体来说这个例子可能有效（不确定，我不再使用1.2.6请求者要求提供 1.3.2 解决方法）。

elem.clone(true);
elem.remove();