Question

我的JQuery脚本可以在Chrome中运行很多DOM操作（预期），在Safari中运行得非常好，在Firefox中也不是很好。

让我们谈谈互联网浏览器......

当我运行一个执行一些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中，这通常称为"caching."

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

修改

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

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

在同一个类的所有元素上对.html（）进行Jquery优化

1 个答案:

修改