Обновление UpdatePanel в IE

Я работаю над приложением 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 UpdatePanel, потому что тот же код намного быстрее в FF и Chrome.

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
5
0
5 546
7
Перейти к ответу Данный вопрос помечен как решенный

Ответы 7

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

Вы будете смотреть на ответ каждого из сообщений, чтобы увидеть, насколько они велики. Если размер сообщений> 5 КБ или около того, значит, 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 вы используете?

Вот код всплывающего элемента управления (на странице есть только один из них, который используется всеми элементами управления, содержащими значки):

<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>

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

В предыдущем проекте мы заметили, что IE стал ужасно медленным, когда у нас было много (более 150) текстовых полей на странице, после проверки с помощью скрипачей мы поняли, что это был механизм рендеринга, который был медленным.

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

Ответ принят как подходящий

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

Перешел на использование Jquery и PageMethod, и теперь он молниеносно работает во всех браузерах, поэтому это были UpdatePanel и IE.

Jared 24.11.2008 20:27

Использование веб-методов в некоторых ситуациях выгоднее, чем панели обновлений, например - состояние просмотра имеет вес, и нам не нужно снова и снова отправлять состояние просмотра в заголовке.

Gopal Krishna Ranjan 06.12.2011 14:55

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

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

мертвая ссылка ... пожалуйста, исправьте ее заново

Artur Peniche 01.10.2015 12:28

Другие вопросы по теме