在我进行AJAX调用之后,我需要遍历结果,克隆模板(它是我用作元素的模板的div),使用类选择器设置其标签然后将新元素附加到DOM。现在我在循环之后将它们全部附加在一起以避免回流。
需要指出的一件重要事情是,当我迭代从AJAX调用中收到的数据时,我附加元素的div是隐藏的并且是空的。
渲染1,500个元素需要大约3秒钟,而且它只是文本。
这是我的代码(不包括AJAX调用,只是成功的一部分):
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();