1

多くの要素 (>1000) を持つドロップダウン リストがあります。これらの要素の 1 つを選択すると、ドロップダウンを再構築する必要があります。これは、1 つの要素を選択すると他の要素が消える可能性があるためです。これをコードビハインド (asp.net) で解決します。通常、ドロップダウンの表示と非表示は数ミリ秒で行われます。

しかし、要素を選択すると、div を再構築する必要があり、その div にはクライアントに送信する必要がある約 300KB のデータが含まれているため、最大 20 秒かかります。DIV は次のようになります。

    <div id="ctl00_PlaceHolderMain_ctlProductSelector_SubstancesList" class="substancesListWrapper">
<ul>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','3268');">(2-Propyloxy)ethyl acetate</a></li>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','2415');">[(2-Propenyloxy)methyl] oxirane</a></li>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','2837');">1-(2-Pyridyl) piperazine</a></li>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','2239');">1,1,1,2-Tetrachloro-2,2-difluoroethane</a></li>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','2880');">1,1,1,2-Tetrafluoroethane</a></li>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','2110');">1,1,1-Trichloroethane</a></li>
(etc.)

今、その div-String を圧縮し、クライアント側で jQuery などで圧縮解除してトラフィックを削減する方法があるかどうか疑問に思います。それは機能しますか? はいの場合: 通常、何パーセントのバイトが安全ですか?

これはすべてSharePointサイトで発生します（うまくいけば違いはありません）

4

2 に答える 2

5

あなたはいくつかのことを改善するかもしれません。1 つは、すべての JavaScript リンクを 1 つに移動することです。これにより、1 行あたり 85 文字を節約できます。

<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','3268');">(2-Propyloxy)ethyl acetate</a></li>
<li class='elementSingle'><a href="JavaScript:__doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances','2415');">[(2-Propenyloxy)methyl] oxirane</a></li>

こうなるかも

<li class='elementSingle'><a href='#3268'>(2-Propyloxy)ethyl acetate</a></li>
<li class='elementSingle'><a href='#2415'>[(2-Propenyloxy)methyl] oxirane</a></li>
...

そして、1 つの jquery クリック ハンドラー:

jQuery("li.elementSingle a").click(function(){
  __doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances', this.href.replace('#',''));
});

別のポイントは、class='elementSingle' を削除し、css/js の ul に ID を追加することです。これにより、1 行あたり 22 文字を節約できます。

于 2012-06-15T12:17:12.610 に答える
2

すでに jQuery を使用している場合は、アンカーを完全に削除して、リスト項目要素に id 属性を指定してください。

IDを読み取るjQueryセレクターを使用します。

HTMLはこのようなものになります...

<div id="ctl00_PlaceHolderMain_ctlProductSelector_SubstancesList" class="substancesListWrapper">
<ul>
  <li class='elementSingle' id="ct100-3268">(2-Propyloxy)ethyl acetate</li>
  <li class='elementSingle' id="ct100-2415">[(2-Propenyloxy)methyl] oxirane</li>
  etc...

jQueryは次のようなものになる可能性があります...

$(function() {
  $('#ctl00_PlaceHolderMain_ctlProductSelector_SubstancesList .elementSingle')
  .click(function() {
    var number = $(this).attr('id').match(/-(\d+)$/)[1];
    __doPostBack('ctl00_PlaceHolderMain_ctlProductSelector_pnlSubstances', number);
  });
});

（免責事項。上記はテストされていませんが、適切な兆候を示すはずです。テスト済みの例が必要な場合は、最初にjsfiddleの例を投稿してください）。

または、AJAX を使用して、ページの残りの部分を読み込んだ後にリストを読み込むことを検討してください。

于 2012-06-15T12:16:22.523 に答える