2

我的 JQuery 脚本进行了大量的 DOM 操作，在 Chrome 中运行顺畅（预期），在 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

这似乎也没有什么不同。

有谁知道减少延迟/停止窗口变黑的替代方法？

4

1 回答 1

1

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

您也可以通过多种方式使选择器本身更高效。

编辑

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

$('#MyDiv').find('a.myClass');
于 2011-04-06T12:46:39.900 回答