Jquery 对同一类的所有元素上的 .html() 进行优化

Question

我的 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

这似乎也没有什么区别。

有谁知道有一种替代方法可以最大限度地减少延迟/阻止窗口变为空白？

Answer 1

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

有多种方法可以使选择器本身更加高效， 也。

• 提高 jQuery 选择器性能的好方法？
• Javascript (jQuery) 性能测量和最佳实践（不是加载时间）
• jquery选择器性能
• jQuery 选择器性能
• 和更多

---

编辑

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

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