ASP.NET UpdatePanel导致IE上的“此页面上的脚本导致Internet Explorer运行缓慢...”

时间:2011-02-05 19:51:39

标签: asp.net updatepanel

当UpdatePanel中存在大量无效的html代码时,IE的工作速度非常慢。 有趣的一点:当部分回发之前清除丑陋的html(jQuery:$('#Content')。empty())时,IE运行速度非常快,并且不会显示“A script ...”消息。

示例中有两个按钮。第一个(异步)执行简单的部分回发并导致描述的问题。第二个(Async with clear)用丑陋的html清除div,然后执行部分回发 - 没有任何问题!

解决方案可能是使用iframe并将丑陋的html加载到iframe中。我对解释这种行为更感兴趣。

示例ASPX标记:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="LongRunningJavascript._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1"> 
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/jquery-1.4.1.min.js" />
        </Scripts>
    </asp:ScriptManager>
    <div>
        <script type="text/javascript">
            function Remove() {
                $('#Content').empty();
            }
        </script>
        <asp:UpdatePanel runat="server" ID="UpdatePanel1" ChildrenAsTriggers="true">
            <ContentTemplate>
                <asp:Button runat="server" ID="AsyncButton" Text="Async" OnClick="AsyncButton_Click"/>
                <asp:Button runat="server" ID="AsyncWithClearButton" Text="Async with clear" OnClick="AsyncButton_Click"  OnClientClick="Remove();" />
                <div id="Content">
                  <style>  <!--  v\:* {behavior:url(#default#VML);}  o\:* {behavior:url(#default#VML);}  w\:* {behavior:url(#default#VML);}  .shape {behavior:url(#default#VML);}  -->  </style>  <style>  <!--  /* Font Definitions */  @font-face   {font-family:Wingdings;   panose-1:5 0 0 0 0 0 0 0 0 0;}  @font-face   {font-family:Wingdings;   panose-1:5 0 0 0 0 0 0 0 0 0;}  @font-face   {font-family:Calibri;   panose-1:2 15 5 2 2 2 4 3 2 4;}  @font-face   {font-family:Tahoma;   panose-1:2 11 6 4 3 5 4 4 2 4;}  @font-face   {font-family:Verdana;   panose-1:2 11 6 4 3 5 4 4 2 4;}  /* Style Definitions */  p.MsoNormal, li.MsoNormal, div.MsoNormal   {margin:0cm;   margin-bottom:.0001pt;   font-size:12.0pt;   font-family:"Times New Xxxxx","serif";}  a:link, span.MsoHyperlink   {mso-style-priority:99;   color:blue;   text-decoration:underline;}  a:visited, span.MsoHyperlinkFollowed   {mso-style-priority:99;   color:purple;   text-decoration:underline;}  p.MsoAcetate, li.MsoAcetate, div.MsoAcetate   {mso-style-priority:99;   mso-style-link:"Text bubliny Char";   margin:0cm;   margin-bottom:.0001pt;   font-size:8.0pt;   font-family:"Tahoma","sans-serif";}  span.StylE-mailovZprvy19   {mso-style-type:personal-reply;   font-family:"Calibri","sans-serif";   color:#1F497D;}  span.TextbublinyChar   {mso-style-name:"Text bubliny Char";   mso-style-priority:99;   mso-style-link:"Text bubliny";   font-family:"Tahoma","sans-serif";}  .MsoChpDefault   {mso-style-type:export-only;   font-size:10.0pt;}  @page WordSection1   {size:612.0pt 792.0pt;   margin:70.85pt 70.85pt 70.85pt 70.85pt;}  div.WordSection1   {page:WordSection1;}  -->  </style>    <div class="WordSection1">     <p class="MsoNormal"><span style="FONT-SIZE: 11pt; COLOR: #1f497d; FONT-FAMILY: 'Calibri','sans-serif'">     <o:p>&nbsp;</o:p>        <p class="MsoNormal"><span style="FONT-SIZE: 11pt; COLOR: #1f497d; FONT-FAMILY: 'Calibri','sans-serif'">Xxxx xx </span><span style="FONT-SIZE: 11pt; COLOR: #1f497d; FONT-FAMILY: Wingdings">J</span><span style="FONT-SIZE: 11pt; COLOR: #1f497d; FONT-FAMILY: 'Calibri','sans-serif'">        <o:p></o:p>         <p class="MsoNormal"><span style="FONT-SIZE: 11pt; COLOR: #1f497d; FONT-FAMILY: 'Calibri','sans-serif'">         <o:p>&nbsp;</o:p>            <p class="MsoNormal"><span style="FONT-SIZE: 11pt; COLOR: #1f497d; FONT-FAMILY: 'Calibri','sans-serif'">Xxxxx            <o:p></o:p>             <p class="MsoNormal"><span style="FONT-SIZE: 11pt; COLOR: #1f497d; FONT-FAMILY: 'Calibri','sans-serif'">             <o:p>&nbsp;</o:p>                <p class="MsoNormal"><b><span style="FONT-SIZE: 10pt; FONT-FAMILY: 'Tahoma','sans-serif'">From:</span></b><span style="FONT-SIZE: 10pt; FONT-FAMILY: 'Tahoma','sans-serif'"> xxxx@xxx.xx <br />               <b>Sent:</b> Tuesday, February 01, 2011 4:06 PM<br />               <b>To:</b> XXXXX Xxxxx<br />               <b>Subject:</b> test Akce multimediální přehrávače.                <o:p></o:p></span></p>               <p class="MsoNormal">              <o:p>&nbsp;</o:p> </?xml:namespace>               <p class="MsoNormal" style="MARGIN-BOTTOM: 12pt"><br />              <br />              ___________________________________________________________________________<br />              Od: xxx@xxxxxy.xx<br />              Přijato: 31.01.2011 01:20:44<br />              Komu: xxx@xxxxxy.xx<br />              Předmět: Akce multimediální přehrávače.               <o:p></o:p></p>               <p class="MsoNormal"><i><span style="FONT-SIZE: 24pt; COLOR: navy"><img id="_x0000_i1097" height="32" src="cid:avecom_7new1.JPG" width="32" /><em><span style="TEXT-DECORATION: underline">doporučuje...</span></em></span></i>               <o:p></o:p></p>               <div>                <div>                 <div>                  <div>                   <p class="MsoNormal">&nbsp;                   <o:p></o:p></p></div>                  <div>                   <p class="MsoNormal">Neumí Vaą televizor přehrávat přímo z&nbsp;flashdisku nebo externího HDD ???                   <o:p></o:p></p></div>                  <div>                   <p class="MsoNormal">Připravili jsme pro Vás multimediální přehrávače, díky kterým si budete moci uľít Vaąe oblíben&eacute; filmy, hudbu a fotografie přímo na Vaąí TV, monitor (s podporou HDMI a DVI)&nbsp;                   <o:p></o:p></p></div>                  <div>                   <p class="MsoNormal">Jednoduch&eacute; připojování umoľňuje proměnit USB flashdisky, externí HDD a pamě»ov&eacute; karty na skutečná multimediální úloľiątě.&nbsp;<b><span style="FONT-SIZE: 11.5pt; COLOR: black">                     <o:p></o:p>                      <div>                       <div class="MsoNormal" style="TEXT-ALIGN: center" align="center"><b><span style="FONT-SIZE: 11.5pt; COLOR: black">  <hr align="center" width="100%" size="2" />                        </span></b></div></div>                      <div>                       <div>                        <div>                         <div>                          <div>                           <div>                            <div>                             <div>                              <div>                               <div>                                <div>                                 <p class="MsoNormal"><b><span style="FONT-SIZE: 11.5pt; COLOR: fuchsia">GENIUS Media Player 200, HDMI, přehrávání hudby, videa, fotek z pamě»ových karet, externích HDD.                                   <o:p></o:p></span></b></p></div></div>                               <div>                                <div>                                 <div>                                  <div>                                   <div>                                    <div>                                     <div>                                      <p class="MsoNormal"><b><span style="FONT-SIZE: 11.5pt; COLOR: red"><img id="_x0000_i1099" height="32" src="cid:37158a.jpg" width="32" /></span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: fuchsia">                                        <o:p></o:p>                                         <div>                                          <p class="MsoNormal"><b><span style="FONT-SIZE: 11.5pt; COLOR: red">Cena:&nbsp;999,00Kč bez DPH </span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: blue">(1 199,00Kč s DPH)</span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: fuchsia">                                            <o:p></o:p>                                             <div>                                              <p class="MsoNormal"><b><span style="FONT-SIZE: 11.5pt; COLOR: fuchsia">&nbsp;                                                <o:p></o:p>                                                 <div>                                                  <p class="MsoNormal"><b><span style="FONT-SIZE: 11.5pt; COLOR: black">Kompaktní přehrávač, který si poradí se spousty multimediálními formáty. Podporuje video soubory ve formátech DVD disků, pokročilý MPEG-4 formát (H.264), oblíben&eacute; komprese DivX a XviD a rovněľ i formáty Real Media v rozliąení aľ 1024 x 576 bodů. Z hudebních souborů jsou to pak např. populární MP3 a WMA. V neposlední řadě přehrávač dovolí i prohlíľení obrazářů a fotografií ve formátech BMP, JPEG a PNG. Nechybí podpora textových souborů a několik formátů titulek. Ke sv&eacute;mu televizoru přehrávač připojíte pomocí HDMI nebo komponentního výstupu. V rozhraní potěąí USB vstup pro připojení externích datových úloľią» a slot na pamě»ov&eacute; karty typu MS/SC/MMC. Přehrávač je dodáván s dálkovým ovladačem.<br />                                                   <br />                                                   </span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: blue">Podporovan&eacute; formáty:<br />                                                   Video: </span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: black">RM/RMVB, MPEG 1/2 (DAT, VOB, MOV), MPEG4 (AVI, DIVX , XVID), </span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: blue">Audio: </span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: black">MP3, WMA, AAC, AC3, WAV, </span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: blue">Foto: </span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: black">BMP, JPEG, PNG, </span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: blue">Text: </span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: black">TXT, SRT, SUB, SSA, ASS, SMI<br />                                                   </span></b><strong><span style="FONT-SIZE: 11.5pt; COLOR: blue">Rozhraní: </span></strong><b><span style="FONT-SIZE: 11.5pt; COLOR: black">1x HDMI výstup, 1x komponentní výstup (Y, Pr, Pb), 1x kompozitní A/V výstup (RCA konektory), 1x USB vstup, 1x slot na pamě»ov&eacute; karty MS/SD/MMC<br />                                                   </span></b><strong><span style="FONT-SIZE: 11.5pt; COLOR: blue">Rozměry: </span></strong><b><span style="FONT-SIZE: 11.5pt; COLOR: black">27 x 35 x 7 cm (V x &copy; x H)<br />                                                   </span></b><strong><span style="FONT-SIZE: 11.5pt; COLOR: blue">Hmotnost: </span></strong><b><span style="FONT-SIZE: 11.5pt; COLOR: black">1,3 kg<br />                                                   </span></b><strong><span style="FONT-SIZE: 11.5pt; COLOR: blue">Dodávan&eacute; přísluąenství: </span></strong><b><span style="FONT-SIZE: 11.5pt; COLOR: black">Dálkový ovladač</span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: fuchsia">                                                    <o:p></o:p>                                                     <div>                                                      <div>                                                       <p class="MsoNormal"><b><span style="COLOR: black; TEXT-DECORATION: underline">Kód zboľí:</span><span style="COLOR: blue">&nbsp;37158</span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: black">&nbsp;                                                         <o:p></o:p></span></b></p></div></div>                                                     <div>                                                      <div>                                                       <div>                                                        <p class="MsoNormal"><b><span style="COLOR: black">Moľnost objednání (po registraci)&nbsp;a podrobný popis&nbsp;</span><span style="COLOR: blue; TEXT-DECORATION: underline"><a href="http://www.avekom.cz/product/37158/2/genius-media-player-200-hdmi-prehravani-hudby-videa-fotek-z-pametovych-karet-externich-hdd">zde</a></span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: black">                                                          <o:p></o:p>                                                           <div>                                                            <div>                                                             <div>                                                              <div>                                                               <div>                                                                <div>                                                                 <div class="MsoNormal" style="TEXT-ALIGN: center" align="center"><b><span style="FONT-SIZE: 11.5pt; COLOR: black">  <hr align="center" width="100%" size="2" />                                                                  </span></b></div>                                                                 <div>                                                                  <p class="MsoNormal"><b><span style="FONT-SIZE: 11.5pt; COLOR: fuchsia">ASUS O!PLAY MINI multimedialni prehravac FullHD 1080p USB (MINI/1A/PAL/HDMI/AS mediaplayer)                                                                    <o:p></o:p></span></b></p></div>                                                                 <div>                                                                  <p class="MsoNormal"><b><span style="FONT-SIZE: 11.5pt; COLOR: fuchsia"><img id="_x0000_i1101" height="32" src="cid:37632.jpg" width="32" border="0" />&nbsp;                                                                    <o:p></o:p></span></b></p></div>                                                                 <div>                                                                  <div>                                                                   <p class="MsoNormal"><b><span style="FONT-SIZE: 11.5pt; COLOR: red">Cena:&nbsp;1 299,00Kč bez DPH </span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: blue">(1 599,00Kč s DPH)</span></b><b><span style="FONT-SIZE: 11.5pt; COLOR: fuchsia">                                                                     <o:p></o:p>                                                                      <div>                                                                       <p class="MsoNormal"><b><span style="FONT-SIZE: 11.5pt; COLOR: fuchsia">&nbsp;                                                                         <o:p></o:p>                                                                          <div>                                                                           <p class="MsoNormal"><b><span style="FONT-SIZE: 11.5pt; COLOR: black">Výrazně zmenąená verze populárního multimediálního přehrávače Asus O!Play, která váľí pouze 175 g a vejde se vám do dlaní! I tak si přehrávač zachoval svou největąí přednost a podporuje Full HD rozliąení 1080p a 7.1kanálový zvuk Dolby TrueHD, který zaručuje audiovizuální záľitky srovnateln&eacute; s návątěvou kina. Podporuje celou řadu video formátů v populárních kodecích XviD, DivX i v pokročil&eacute;m H.264 jako např. AVI, VOB (pro DVD), MPG, MP4 či vysoce kvalitní MKV. Nem&eacute;ně početná podpora formátů se týká i audio souborů, kter&eacute; si budete moci přehrávat např. MP3, WAV, OGG, WMA nebo AAC. Nechybí moľnost prohlíľení digitálních fotografií JPEG, obrázků BMP, GIF a TIFF.<br />                                                                            Jelikoľ přehrávač disponuje opravdu miniaturními rozměry, tak ho není moľn&eacute; osadit interním pevným diskem. Datový obsah vąak můľete přehrávači dodávat pomocí flashdisků, externích HDD anebo pamě»ových karet několika druhů, díky přednímu USB 2.0 portu respektive vestavěn&eacute; čtečce karet. Propojení s televizorem obstará HDMI výstup ve verzi 1.3 nebo komponentní a kompozitní výstup. Optický digitální audio výstup dobře poslouľí např. k posílání digitálního signálu do vaąeho receiveru. Přehrávač je dodáván s dálkovým ovladačem.<br />                                                                            <br />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

代码背后:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace LongRunningJavascript
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected void AsyncButton_Click(object sender, EventArgs e)
        {
        }
    }
}

在IE6和IE8,ASP.NET 3.5,IIS7.5(集成)中测试。

2 个答案:

答案 0 :(得分:1)

这是ms的明确代码

function Sys$WebForms$PageRequestManager$_updatePanel(updatePanelElement, rendering) {
        for (var updatePanelID in this._scriptDisposes) {
            if (this._elementContains(updatePanelElement, document.getElementById(updatePanelID))) {
                var disposeScripts = this._scriptDisposes[updatePanelID];
                for (var i = 0, l = disposeScripts.length; i < l; i++) {
                    eval(disposeScripts[i]);
                }
                delete this._scriptDisposes[updatePanelID];
            }
        }
        Sys.Application.disposeElement(updatePanelElement, true);
        updatePanelElement.innerHTML = rendering;
    }

它比jquery做的更多,因为你可能在updatepanel中初始化了脚本,这些脚本将被处理掉。之后,设置innerHTML并不是最好的方法,所以也许它有点慢。

如果您使用jquery清除这些内容,并且您可能已将脚本加载到其中,那么它们将不会被处置(销毁)......

您可以找到该代码并检查是否是导致这种缓慢的部分,我不知道。

答案 1 :(得分:0)

我们遇到了同样的情况。我们做了一些事情:

  • 分解JS以便我们有更小的文件,而不是一个巨大的js用于许多不同的东西
  • 确保正确配置服务器缓存
  • 描述了JS(您可以使用firebug,IE开发人员工具并确定运行速度非常慢且优化的代码段

如果你无法优化代码,在客户端长时间运行的代码中添加一个对Web服务器的调用,即使只是为了保持活着,也不做任何Web服务,也会有一个肮脏的技巧。浏览器会认为这是一个新请求并重新启动计时器。我很惭愧给出这个选项,这不是正确的方法,但是如果它让你的生活变得更简单并且用户可以等待那么它可以为你节省大量的分析和优化时间。