0

以下を必要とする webapp を開発しています。

  1. 複雑な関数に基づいて ($.ajax を使用して) html で大量のテキスト (約 30 ～ 100 印刷ページ) を動的にロードするページ
  2. このテキストのすべてを事前に読み込みます。一度に少しずつロードすることはできません。
  3. 一度に少量のテキストのみを表示します。

すべてのhtmlをdiv要素（ライブラリ）にロードすることでこれを行うことができました。これは隠しておきます。jquery を使用して、目に見える div (コンテンツ) で一度に少しずつ表示します。

<div id="content">
    <ul index="1">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
    ...
    <ul index="4">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>
<div id="library" style="display:none">
    <ul index="1">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
    ...
    <ul index="450">
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

私の問題は、このテキストをこの div に保持すると、Web ページの初期読み込みと操作が遅くなることです (アニメーションなどがあります)。HTML のロードはかなり高速であると判断できましたが、処理 (レンダリング?) に多くの時間を費やしています。

この単純なテキスト ライブラリが大量のメモリを消費しないようにするにはどうすればよいでしょうか。非表示にする以外に、ブラウザがライブラリ div をレンダリングしないようにする方法はありますか? jquery を使用してその html 要素にアクセスできるこのコンテンツ (たとえば、javascript 変数) を保持するためのより良い場所はありますか?

4

1 に答える 1

0

ドキュメント内の HTML としてではなく、JavaScript 変数で非表示のコンテンツを出力できます。

<ul index="450"> ...lots of HTML... </ul>

あなたはこれを持っています：

<script>pages[450] = "...lots of HTML...";</script>

次に、ページを表示するには、次のように言います。

$('#content').html(pages[N]);

そうすれば、各ページの HTML を DOM に解析するコストは、ロード時ではなく、実際にそのページを表示するときにのみ発生します。

JavaScript 文字列に保存している HTML をエスケープするように注意してください。引用符、バックスラッシュ、改行、</script>思い浮かびます。

于 2013-08-17T06:24:02.417 に答える