Jakub Linhart
Jakub Linhart

Reputation: 4072

ASP.NET UpdatePanel causes "A script on this page is causing internet explorer to run slowly..." on IE

IE works very slow when there is a chunk of invalid html code inside an UpdatePanel. Interesting point: when the ugly html is cleared (jQuery: $('#Content').empty()) before partial postback, IE runs pretty fast and does not show "A script..." message.

There are two buttons in the example. The first one (Async) do simple partial postback and causes described problem. The second one (Async with clear) clears div with the ugly html and then executes partial postback - without any problems!

A solution could be to use iframe and load the ugly html into iframe. I am more interested in explanation of such behavior.

Example ASPX markup:

<%@ 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'"> [email protected] <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: [email protected]<br />              Přijato: 31.01.2011 01:20:44<br />              Komu: [email protected]<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>

Code behind:

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)
        {
        }
    }
}

Tested in IE6 and IE8, ASP.NET 3.5, IIS7.5 (integrated).

Upvotes: 0

Views: 701

Answers (2)

xmorera
xmorera

Reputation: 1961

We ran into the same situation. There are a few things that we did:

  • Break up the JS so that we have smaller files, and not one huge js for many different things
  • Make sure the server cache is configured correctly
  • Profiled the JS (you can use firebug, IE developer tools and identified the piece of code that was running very slowly and optimized it

There is also a dirty trick if you can't optimize the code, add within the long running piece of code in your client a call to the web server, even if it is just to a keep alive do nothing web service. The browser will think that it is a new request and restart the timer. I am ashamed giving this option, which is not the correct way, but if it makes your life simpler and the user can wait then it may save you a lot of time of profiling and optimizing.

Upvotes: 0

Luke
Luke

Reputation: 8407

This is the clear code by 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;
    }

It is doing quite more stuff than jquery, since you might have initialized scripts in the updatepanel, that would be disposed. After that, setting just innerHTML is not the best way, so maybe it´s little slow.

If you use jquery to clear the stuff, and you may have scripts loaded into it, then they will not be disposed (destroyed)...

You could find that code and check if it´s the section what makes this slowness, i dont know.

Upvotes: 1

Related Questions