0

グラフィックベースのアプリをhtml5、js、css3で書いています。この時点で、ユーザー入力を受け取り、グラフィックベースの結果を生成するために使用する予定の数値の配列を作成します。

既存のページに結果を表示する最も効率的な方法は何ですか？これは少し曖昧に聞こえるかもしれませんが、質問の言い回しがよくわかりません。答えを探すときに明らかに役に立たない。

これが私がこれまでに検討したオプションです。

  1. id = "here"を高レベルのタグに配置し、結果を生成するときにjsを使用してコンテンツ全体を書き換えます。
  2. 私のhtmlを非常に骨の折れるものにし、両方のディスプレイのすべてのhtml構造をjs関数に入れて、あるディスプレイから次のディスプレイに移動できるようにします。
  3. iframeタグを使用し、基本的に同じことを行い、ディスプレイごとに個別のhtmlファイルを使用します

また ？？？？

これには簡単でエレガントな答えがあると思います。それの良い検索用語でさえ、素晴らしいでしょう。

乾杯

4

1 に答える 1

0

質問に対する私の理解から、ユーザーに表示される動的な数の要素を構築し、パフォーマンスを維持する方法でそれを行いたいと考えています。

ベアボーンhtmlを使用し、javascript関数を使用して動的ディスプレイを動的に構築することをお勧めします.

動的に構築している要素のコンテナーの表示が none に設定されていることを確認することで、パフォーマンスを大幅に改善できます。これにより、要素を挿入するたびにブラウザーが要素を再描画するのを防ぐことができます。

編集：

コメントの意味は、次のdisplay:noneようにディスプレイを構築している場合です。

HTML:

<p>Your results:</p>
<div id="divResults">
</div>

Javascript (jQuery を想定):

var divResults = $('#divResults');
function BuildResults(arr) {
   divResults.children().remove();
   var i = arr.length;
   while (i--) {
      var spnResult = $('<span class="result">');
      divResults.append(spnResult);
   }
}

ブラウザーを呼び出すたびdivResults.append(spnResult);に、ページ上の要素が再描画されるため、規模が大きくなるとパフォーマンスが低下する可能性があります。これに対する解決策は、divResults要素を空にする/追加する前に非表示にし、最終的に結果が再構築された後に表示することです。

ただし、JavaScript で大きな要素を作成し、それを一度ページに追加するアプローチを採用する場合は、結果構造を追加する前後にコンテナーを非表示/表示することを心配する必要はありません。

于 2012-12-01T11:06:06.800 に答える