Медлительность панели обновления в IE

Question

Я работаю над приложением ASP.Net и пытаюсь добавить в него немного Ajax для ускорения работы в определенных областях.Первая область, на которой я концентрируюсь, - это область посещаемости, где учителя могут сообщать о посещаемости (и некоторых других данных) о детях.Это должно быть быстро.

Я создал настройку с двойным управлением, в которой пользователь нажимает на значок, и с помощью Javascript и Jquery я открываю второй элемент управления.Затем я использую __doPostBack(), чтобы обновить всплывающий элемент управления для загрузки всех соответствующих данных.

Вот небольшой фрагмент видео, чтобы показать, как это работает: http://www.screencast.com/users/cyberjared/folders/Jing/media/32ef7c22-fe82-4b60-a74a-9a37ab625f1f (: 21 и игнорируйте звуковой фон).

Это медленнее, чем я хотел бы, на 2-3 секунды в Firefox и Chrome для каждого "всплывающего окна", но это совершенно неосуществимо в 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, но я не смог понять, как это сделать с помощью метода веб-сервиса / статической страницы.Как вы можете видеть, этот элемент управления загружается много раз на одной и той же странице, поэтому размер страницы и скорость загрузки являются проблемой.

Я был бы признателен за любые идеи?

Редактировать:То же самое в IE 6 или 7.Я думаю, это связано с обработкой IE панели обновления, потому что один и тот же код работает намного быстрее в FF и Chrome.

Answer 1

Если скорость / производительность является для вас серьезной проблемой, я бы настоятельно рекомендовал отказаться от UpdatePanels, поскольку они вызывают обратную передачу всей страницы, которая перетаскивает 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);

Answer 2

Это известная проблема только с IE, см. КБ 2000262.Можно найти обходной путь / исправление здесь.Я работал с ними над сценарием, и очень жаль, что они не могут предложить реальное исправление.

Answer 3

Заметили в предыдущем проекте, что IE стал ужасно медленным, когда у нас было более 150 текстовых полей на странице, после проверки с помощью fiddler мы решили, что медленным был движок рендеринга.

(кстати, прежде чем вы все закричите, более 150 текстовых полей были явным требованием заказчика, мы в основном воссоздали настроенный Excel в Интернете)

Answer 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 width="100%">
                <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>

Answer 5

Чтобы выяснить, почему это занимает так много времени, я бы рекомендовал использовать Fiddler для слежки за вашим трафиком IE: http://www.fiddlertool.com/fiddler/

Вы будете просматривать ответы на каждое из сообщений, чтобы понять, насколько они велики.Если сообщения имеют размер > 5 КБ или около того, то панель обновления слишком загружена.

Это звучит как довольно простая вещь, которую вы пытаетесь сделать, поэтому мне трудно поверить, что виновата панель обновления.Хотя протестировать это не должно быть слишком сложно.Самый простой способ протестировать это без 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

Не могли бы вы также опубликовать код своей панели обновления, чтобы мы могли получить более подробную информацию?

Редактировать:Спасибо!

Какую версию IE вы используете?

Answer 6

Работа с DOM и HTTP-запросами по своей сути медленная, это дело браузера.Лучший способ ускорить это - уменьшить количество запросов HTTP (AJAX или иным образом) и уменьшить количество действий DOM, поиска, редактирования, замены и т.д.

Answer 7

Я рекомендую выполнять трассировку перфорации с помощью текст ссылки.Это бесплатный инструмент для анализа производительности AJAX в Internet Explorer