IE 中的 UpdatePanel 缓慢
Posted
技术标签:
【中文标题】IE 中的 UpdatePanel 缓慢【英文标题】：UpdatePanel Slowness in IE 【发布时间】：2010-09-20 23:52:20 【问题描述】：我正在开发一个 ASP.Net 应用程序，并正在向它添加一些 Ajax 以加快某些领域的速度。我关注的第一个领域是出勤区，供老师报告孩子的出勤率（和其他一些数据）。这需要很快。
我创建了一个双控件设置，用户单击图标并通过 javascript 和 Jquery 弹出第二个控件。然后我使用 __doPostBack() 刷新弹出控件以加载所有相关数据。
这里有一个小视频 sn-p 来展示它是如何工作的：http://www.screencast.com/users/cyberjared/folders/Jing/media/32ef7c22-fe82-4b60-a74a-9a37ab625f1f（:21 并忽略音频背景）。
在 Firefox 和 Chrome 中，每次“弹出”需要 2-3 秒，这比我想要的要慢，但在 IE 中完全行不通，每次弹出和加载都需要 7-8 秒。这忽略了数据更改后保存数据所需的任何时间。
这是处理弹出窗口的 javascript：
function showAttendMenu(callingControl, guid)
var myPnl = $get('" + this.MyPnl.ClientID + @"')
if(myPnl)
var displayIDFld = $get('" + this.AttendanceFld.ClientID + @"');
var myStyle = myPnl.style;
if(myStyle.display == 'block' && (guid== '' || guid == displayIDFld.value))
myStyle.display = 'none';
else
// Get a reference to the PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Unblock the form when a partial postback ends.
prm.add_endRequest(function()
$('#" + this.MyPnl.ClientID + @"').unblock( fadeOut: 0);
);
var domEl = Sys.UI.DomElement;
//Move it into position
var loc = domEl.getLocation(callingControl);
var width = domEl.getBounds(callingControl).width;
domEl.setLocation(myPnl, loc.x + width, loc.y - 200);
//Show it and block it until we finish loading the data
myStyle.display = 'block';
$('#" + this.MyPnl.ClientID + @"').block( message: null, overlayCSS: backgroundColor:'#fff', opacity: '0.7' );
//Load the data
if(guid != '') displayIDFld.value = guid;
__doPostBack('" + UpdatePanel1.ClientID + @"','');
首先，我不明白为什么 __doPostBack() 会在 IE 中引入这样的延迟。如果我把它和 prm.add_endRequest 拿出来，它会非常快，因为没有回发发生。
其次，我需要一种方法来弹出这个控件并刷新数据，使其仍然具有交互性。我没有与 UpdatePanel 结婚，但我无法弄清楚如何使用 Web 服务/静态页面方法来做到这一点。如您所见，此控件在同一页面上加载了很多次，因此页面大小和下载速度是一个问题。
我很感激任何想法？
编辑：在 IE 6 或 7 中是一样的。我认为这与 IE 对 UpdatePanel 的处理有关，因为相同的代码在 FF 和 Chrome 中要快得多。
【问题讨论】：
【参考方案1】：如果速度/性能是您主要关心的问题，我强烈建议您不要使用 UpdatePanel，因为它们会导致整页回发，将 ViewState 拖到标题中，除其他废话外，并迫使页面经历整个生命周期每次循环（即使用户没有看到）。
您应该能够（相对容易地）使用 PageMethods 来完成您的任务。
// In your aspx.cs define the server-side method marked with the
// WebMethod attribute and it must be public static.
[WebMethod]
public static string HelloWorld(string name)
return "Hello World - by " + name;
// Call the method via javascript
PageMethods.HelloWorld("Jimmy", callbackMethod, failMethod);
【讨论】：
切换到使用 Jquery 和 PageMethod，它现在在所有浏览器中都快如闪电，所以它是 UpdatePanel 和 IE 在某些情况下使用 webmethods 比更新面板更有利，例如 - 视图状态具有权重，我们不需要一次又一次地在标题中发送视图状态。【参考方案2】：这是一个仅 IE 的已知问题，请参阅 KB 2000262。可以在here 找到解决方法/修复。我与他们一起编写脚本，但遗憾的是他们无法提出真正的解决方案。
【讨论】：
死链接...请重新考虑修复它【参考方案3】：在之前的项目中注意到，当我们在页面上有大量（150 多个）文本框时，IE 变得非常慢，在与 fiddler 核实后，我们认为渲染引擎很慢。
（顺便说一句，在你们大喊之前，150 多个文本框是客户的明确要求，我们基本上是在网络上重新创建了自定义的 excel）
【讨论】：
【参考方案4】：这是弹出控件的代码（页面上只有一个由包含图标的所有控件共享）：
<script type="text/javascript" src="<%=Response.ApplyAppPathModifier("~/js/jquery-1.2.6.js") %>"></script>
<script type="text/javascript" src="<%=Response.ApplyAppPathModifier("~/js/jquery.blockUI.js") %>"></script>
<asp:Panel CssClass="PopOutBox noPrint" ID="MyPnl" style="display: none; z-index:1000; width:230px; position: absolute;" runat="server">
<cmp:Image MyImageType="SmallCancel" CssClass="fright" runat="server" ID="CloseImg" AlternateText="Close" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField ID="AttendanceFld" runat="server" />
<asp:HiddenField ID="DatePickerFld" runat="server" />
<table >
<tr>
<td valign="top">
<asp:RadioButtonList EnableViewState="false" ID="AttendRBL" runat="server" RepeatDirection="Vertical">
<asp:ListItem Selected="True" Text="On Time" Value="" />
<asp:ListItem Text="Late" Value="Late" />
<asp:ListItem Text="Absent" Value="Absent" />
<asp:ListItem Text="Cleaning Flunk" Value="Other" title="This is used for things like cubby flunks" />
<asp:ListItem Text="Major Cleaning Flunk" Value="Major" title="This is used for things like White Glove flunks" />
</asp:RadioButtonList>
</td>
<td valign="top" style="text-align: center; vertical-align: middle;">
<asp:CheckBox EnableViewState="false" ID="ExcusedCB" runat="server" />
<br />
<asp:Label ID="Label1" EnableViewState="false" AssociatedControlID="ExcusedCB" Text="Excused"
runat="server" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Label EnableViewState="false" ID="Label2" Text="Notes" runat="server" AssociatedControlID="DataTB" />
<cmp:HelpPopUp EnableViewState="false" runat="server" Text='Must include "Out Sick" to be counted as ill on reports and progress reports' />
<br />
<asp:TextBox ID="DataTB" EnableViewState="false" runat="server" Columns="30" /><br />
<div style="font-size: 10px; text-align:center;">
<a href="#" onclick="setAttendVal('<%=this.DataTB.ClientID%>','Out Sick');return false;">
(Ill)</a> <a href="#" onclick="setAttendVal('<%=this.DataTB.ClientID%>','In Ethics');return false;">
(Ethics)</a> <a href="#" onclick="setAttendVal('<%=this.DataTB.ClientID %>','Warned');return false;">
(Warned)</a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<cmp:ImageButton ID="DeleteBtn" OnClientClick="showAttendMenu(this,'');" OnClick="DeleteAttendance" ButtonType="SmallDelete"
CssClass="fright" runat="server" />
<cmp:ImageButton ID="SaveBtn" OnClientClick="showAttendMenu(this,'');" OnClick="SaveAttendance" ButtonType="SmallSave" runat="server" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
【讨论】：
【参考方案5】：要找出为什么需要这么长时间，我建议使用 Fiddler 来监视您的 IE 流量：http://www.fiddlertool.com/fiddler/
您将查看每条消息的响应以了解它们的大小。如果消息 >5kb 左右，那么 UpdatePanel 就太小了。
这听起来像是您尝试做的一件相当简单的事情，所以我很难相信更新面板是罪魁祸首。测试它应该不会太难。在没有 UpdatePanel 的情况下进行测试的最简单方法是使用 PageMethod。这个页面上有一个很棒的教程： http://weblogs.asp.net/sohailsayed/archive/2008/02/23/calling-methods-in-a-codebehind-function-pagemethods-from-client-side-using-ajax-net.aspx
您能否也发布您的 UpdatePanel 代码，以便我们了解更多详细信息？
编辑：谢谢！
你用的是什么版本的IE？
【讨论】：
【参考方案6】：使用 DOM 和 HTTP 请求本来就很慢，这是浏览器的问题。加快速度的最佳方法是减少 HTTP 请求（AJAX 或其他）的次数，并减少 DOM 操作、搜索、编辑、替换等的次数。
【讨论】：
【参考方案7】：我建议使用link text 进行性能跟踪。是一款免费的IE浏览器AJAX性能分析工具
【讨论】：
以上是关于IE 中的 UpdatePanel 缓慢的主要内容，如果未能解决你的问题，请参考以下文章
Internet Explorer 中的 jquery 1.4.4 类选择器速度缓慢