.html() 在同一类的所有元素上的 Jquery 优化答案

【问题标题】：Jquery optimisation of .html() on all elements of the same class.html() 在同一类的所有元素上的 Jquery 优化
【发布时间】：2011-07-30 19:12:35
【问题描述】：

我的 JQuery 脚本执行了大量 DOM 操作，在 Chrome 中运行顺畅（预期），在 Safari 中运行良好，在 Firefox 中运行良好。

让我们谈谈 Internet Explorer...

当我运行一个执行一些 DOM 操作的方法时，以下代码会导致页面在处理过程中变白约 1 秒。对速度影响很大的行评论：

function AutoAssignImage(sourceImageDiv, destinationHolder) {
    // Check nothing is assigned
    if (!$(destinationHolder).has('.upload-pane-item').length) {
        sourceImageDiv.find('.quickAssign').hide();
        sourceImageDiv.find('.unassign').show();
        sourceImageDiv.css({ border: "0px" });

        $(destinationHolder).html(sourceImageDiv); // Causes blank screen while moves dom element

        // Update Quick Assign buttons
        updateQuickAssignButtons();
    }
}

function updateQuickAssignButtons() {
    quickAssign = "string gets generated here but is very quick";

    $('#' + uploadPaneId + ' .quickAssignLinks').html(quickAssign); // Very slow

}

我需要更新用于多达 500 个元素的 HTML。我尝试过使用循环，认为它几乎会立即更新前几个元素，并且可以处理其他元素，而用户不会注意到轻微的延迟。当我尝试使用 .each() JQuery 循环时，它似乎没有任何不同，并且仍然会导致大约一秒钟的白屏。

编辑： 通常设置的 HTML 如下：

<a class="assignLink" href="#">1</a>
<a class="assignLink" href="#">2</a>
<a class="assignLink" href="#">3</a>
<a class="assignLink" href="#">4</a>
<a class="assignLink" href="#">5</a>
<a class="assignLink" href="#">6</a><br />
<a class="assignLink" href="#">7</a>
<a class="assignLink" href="#">8</a>
<a class="assignLink" href="#">9</a>
<a class="assignLink" href="#">10</a>
<a class="assignLink" href="#">11</a>
<a class="assignLink" href="#">12</a>

缓存

我尝试将元素存储在变量中以启用某种形式的缓存

var quickAssignElements; // top of js file
quickAssignElements = $('#' + uploadPaneId + ' .quickAssignLinks'); // called when DOM updates

$(quickAssignElements).html(quickAssign); // Calls this when it needs to update html on elements

这似乎也没有什么不同。

有谁知道最小化延迟/阻止窗口变为空白的替代方法？

【问题讨论】：

@Andi 该代码在选择器中有语法错误。
谢谢，我已经更新了。它只是在此代码 sn-p 上意外插入的，在我的实时代码中是正确的 :)
@Andi 一种解决方案是使用计时器。我建议您观看讨论您的问题的精彩演讲：vimeo.com/16241085
您是否只更新元素内的文本？还是您要向 DOM 添加更多节点？
你能给我一点资料吗，这将有助于我发布正确的答案。

标签： jquery optimization dom-manipulation

【解决方案1】：

您需要查看页面上哪个调用速度较慢。它可能是$('#MyDiv .myClass')，也可能是.html('...')，或两者兼而有之。如果它只是第一个，简单的解决方案是只选择一次这些元素，并将它们存储在一个变量中，您可以在下次需要调用 .html() 时访问它们。在 jQuery-talk 中，这通常称为 "caching."

还有很多方法可以让选择器本身更高效。

编辑

既然你向我们展示了你的标记是什么样的，我几乎可以保证这个选择器方法会更快：

$('#MyDiv').find('a.myClass');

【讨论】：

之前尝试缓存它并没有什么不同。在我的问题中添加了更多信息
那么慢的部分不是选择器吗？还是您只在该群组中调用.html() 一次？
这似乎是更新元素 html 而不是选择元素的关键。这组元素是动态的，因此当其中一个元素被分配给某物时，链接会发生变化并且给定的链接会被删除。
@Matt 这更快一点：$('a.myClass', '#MyDiv')（而且代码更小）
@Šime 我认为在内部，$('selector', 'context') 已转换为 $('context').find('selector')。