ajax jqueryUI大表IE8 Internet Explorer慢

时间:2013-01-07 18:09:49

标签: jquery ajax performance jquery-ui html-table

我现在很难过,我需要帮助。 我通过AJAX(大约250行,15列)拉入一个大的html表 每行的7列包含更多子表,这些子表隐藏在单元格中的div中,并在单元格悬停时显示在悬停中(显示更多数据)

所有最近的浏览器(IE9,FF,Chrome)都能正常运行。 我开始添加datatables jquery插件以便能够动态地对列等进行排序,这也很好。

然后我意识到这个应用程序的用户将通过虚拟化操作系统使用IE8,所以我开始测试。直接,我注意到在我的开发笔记本电脑上在虚拟机中使用IE8进行测试时会出现问题。

似乎发生的情况是,第一次发送ajax请求时,浏览器会收集返回的数据,并在屏幕上合理地快速呈现它。如果我然后尝试重新提交具有相同数据的表单,浏览器将暂停一段时间,然后提出“此脚本需要很长时间才能处理...您希望......”

所以我开始屠宰我的网页,试着看看导致这种减速的原因。看起来像第二次桌面上的IE扼流圈并显示错误消息,但为什么!?!?

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

在我意识到如果我在脚本中删除对JQuery UI的调用之后不久,错误就会消失,而virtualbox下的IE8会在没有问题的情况下呈现每个ajax响应!

所以,有人可以提供一些建议,为什么包括JQueryUI导致ajax表加载速度非常慢并且捏造浏览器。

BTW - 只有jqueryUI存在的原因是因为我在我的搜索表单中使用了JQueryUI日期选择器。据我所知,JQueryUI不应该干扰IE的渲染过程,但它似乎确实如此!

查找以下ajax请求的代码示例:

点击“搜索”时 在服务器返回响应之后,“data”将包含一个长字符串,其中包含一个表:

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

这是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);


            }
        });

});

0 个答案:

没有答案