私のWebアプリケーションでDOM

Question

に大量の要素を追加すると、膨大な量のデータを取得し、データ（約800行、10列のテーブル）を作成する必要があります
いつ、 append()メソッドを通じて、ブラウザはしばらく応答しません。

巨大なデータにアクセスするために、私はajax呼び出しのためにWebワーカーを使用しています。
ウェブワーカーからDOMを操作することはできません。どうすればいいですか？
感謝:)

編集：
私はそれ以上の非表示のようないくつかの関数（）（jQueryの非表示）をしたい場合は、作業をinnerHTMLのでしょう？

Answer 1

いくつかのJavaScriptテンプレートエンジンを使用して、手動で要素を追加したり、innerHTML文字列を作成したりすることを避けることができます。

たとえば、http://ejohn.org/blog/javascript-micro-templating。

<script type="text/html" id="user_rows_tpl"> 
    <% for(var y = 0, l = users.length; l > y; y++) { %> 
     <tr id="user-row-<%=y%>"> 
      <td><%=users[y].name%></td> 
      <td><%=users[y].surname%></td> 
      <td><%=users[y].age%></td>  
     </tr> 
    <% } %> 
</script>​ 

そしてあなたがオブジェクトをレンダリングするためにあなたのはJavaScriptでこのテンプレートを使用している：テスト用

<script type="text/javascript"> 
    var table = document.getElementById("userTable"); 
    table.innerHTML = tmpl("user_rows_tpl", { 
     users: getUsers() 
    }); 
</script> 

を

は、あなたがどこかHTMLでテンプレートを持っていると言います私は1000のユーザーオブジェクトを作成し、それらをテーブルにレンダリングしました。
平均レンダリング時間は、Google Chromeでは約20〜25msです。それは悪くないのですか？

DEMO

Answer 2

注：JavaScriptでDOM要素にアクセスするのが遅いため、応答性の高いページが表示されます。

あなたは

var buffer = []; 
setInterval(function(){ $("#div").html(buffer.join(""); buffer = []; }, 1000); 

buffer.push("html"); 
buffer.push("html"); 

ことによってこれを行うとBest Practices for Speeding Up Your Web Site

Answer 3

あなたはDOM要素の怠惰な挿入をサポートしているテーブルのプラグインを使用する場合があります

（このlink for the performance

も、このリンクをチェックチェックすることができますすなわちオンデマンドで）。 DataTablesは、豊富な機能、including this oneを提供します。また、書かなければならないコードのサイズを減らすのに役立ちます。