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

【问题标题】：ASP.NET UpdatePanel causes "A script on this page is causing internet explorer to run slowly..." on IEASP.NET UpdatePanel 在 IE 上导致“此页面上的脚本导致 Internet Explorer 运行缓慢...”
【发布时间】：2011-05-26 03:11:58
【问题描述】：

当 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（集成）中测试。

【问题讨论】：

标签： asp.net updatepanel

【解决方案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 做的事情要多得多，因为您可能已经在更新面板中初始化了脚本，这些脚本将被释放。在那之后，只设置 innerHTML 并不是最好的方法，所以可能有点慢。

如果你使用jquery来清除这些东西，并且你可能已经加载了脚本，那么它们将不会被释放（销毁）......

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

【讨论】：

所有问题的根源是 Sys.Application.disposeElement(updatePanelElement, true); （我在 ASP.NET 3.5 中看到了 this._destroyTree(updatePanelElement); 但这是无关紧要的细节）。顺便提一句。它在 ASP.NET 4.0 下运行正常。非常感谢。

【解决方案2】：

我们遇到了同样的情况。我们做了几件事：

分解 JS，让我们拥有更小的文件，而不是一个巨大的 js 来处理许多不同的事情
确保服务器缓存配置正确
分析 JS（您可以使用 firebug、IE 开发工具并识别运行非常缓慢的代码片段并对其进行优化

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

【讨论】：