javascript - jquery 性能 - 清除 .html 内容时页面滞后

Question

我有一个搜索表单，它通过 ajax post 来搜索数据库中的用户。搜索可能会产生数千个结果，这些结果将输出到占位符中:

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 documentation
• jsPerf test