7

私の Web アプリケーションでは、膨大な量のデータを取得し、データを含むテーブル (約 800 行、10 列のテーブル) を作成する必要があります。メソッドを使用
して直接要素を追加するappend()と、ブラウザがしばらく応答しません。

巨大なデータにアクセスするために、私は ajax 呼び出しに Web ワーカーを使用しています。
Web ワーカーから DOM を操作することはできません。どうすればよいですか??
ありがとう ：）

edit :
hide() (jQuery hide) のような関数が必要な場合、innerHtml は動作しますか??

4

3 に答える 3

1

一部のJavaScriptテンプレートエンジンを使用すると、要素を段階的に手動で追加したり、innerHTML文字列を作成したりする必要がなくなります。

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

HTMLのどこかにテンプレートがあるとします。

<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>

テストのために、1000個のユーザーオブジェクトを作成し、それらをテーブルにレンダリングしました。
Google Chromeでの平均レンダリング時間は約20〜25ミリ秒です。悪くないですね。

デモ

于 2012-09-15T16:08:58.713 に答える
1

DOM要素の遅延挿入をサポートするテーブルプラグインを使用することをお勧めします（つまり、オンデマンド）。DataTablesは、これを含む豊富な機能を提供します。また、作成する必要のあるコードのサイズを削減するのにも役立ちます。

于 2012-09-15T15:52:16.493 に答える
1

注: JavaScript を使用した DOM 要素へのアクセスは遅いため、ページの応答性を高める必要があります。

あなたはこれを行うことができます

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

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

パフォーマンスについては、このリンクを確認してください

このリンクも確認してくださいWebサイトを高速化するためのベストプラクティス

于 2012-09-15T15:50:22.660 に答える