UpdatePanel Slowness в IE - PullRequest
       19

UpdatePanel Slowness в IE

5 голосов
/ 06 ноября 2008

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

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

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

Ответы [ 7 ]

7 голосов
/ 11 ноября 2008

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

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

1 голос
/ 11 ноября 2008

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

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

0 голосов
/ 27 ноября 2009

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

0 голосов
/ 10 ноября 2008

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

0 голосов
/ 06 ноября 2008

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

<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>
0 голосов
/ 06 ноября 2008

Чтобы выяснить, почему это занимает так много времени, я бы порекомендовал использовать 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 вы используете?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...