0

HTMLで表示する必要がある2000個のアイテムの配列があります-各アイテムはdivに配置されます。これで、各項目に 6 つのリンクが表示され、クリックしてさらにアクションを実行できるようになりました。単一のアイテムが現在どのように見えるかを次に示します。

<div class='b'>
  <div class='r'>
    <span id='l1' onclick='doSomething(itemId, linkId);'>1</span>
    <span id='l2' onclick='doSomething(itemId, linkId);'>2</span>
    <span id='l3' onclick='doSomething(itemId, linkId);'>3</span>
    <span id='l4' onclick='doSomething(itemId, linkId);'>4</span>
    <span id='l5' onclick='doSomething(itemId, linkId);'>5</span>
    <span id='l6' onclick='doSomething(itemId, linkId);'>6</span>
  </div>
  <div class='c'>
  some item text
  </div>
</div>

さて、問題はパフォーマンスです。ページのマスター div に項目を設定するために innerHTML を使用しています。私の「単一のアイテム」に含まれるhtmlが多いほど、DOMがそれを追加するのに時間がかかります。私は今、HTMLをできるだけ小さくしようとしています。それぞれに単一のスパンを使用することなく、スパンを異なる方法でレンダリングする方法はありますか? おそらくjQueryを使用していますか？

4

5 に答える 5

3

最初に行うべきことは、onclick イベントを jQuery またはその他のフレームワークを介して DIV にアタッチし、バブルダウンさせて、doSomething を使用してすべてのケースをカバーし、クリックした要素に応じてアイテム ID を抽出できるようにすることです。そしてリンクID。また、スパンには本当に ID が必要ですか? あなたのサンプルコードに基づいてわかりません。また、ページの読み込み時にリンクとアイテム ID を読み込む代わりに、必要に応じて AJAX 経由で取得することもできます。

ランチにサラダを食べながらの私の2セント、nickyt

vikasde の頭のてっぺんを更新します。これの構文は完全に正しいとは限りません。昼休み中です。

$(".b").bind( // the class of your div, use an ID , e.g. #someID if you have more than one element with class b
    "click",
    function(e) { // e is the event object
        // do something with $(e.target), like check if it's one of your links and then do something with it.
    }
);
于 2009-11-17T16:37:59.317 に答える
0

もう1つの問題は、ブラウザが適切に処理するにはページに多くのものがあることです。ページのデザインでこれが許可されているかどうかはわかりませんが、これらの2000行をDIV固定サイズのにoverflow: auto入れて、ユーザーがページにスクロール可能なウィンドウを表示できるようにするのはどうでしょうか。

これは私がユーザーとして好むものではありませんが、カーソルの奇妙さを修正する場合は、許容できる回避策になる可能性があります。

于 2009-11-18T14:33:17.583 に答える
0

John Resig は、 http: //ejohn.org/blog/dom-documentfragments/ にブログを書きました。documentDragments

私の提案は、documentDragmentfor each 行を作成し、作成時にそれを DOM に追加することです。timeoutブラウザからぶら下がっているものがある場合は、それぞれをラッピングするappendChildと役立つ場合があります

function addRow(row) {
    var fragment = document.createDocumentFragment();

    var div = document.createElement('div');
    div.addAttribute('class', 'b');

    fragment.appendChild(div);
    div.innerHtml = "<div>what ever you want in each row</div>";

    // setting a timeout of zero will allow the browser to intersperse the action of attaching to the dom with other things so that the delay isn't so noticable
    window.setTimeout(function() { 
        document.body.appendChild(div);
    }, 0);
};

それが役立つことを願っています

于 2009-11-17T18:12:34.747 に答える
0

さらに別のソリューション

...「ページの内容が多すぎる」問題に:

（これらの提案にうんざりしているときは、私に知らせてください！）

埋め込みオブジェクトを使用するオプションがある場合は、Java アプレット (私の個人的な好みですが、ほとんどの人は触れません)、JavaFX、Flash、Silverlight、または...

こうすれば、ブラウザ ページに埋め込まれて、その技術でファンキーなデータをすべて表示できます。ページのコンテンツはブラウザの仕事ではないため、あなたを詰まらせることはありません.

Java などの読み込み時間は別として、これは透過的でユーザーには見えない可能性があります。つまり、これを行うことは (ほぼ) 可能で、テキストが HTML に直接表示されているかのようにページに表示されます。

于 2009-11-18T15:55:22.160 に答える
0

ノードのプロパティを設定するInnerHtmlと、DOM は HTML テキストを解釈してノードに変換する必要があります。基本的に、ここでは言語インタープリターを実行しています。より多くのテキスト、より多くの処理時間。実際の DOM 要素ノードを作成し、すべての必要なコンテンツのネストを作成し、それらを含むノードにフックする方が高速であると思います (確信はありません)。あなたの「InnerHTML」ソリューションは、同じことをカバーの下で行っていますが、テキストを理解するための追加の作業も行っています。

また、JS を介してクライアントではなく、サーバー上ですべてのコンテンツを構築する方が経済的かもしれないという他の誰かの提案を支持します。

最後に、s のコンテンツの多くを削除できると思いますspan。ID は必要ありません。 の引数も必要ありませんonclick()。どのノードから呼び出されたかを判断する JS 関数を呼び出し、1 つ上のノードに移動して含まれているノードを見つけ、divおそらく含まれているノードをループ ダウンするか、テキストを見て、div応答する必要がある 内のどの項目を判断します。onclick ハンドラーに多くの作業を実行させることができます。この作業は、マウスのクリック時に 1 回だけ実行され、2000 倍になることはありません。認識できるほどのユーザー時間はかかりません。

于 2009-11-17T17:06:21.183 に答える