jquery - ajax jqueryUI 大表 IE8 Internet Explorer 慢

Question

我现在对此感到困惑，我需要帮助。我正在通过 AJAX 拉入一个大型 html 表（大约 250 行，15 列）每行的 7 列包含更多的子表，这些子表隐藏在单元格的 div 中，并在单元格悬停时显示在悬停时（要显示的更多数据）

在所有最近的浏览器（IE9、FF、Chrome）上都运行良好。我开始添加数据表 jquery 插件，以便能够动态地对列等进行排序，这也很好。

然后我意识到这个应用程序的用户将通过虚拟化操作系统使用 IE8，所以我开始测试。马上，我在开发笔记本电脑的 virtualbox 中在 IE8 下进行测试时发现了一些问题。

似乎发生的情况是，第一次发送 ajax 请求时，浏览器会收集返回的数据并以相当快的速度将其呈现在屏幕上。如果我然后尝试重新提交具有相同数据的表单，浏览器将挂起一段时间，然后出现“此脚本处理时间太长......你想......”

所以我开始整理我的页面，试图看看是什么导致了这种减速。好像 IE 第二次在桌子上窒息并显示错误消息，但是为什么！？！？

我遵循 MSN 关于优化 IE 渲染表的建议，并为此表和子表添加了固定宽度，我还添加了<colgroups>. 这影响很小。

不久之后，我意识到如果我在脚本中删除对 JQuery UI 的调用，错误就会消失，并且 virtualbox 下的 IE8 将毫无问题地呈现每个 ajax 响应！

那么，有人可以提供一些建议，为什么包含 JQueryUI 会导致 ajax 表加载速度非常慢并影响浏览器。

顺便说一句 - jqueryUI 存在的唯一原因是因为我在搜索表单中使用了 JQueryUI 日期选择器。据我所知，JQueryUI 不应该干扰 IE 的渲染过程，但似乎确实如此！

在下面找到 ajax 请求的代码示例：

当服务器返回响应后“单击搜索”时，“数据”将包含一个长字符串，其中包含一个表：

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

这是一些示例数据，这是我表中的一行...

<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>

这是日期选择器初始化 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);


            }
        });

});