Question

我有一个数据库webmethod，我通过Jquery ajax调用。这将从服务器返回一组数据对象。对于每个数据对象，我想填充一个可能有几十个字段的表单。

生成和填充这些表单的最有效方法是什么。

现在，我在每个记录的javascript代码中创建一个html字符串，然后将其添加到页面中。然后我向新元素添加一些事件。

这在firefox中运行正常，对于6个元素的数组总计约700毫秒，对于30个元素的数组则为4500毫秒。但是，这是我公司的内部应用程序，客户端只能在他们的计算机上使用IE8。在IE8中，这需要2-10秒！ for和数组的长度为6和47秒，有一次它实际上能够完成一个长度为30的数组。不确定@＃$％IE8正在做什么，但无论如何......我需要更高效的东西。 ..

谢谢！

更多信息：

编辑：我做的第一件事就是：

$("#approvalContainer").empty();

网络方法签名：

[WebMethod]
    public List<User> ContractorApprovals()

所以我调用该方法，然后使用数据执行此操作：

for (var i = 0; i < data.length; i++) {
            displayUserResult("#approvalContainer", data[i], false);
        }
        formEvents("#approvalContainer");
        $("#approvalContainer").show("slow");

displayUserResult看起来像这样：

var div = "<div style=\"width:695px\" class=..........."
fillForm(div,data)
$("#approvalContainer").append(div)

formEvents可以添加点击事件，创建样式按钮和添加水印。

fillForm会做这样的事情：

$(userForm).find(".form-web-userName").text(userObject._web._userName);

其中userForm是在displayUserResult函数中创建的div，而userObject是ajax调用返回的数组中的一个对象。

如果您需要更多信息，请与我们联系。

Answer 1

你正在做太多的DOM操作。 .append和.find以及.text都会让它变慢。

最有效的方法是构建整个HTML字符串并附加一次。我不打算使用displayUserResult函数，只需修改处理数据的函数：

var div = "<div style=\"width:695px\" class=...........",
    html = "";
for (var i = 0; i < data.length; i++) {
     // Keep adding on to the same html string
     html += div + data[i]._web._userName + "</div>";
}
// After the loop, replace the entire HTML contents of the container in one go:
$("#approvalContainer").html(html);

但是，虽然速度很快，但请注意，仅当_userName不包含特殊字符或已经转义为HTML时才适用。

使用基于服务器数据的Jquery创建表单的最有效方法

1 个答案: