jquery - ajax jqueryUI大きなテーブルIE8 Internet Explorerが遅い

Question

私は今これに困惑しており、助けが必要です。AJAX (約 250 行、15 列) を介して大きな html テーブルをプルしています。各行の 7 列には、セルの div 内に隠され、セルがホバーされたときにホバーで表示されるサブテーブルが含まれています (さらに表示するデータ)

最近のすべてのブラウザー (IE9、FF、Chrome) ですべて正常に動作します。列などを動的にソートできるようにするために、datatables jquery プラグインの追加を開始しましたが、これもうまくいきました。

その後、このアプリのユーザーが仮想化された OS を介して IE8 を使用することに気付き、テストを開始しました。すぐに、開発用ラップトップの virtualbox で IE8 の下でテストするときに問題に気付きました。

最初に ajax リクエストが送信されたときに、ブラウザは返されたデータを収集し、かなり高速に画面にレンダリングします。その後、同じデータでフォームを再送信しようとすると、ブラウザーがしばらくハングし、「このスクリプトは処理に時間がかかりすぎています... しますか...」というメッセージが表示されます。

そこで、速度低下の原因を探るために、ページの整理を始めました。IE が 2 回目のテーブルで窒息し、エラー メッセージが表示されるようですが、なぜ!?!?

IE レンダリング用のテーブルの最適化に関する MSN のアドバイスに従い、このテーブルとサブテーブルに固定幅を追加しまし<colgroups>た。これによる影響は最小限です。

スクリプトで JQuery UI の呼び出しを削除すると、エラーがなくなり、virtualbox の下の IE8 が各 ajax 応答を問題なくレンダリングすることにすぐに気付きました。

では、JQueryUI を含めると ajax テーブルの読み込みが非常に遅くなり、ブラウザーが混乱する理由について、誰かがアドバイスを提供できますか。

ところで-jqueryUIが存在する唯一の理由は、検索フォームでJQueryUI datepickerを使用しているためです。私の知る限り、JQueryUI は IE のレンダリング プロセスに干渉するべきではありませんが、干渉しているようです!

以下の ajax リクエストのコード サンプルを見つけます。

サーバーが応答を返した後に「検索がクリックされた」場合、「データ」にはテーブルを含む長い文字列が含まれます。

$.get("<?= config_item('base_url') ?>"+linky, $("#quote").serialize(),
   function(data) 
   {
    //$("#quoteresults").show();
    $("#ajaxloading").hide();
    //$("#ajaxloadingscr").hide();
    //alert(data);
    $('#dvResult').html(data);
   });

ここにいくつかのサンプルデータがあります。これは私のテーブルの1行です...

<tr>
  <td><a target="_blank" href="\Anantara Bo Phut"><img src="/assets/images/contractlink.png"></a> <span class="result_HotelName">Anantara Bophut Resort and Spa</span></td>
  <td><a target="_blank" onClick="fnLoadRoomData('5173')" class="result_RoomName">Anantara Suite</a></td>
  <td nowrap="nowrap">2</td>
  <td>BB</td>
  <td nowrap="nowrap" align="right" class="result_PricePound">£0.00</td>
  <td nowrap="nowrap" align="right"><div class="containerprice">
      <div class="pricedate"><span class="result_Price">THB 0.00</span></div>
      <div class="pricext">
        <table class="subtable" style="table-layout:fixed;" width="600" border="0">
          <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
          </colgroup>
          <tbody>
            <tr>
              <td colspan="3">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-08#</td>
            </tr>
            <tr>
              <td>STD Total</td>
            </tr>
            <tr>
              <td>0</td>
            </tr>
            <tr>
              <td colspan="3"><table style="table-layout:fixed;" border="0">
                  <tbody>
                    <tr>
                      <td nowrap="nowrap">Age 35 (1)</td>
                      <td nowrap="nowrap">Age 35 (2)</td>
                    </tr>
                    <tr>
                      <td nowrap="nowrap">0</td>
                      <td nowrap="nowrap">0</td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div></td>
  <td nowrap="nowrap"><div class="containerprice">
      <div class="pricedate"><a href="" class="price_normal">0</a></div>
      <div class="pricext">
        <table class="subtable" width="600" border="0">
          <tbody>
            <tr>
              <td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-02#</td>
            </tr>
            <tr>
              <td>Total</td>
              <td>STD Rate</td>
              <td>STD Supps</td>
              <td>SNG</td>
              <td>Extra</td>
            </tr>
            <tr>
              <td><a href="" class="price_normal">0</a></td>
              <td></td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="5"><table width="100%" border="0">
                  <tbody>
                    <tr>
                      <td nowrap="nowrap">Age 35 (1)</td>
                      <td nowrap="nowrap">Age 35 (1) Supps</td>
                      <td nowrap="nowrap">Age 35 (2)</td>
                      <td nowrap="nowrap">Age 35 (2) Supps</td>
                    </tr>
                    <tr>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
            <tr>
              <td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
            </tr>
            <tr>
              <td>StdOcc: 2</td>
              <td>AdultBasis: PR</td>
              <td>AdultAgeFrom: 12</td>
              <td colspan="2">RoomBoardCode: BB</td>
            </tr>
            <tr>
              <td></td>
              <td>RoomID: 5173</td>
              <td>ContractID: 511</td>
              <td colspan="2">Total: <span class="grandtotal">0</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div></td>
  <td nowrap="nowrap"><div class="containerprice">
      <div class="pricedate"><a href="" class="price_normal">0</a></div>
      <div class="pricext">
        <table class="subtable" width="600" border="0">
          <tbody>
            <tr>
              <td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-03#</td>
            </tr>
            <tr>
              <td>Total</td>
              <td>STD Rate</td>
              <td>STD Supps</td>
              <td>SNG</td>
              <td>Extra</td>
            </tr>
            <tr>
              <td><a href="" class="price_normal">0</a></td>
              <td></td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="5"><table width="100%" border="0">
                  <tbody>
                    <tr>
                      <td nowrap="nowrap">Age 35 (1)</td>
                      <td nowrap="nowrap">Age 35 (1) Supps</td>
                      <td nowrap="nowrap">Age 35 (2)</td>
                      <td nowrap="nowrap">Age 35 (2) Supps</td>
                    </tr>
                    <tr>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
            <tr>
              <td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
            </tr>
            <tr>
              <td>StdOcc: 2</td>
              <td>AdultBasis: PR</td>
              <td>AdultAgeFrom: 12</td>
              <td colspan="2">RoomBoardCode: BB</td>
            </tr>
            <tr>
              <td></td>
              <td>RoomID: 5173</td>
              <td>ContractID: 511</td>
              <td colspan="2">Total: <span class="grandtotal">0</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div></td>
  <td nowrap="nowrap"><div class="containerprice">
      <div class="pricedate"><a href="" class="price_normal">0</a></div>
      <div class="pricext">
        <table class="subtable" width="600" border="0">
          <tbody>
            <tr>
              <td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-04#</td>
            </tr>
            <tr>
              <td>Total</td>
              <td>STD Rate</td>
              <td>STD Supps</td>
              <td>SNG</td>
              <td>Extra</td>
            </tr>
            <tr>
              <td><a href="" class="price_normal">0</a></td>
              <td></td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="5"><table width="100%" border="0">
                  <tbody>
                    <tr>
                      <td nowrap="nowrap">Age 35 (1)</td>
                      <td nowrap="nowrap">Age 35 (1) Supps</td>
                      <td nowrap="nowrap">Age 35 (2)</td>
                      <td nowrap="nowrap">Age 35 (2) Supps</td>
                    </tr>
                    <tr>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
            <tr>
              <td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
            </tr>
            <tr>
              <td>StdOcc: 2</td>
              <td>AdultBasis: PR</td>
              <td>AdultAgeFrom: 12</td>
              <td colspan="2">RoomBoardCode: BB</td>
            </tr>
            <tr>
              <td></td>
              <td>RoomID: 5173</td>
              <td>ContractID: 511</td>
              <td colspan="2">Total: <span class="grandtotal">0</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div></td>
  <td nowrap="nowrap"><div class="containerprice">
      <div class="pricedate"><a href="" class="price_normal">0</a></div>
      <div class="pricext">
        <table class="subtable" width="600" border="0">
          <tbody>
            <tr>
              <td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-05#</td>
            </tr>
            <tr>
              <td>Total</td>
              <td>STD Rate</td>
              <td>STD Supps</td>
              <td>SNG</td>
              <td>Extra</td>
            </tr>
            <tr>
              <td><a href="" class="price_normal">0</a></td>
              <td></td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="5"><table width="100%" border="0">
                  <tbody>
                    <tr>
                      <td nowrap="nowrap">Age 35 (1)</td>
                      <td nowrap="nowrap">Age 35 (1) Supps</td>
                      <td nowrap="nowrap">Age 35 (2)</td>
                      <td nowrap="nowrap">Age 35 (2) Supps</td>
                    </tr>
                    <tr>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
            <tr>
              <td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
            </tr>
            <tr>
              <td>StdOcc: 2</td>
              <td>AdultBasis: PR</td>
              <td>AdultAgeFrom: 12</td>
              <td colspan="2">RoomBoardCode: BB</td>
            </tr>
            <tr>
              <td></td>
              <td>RoomID: 5173</td>
              <td>ContractID: 511</td>
              <td colspan="2">Total: <span class="grandtotal">0</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div></td>
  <td nowrap="nowrap"><div class="containerprice">
      <div class="pricedate"><a href="" class="price_normal">0</a></div>
      <div class="pricext">
        <table class="subtable" width="600" border="0">
          <tbody>
            <tr>
              <td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-06#</td>
            </tr>
            <tr>
              <td>Total</td>
              <td>STD Rate</td>
              <td>STD Supps</td>
              <td>SNG</td>
              <td>Extra</td>
            </tr>
            <tr>
              <td><a href="" class="price_normal">0</a></td>
              <td></td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="5"><table width="100%" border="0">
                  <tbody>
                    <tr>
                      <td nowrap="nowrap">Age 35 (1)</td>
                      <td nowrap="nowrap">Age 35 (1) Supps</td>
                      <td nowrap="nowrap">Age 35 (2)</td>
                      <td nowrap="nowrap">Age 35 (2) Supps</td>
                    </tr>
                    <tr>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
            <tr>
              <td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
            </tr>
            <tr>
              <td>StdOcc: 2</td>
              <td>AdultBasis: PR</td>
              <td>AdultAgeFrom: 12</td>
              <td colspan="2">RoomBoardCode: BB</td>
            </tr>
            <tr>
              <td></td>
              <td>RoomID: 5173</td>
              <td>ContractID: 511</td>
              <td colspan="2">Total: <span class="grandtotal">0</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div></td>
  <td nowrap="nowrap"><div class="containerprice">
      <div class="pricedate"><a href="" class="price_normal">0</a></div>
      <div class="pricext">
        <table class="subtable" width="600" border="0">
          <tbody>
            <tr>
              <td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-07#</td>
            </tr>
            <tr>
              <td>Total</td>
              <td>STD Rate</td>
              <td>STD Supps</td>
              <td>SNG</td>
              <td>Extra</td>
            </tr>
            <tr>
              <td><a href="" class="price_normal">0</a></td>
              <td></td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="5"><table width="100%" border="0">
                  <tbody>
                    <tr>
                      <td nowrap="nowrap">Age 35 (1)</td>
                      <td nowrap="nowrap">Age 35 (1) Supps</td>
                      <td nowrap="nowrap">Age 35 (2)</td>
                      <td nowrap="nowrap">Age 35 (2) Supps</td>
                    </tr>
                    <tr>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
            <tr>
              <td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
            </tr>
            <tr>
              <td>StdOcc: 2</td>
              <td>AdultBasis: PR</td>
              <td>AdultAgeFrom: 12</td>
              <td colspan="2">RoomBoardCode: BB</td>
            </tr>
            <tr>
              <td></td>
              <td>RoomID: 5173</td>
              <td>ContractID: 511</td>
              <td colspan="2">Total: <span class="grandtotal">0</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div></td>
  <td nowrap="nowrap"><div class="containerprice">
      <div class="pricedate"><a href="" class="price_normal">0</a></div>
      <div class="pricext">
        <table class="subtable" width="600" border="0">
          <tbody>
            <tr>
              <td colspan="5">Anantara Bophut Resort and Spa - Anantara Suite - #2013-08-08#</td>
            </tr>
            <tr>
              <td>Total</td>
              <td>STD Rate</td>
              <td>STD Supps</td>
              <td>SNG</td>
              <td>Extra</td>
            </tr>
            <tr>
              <td><a href="" class="price_normal">0</a></td>
              <td></td>
              <td>0</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td colspan="5"><table width="100%" border="0">
                  <tbody>
                    <tr>
                      <td nowrap="nowrap">Age 35 (1)</td>
                      <td nowrap="nowrap">Age 35 (1) Supps</td>
                      <td nowrap="nowrap">Age 35 (2)</td>
                      <td nowrap="nowrap">Age 35 (2) Supps</td>
                    </tr>
                    <tr>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                      <td nowrap="nowrap"></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
            <tr>
              <td colspan="5">2 2 2# Age 35 2 # EBO I(-15.00%PP) = -0<br></td>
            </tr>
            <tr>
              <td>StdOcc: 2</td>
              <td>AdultBasis: PR</td>
              <td>AdultAgeFrom: 12</td>
              <td colspan="2">RoomBoardCode: BB</td>
            </tr>
            <tr>
              <td></td>
              <td>RoomID: 5173</td>
              <td>ContractID: 511</td>
              <td colspan="2">Total: <span class="grandtotal">0</span></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div></td>
</tr>

これは、datepicker init ondomload です。

$(function() {
$.ajaxSetup({ cache: false });

$("#quote").submit(function(e){
    e.preventDefault();
  });


   $( "#datefrom" ).datepicker({
            dateFormat: "dd-mm-yy",
            changeMonth: false,
            numberOfMonths: 1,
            minDate: 0,
            onSelect: function(dateText, inst) { 

                var aDates=dateText.split("-");
                var strSelectedDate=aDates[1]+'/'+aDates[0]+'/'+aDates[2];
                var oSelectDate=new Date(strSelectedDate);

                //$( "#dateto" ).datepicker( "option", "minDate", $("#datefrom").val() );

                oSelectDate.setDate(oSelectDate.getDate()+1);
        $("#dateto").val(Convert(oSelectDate.getDate())+'-'+Convert(parseInt(oSelectDate.getMonth())+1)+'-'+oSelectDate.getFullYear());
                $( "#drNoOfNights" ).val(1);

            }
        }); 
        $( "#dateto" ).datepicker({
            dateFormat: "dd-mm-yy",
            changeMonth: false,
            numberOfMonths: 1,
            onSelect: function(dateText, inst) { 

                var aDates=$( "#datefrom" ).val().split("-");
                var strSelectedDate=aDates[1]+'/'+aDates[0]+'/'+aDates[2];
                var start=new Date(strSelectedDate);

                aDates=dateText.split("-");
                var strSelectedDate=aDates[1]+'/'+aDates[0]+'/'+aDates[2];
                var end=new Date(strSelectedDate);


                var diff = 0;
                if (start && end) {
                    diff = Math.floor((end.getTime() - start.getTime()) / 86400000); // ms per day
                }

                $('#drNoOfNights').val(diff);


            }
        });

});