jquery性能-页面在清除.html内容方面滞后

Question

我有一个搜索表单，它执行ajax帖子来搜索数据库中的用户。搜索可能会产生数千个结果，这些结果会输出到一个占位符中：

resultHtml = "<table class='table table-striped'>" +
    "<tr>" +
    "<th style='width: 40%;'>Customer Name</th>" +
    "<th style='width: 40%;'>Office</th>" +
    "<th style='width: 15%;'></th>" +
    "</tr>";
$.each(data.searchResults, function(index, item) {
    resultHtml += "   <tr id='row_" + item.Id + "'>";
    resultHtml += "       <td style="width: 40%;">" + item.FullName + "</td>";
    resultHtml += "       <td style="width: 40%;">" + item.CompanyName + "</td>";
    resultHtml += "       <td style="width: 15%; padding-right: 10px; text-align: right;">";
    resultHtml += "           <button type="button" class="btn-link custUse" name="custUse" id="custUse">Use</button>";
    resultHtml += "           <input type="hidden" name="sr_custId" id="sr_custId" value="" + item.Id + "">";
    resultHtml += "           <input type="hidden" name="sr_custFirstName" id="sr_custFirstName" value="" + item.FirstName + "">";
    resultHtml += "           <input type="hidden" name="sr_custLastName" id="sr_custLastName" value="" + item.LastName + "">";
    resultHtml += "           <input type="hidden" name="sr_custCompanyId" id="sr_custCompanyId" value="" + item.CompanyId + "">";
    resultHtml += "           <input type="hidden" name="sr_custCompanyName" id="sr_custCompanyName" value="" + item.CompanyName + "">";
    resultHtml += "           <input type="hidden" name="sr_custCompanyAddress" id="sr_custCompanyAddress" value="" + item.CompanyAddress + "">";
    resultHtml += "           <input type="hidden" name="sr_custCompanyCity" id="sr_custCompanyCity" value="" + item.CompanyCity + "">";
    resultHtml += "           <input type="hidden" name="sr_custCompanyState" id="sr_custCompanyState" value="" + item.CompanyState + "">";
    resultHtml += "           <input type="hidden" name="sr_custCompanyZip" id="sr_custCompanyZip" value="" + item.CompanyZip + "">";
    resultHtml += "           <input type="hidden" name="sr_custEmail" id="sr_custEmail" value="" + item.Email + "">";
    resultHtml += "           <input type="hidden" name="sr_custPhone" id="sr_custPhone" value="" + item.Phone + "">";
    resultHtml += "       </td>";
    resultHtml += "   </tr>";
});
resultHtml += "</table>";
hideLoading();
$("#customerResults").html(resultHtml);

这执行得很好，正如我所期望的。然而，如果用户点击"重置搜索"按钮，我会在页面上获得很大的滞后，因为它会清除搜索结果：

$('#customerResults').html('');

这一行本身可以半锁定页面（在它完成之前，你不能点击任何东西）。

我很好奇是否有更快、更好的方法来快速清除这些搜索结果？

Answer 1

使用.empty（）

为了获得更好的性能，请使用

$('#customerResults').empty();

其他信息

• jQuery文档
• jsPerf测试