Javascript 在循环中追加多个元素时的jQuery性能

在进行AJAX调用之后，我需要迭代结果，克隆一个模板（它是我用作元素模板的div），使用类选择器设置其标签，然后将新元素附加到DOM中。现在我在循环后将它们全部附加在一起，以避免回流

需要指出的一点是，当我迭代从AJAX调用接收到的数据时，我在其中添加元素的div是隐藏的和空的

渲染1500个元素大约需要3秒钟，而这只是文本

这是我的代码（不包括AJAX调用，只是其中的成功部分）：

---

如果可能的话，尝试更具体的目标定位，例如，不要使用

$（“.FollowUpUser”）

使用

$（“#myDiv.FollowUpUser”）

您已经只修改了dom一次，因此您可以做的唯一一件事是将jquery从中删除，而不是使用纯文本模板（或一些模板库）事实上

.append（itemControls）

可能会一个接一个地追加它们（很可能是），如果浏览器没有优化渲染，这也可能会导致性能下降。此外。。。1500个元素。。。有多少结果？您真的需要一次显示那么多结果吗？我没有使用$（“.FollowUpUser”），我使用$（“.FollowUpUser”，itemControl），它只为itemControl元素选择了具有FollowUpUser类的元素。我读过关于.append（array）的文章，它应该在引擎盖下使用一个文档片段。我工作的页面没有分页功能，这是业务需求。

var resultsControl = $("#divFollowUpResults");
var template = $("#FollowUpTemplate");
var itemControls = [];

$.each(data, function (i, value) {
  var itemControl = template.clone();
  itemControl.removeAttr("id").show();
  $(".FollowUpDateCreated", itemControl).text(value.DateCreated);
  $(".FollowUpUser", itemControl).text(value.User);
  $(".FollowUpDateOfferId", itemControl).text(value.OfferId);
  $(".lnkOfferId", itemControl).attr("href", $(".lnkOfferId", itemControl).attr("href") + "/" + value.OfferId);
  $(".FollowUpCar", itemControl).html(value.OfferVehicle);
  $(".FollowUpOfferAmountAndType", itemControl).text(value.OfferAmountAndType);
  $(".FollowUpOfferStatus", itemControl).text(value.OfferStatus);
  $(".FollowUpOfferStatusDate", itemControl).text(value.OfferStatusDate);
  $(".FollowUpOfferPostState", itemControl).text(value.OfferPostState);
  $(".FollowUpOfferVIN", itemControl).text(value.OfferVIN);
  $(".FollowUpType", itemControl).text(value.Type);
  $(".FollowUpReason", itemControl).text(value.Reason);
  $(".FollowUpStatus", itemControl).text(value.StatusName);
  $(".FollowUpDate", itemControl).text(value.Date);
  $(".FollowUpPM", itemControl).text(value.Owner);
  $(".OfferSellerName", itemControl).text(value.OfferSellerName);
  $(".OfferSellerAddress", itemControl).text(value.OfferSellerAddress);
  itemControl.attr("data-follow-up-item-id", value.Id);
  itemControl.attr("data-follow-up-item-date", value.DateYYYYMMDDHHmm);
  itemControl.attr("data-follow-up-item-owner", value.Owner);
  itemControl.attr("data-follow-up-item-status", value.StatusName);
  itemControl.attr("data-follow-up-item-status-id", value.StatusId);
  itemControls.push(itemControl);
});

resultsControl.append(itemControls);
resultsControl.show();
$("#divFollowUpSearching").hide();