サーバーデータに基づいてJqueryでフォームを作成する最も効率的な方法

Question

私はJquery ajaxを使用して呼び出すデータベースWebメソッドがあります。これはサーバーからデータオブジェクトの配列を返します。それぞれのデータオブジェクトに対して、私は多分数十のフィールドを使ってフォームに値を設定したい。

これらのフォームを生成して入力する最も効率的な方法は何ですか。

今、各レコードのJavaScriptコードにhtmlの文字列を作成し、それをページに追加します。次に、新しい要素にいくつかのイベントを追加します。

これは、6要素の配列の合計で約700ミリ秒、30要素の配列の4500ミリ秒で、firefoxで問題なく動作します。しかし、これは私の会社のための内部アプリであり、クライアントは自分のマシンでIE8しか使用できません。 IE8では、これは2-10秒かかる！長さ6と47秒の配列と長さ30の配列のために実際に完了することができた1回。@＃$％IE8がやっていることは確かではありませんが...とにかく...もっと効率的なものが必要です。 ..

ありがとう！

MORE INFO：

編集：私は最初のものは次のとおりです。

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

Webメソッドのシグネチャ：

[WebMethod] 
    public List<User> ContractorApprovals() 

は、だから私はメソッドを呼び出した後、データでこれを実行します。

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

d

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

formEventsのようなものは、クリックイベントを追加したスタイルのボタンを作成し、ウォーターマークを追加しない：isplayUserResultはこのようになります。

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

ユーザーフォームがdisplayUserResult機能で作成したdiv要素であり、ユーザオブジェクトは、AJAX呼び出しによって返される配列内のオブジェクトのいずれかです。

fillFormはこのようなものを行います。

詳細情報が必要な場合はお知らせください。

Answer 1

DOM操作が多すぎます。ループ内にある.appendと.findと.textはすべて遅くなります。

最も効率的な方法は、HTML文字列全体を作成し、を一度に追加することです。これは高速ですが、しかし

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に特殊文字が含まれていない場合にのみ適切であることに注意してください：私はdisplayUserResult機能を気にし、単にデータを扱うあなたの機能を変更するつもりはありません既にHTMLでエスケープされています。