Как ускорить страницу asp.net, которая использует jQuery

Question

У меня есть веб-страница, которая позволяет пользователю вводить информацию в форму. Я использую некоторые jQuery на странице, а также в коде позади, и мне нужно найти способ ускорить страницу (около 30 секунд для загрузки). Я уверен, что есть несколько простых исправлений для ускорения загрузки сайта, ниже приведены некоторые фрагменты сайта. Любая помощь будет полезна для ускорения загрузки сайта.

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">

  <script type="text/javascript">
      $(document).ready(function () {
          var i = $("table.newRequirementClass tr td:contains('Description')").next();

          i.textLimiter({
              maxLength: 255,
              elCount: 'elCount'
          });
          $("#submitMIFields").hide();
          $("#submitMIFields").toggle(false);
          $("[id$='chkMI']").change(function () {
              $("#submitMIFields").toggle("slow");
          });

          $(".MIHead").hide();
      });

      function Count(text, maxLength) {
          if (text.value.length > maxLength) {
              text.value = text.value.substring(0, maxLength);
          }
      }
   </script>

<div style="text-align: left; width: 80%;">
        <h2 runat="server" id="h2Caption">New Requirement</h2>
        <asp:Panel ID="ErrorSummary" runat="server">
        <asp:Label runat="server" ID="lblErrors" />
        <asp:ValidationSummary id="valSummary" runat="server"
        HeaderText="Please Revise The Following Errors:"
        ShowSummary="true" DisplayMode="List" />

        </asp:Panel>
        <asp:DetailsView ID="dvNewRequirement" 
            runat="server"  CssClass="newRequirementClass"
            AutoGenerateRows="False" 
            Width="100%"
            DefaultMode="Insert"
            SkinID="SampleDetailsView" 
            CssSelectorClass="PrettyDetailsView" 
            OnItemInserting="dvNewRequirement_ItemInserting" 
            OnModeChanging="dvNewRequirement_ModeChanging" 
            ondatabound="dvNewRequirement_DataBound" >
            <FieldHeaderStyle Width="15em" Font-Bold="True"/>
            <Fields>
                <asp:TemplateField HeaderText="Status">
                    <InsertItemTemplate>
                    <asp:Label ID="lblStatus" Text="Pre-Solicitation" runat="server" />

                    </InsertItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Vehicle:" Visible="false" >
                    <InsertItemTemplate>
                        <asp:DropDownList ID="ddlVehicles"
                            runat="server" 
                            DataTextField="strDescription" 
                            DataValueField="strCode" 
                            DataSource='<%# CodeLists.Vehicles() %>'
                            AppendDataBoundItems="true">
                            <asp:ListItem Text="" Value="" />
                        </asp:DropDownList>
                    </InsertItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Office:">
                    <InsertItemTemplate>
                        <Proj:OrgTree id="OrgTree" runat="server" Filter="false" Visible='<%# (AuthenticatedUser.CanCreateMis() != true) ? true : false %>'
                        SelectedValue = '<%# (AuthenticatedUser.IsCUS() != true) ? BaseControl.LoginOffice : Guid.Empty %>' />
                    </InsertItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Customer Office:">
                    <InsertItemTemplate>
                        <Proj:OrgTree id="customerOrgTree" Filter="false" runat="server"
                        SelectedValue = '<%# (AuthenticatedUser.CanCreateMis() == true) ? BaseControl.LoginOffice : Guid.Empty %>' />
                    </InsertItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Description:" ControlStyle-CssClass="Description">
                    <InsertItemTemplate>
                        <asp:TextBox runat="server" ID="txtDescription"
                            TextMode="multiLine" onKeyUp="Count(this,257)" onChnage="Count(this,257)"
                            Width="90%"/><br />
                            <div id="elCount"></div>
                    </InsertItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Procurement Type:">
                    <EditItemTemplate>
                        <asp:DropDownList ID="ddlProcurementTypeList" 
                            runat="server" 
                            DataTextField="strDescription" 
                            DataValueField="strCode" 
                            DataSource='<%# CodeLists.ProcurementTypes() %>'
                            AppendDataBoundItems="true">
                        </asp:DropDownList>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Type:">
                    <InsertItemTemplate>
                        <asp:DropDownList ID="ddlTypeList" 
                            runat="server" 
                            DataTextField="strDescription" 
                            DataValueField="strCode" 
                            DataSource='<%# CodeLists.Types() %>'
                            AppendDataBoundItems="true">
                            <asp:ListItem Text="" Value="" />
                        </asp:DropDownList>

                    </InsertItemTemplate>
                </asp:TemplateField>
            <asp:TemplateField HeaderText="Est Total Value:">
                <InsertItemTemplate>
                    <asp:TextBox ID="txtEstValue" 
                        runat="server"  />
                    <ajax:FilteredTextBoxExtender ID="FilteredTextBoxExtender1"
                        TargetControlID="txtEstValue"
                        FilterType="Numbers,Custom"
                        ValidChars=",."
                        runat="server" />                                                    
                </InsertItemTemplate>
            </asp:TemplateField> 
            <asp:TemplateField HeaderText="Customer Contact Date:">
                <EditItemTemplate>
                    <asp:TextBox ID="txtCustomerContact" 
                        runat="server"  />
                    <ajax:CalendarExtender ID="calCustomerContact" 
                        runat="server" 
                        TargetControlID="txtCustomerContact" />
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Req Start Date:">
                <EditItemTemplate>
                    <asp:TextBox ID="txtReqStartDate" 
                        runat="server" />
                    <ajax:CalendarExtender ID="calReqStartDate" 
                        runat="server" 
                        TargetControlID="txtReqStartDate" />
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Previous Number:">
                <EditItemTemplate>
                    <asp:DropDownList ID="ddlAwardList" 
                        runat="server" 
                        DataTextField="strAwardNumber" 
                        DataValueField="strAwardNumber" 
                        DataSource='<%# CodeLists.AwardNumbers() %>'
                        AppendDataBoundItems="true">
                        <asp:ListItem Text="None" Value="" />
                    </asp:DropDownList>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Currency">
                <EditItemTemplate>
                    <asp:DropDownList ID="ddlCurrencyList"
                        runat="server"
                        DataTextField="strCultureName"
                        DataValueField="strCulture"
                        DataSource='<%# CodeLists.Currency() %>'
                        AppendDataBoundItems="true" >
                        </asp:DropDownList>
                </EditItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="?">
                <EditItemTemplate>
                    <asp:CheckBox runat="server" ID="chkMI" />
                    <div id="submitMIFields">
                        <Proj:MI runat="server" ID="initialMI" />
                    </div>
                </EditItemTemplate>
            </asp:TemplateField>
                <asp:CommandField InsertText="Submit" ShowCancelButton="False" 
                    ShowInsertButton="True" ControlStyle-CssClass="NewReqSubButton" />
            </Fields>
        </asp:DetailsView>

    </div>


    protected void Page_Load(object sender, EventArgs e)
{
    if (AuthenticatedUser.CanCreateMis())
    {
        CheckBox chkMI = (CheckBox)dvNewRequirement.FindControl("chkMI");
        chkMI.Checked = true;
        chkMI.Enabled = false;
        runjQueryCode();

    }
}

    private string getJQueryCode()
{
    StringBuilder sb = new StringBuilder();
    sb.AppendLine("$(document).ready(function() {");
    sb.AppendLine("$('#submitMIFields').show();");
    sb.AppendLine(" });");

    return sb.ToString();

}

private void runjQueryCode()
{
    ScriptManager requestSM = ScriptManager.GetCurrent(Page);
    if (requestSM != null && requestSM.IsInAsyncPostBack)
    {
        ScriptManager.RegisterClientScriptBlock(this,
                                                typeof(Page),
                                                Guid.NewGuid().ToString(),
                                                getJQueryCode(),
                                                true);
    }
    else
    {
        Page.ClientScript.RegisterClientScriptBlock(typeof(Page),
                                                Guid.NewGuid().ToString(),
                                                getJQueryCode(),
                                                true);
    }
}

Answer 1

Выкопать копию издания Dynatrace AJAX (http://ajax.dynatrace.com/ajax/en/)

Насколько велико состояние представления и сколько времени занимает его десериализация?

Сколько полей формы зависят от данных, находящихся в состоянии просмотра, и насколько велики раскрывающиеся списки и т. Д.

Я предполагаю, что вы загружаете слишком много данных, которые затем необходимо десериализовать и заполнить в форме с помощью Javascript.

Кроме того, какой браузер вы используете и работает ли он быстрее с текущей сборкой Chrome или Firefox?

Answer 2

Я уверен, что есть некоторые довольно простые исправления для ускорения загрузки сайта

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

Обычно улучшения производительности могут быть достигнуты путем

1. улучшения плана запросов
2. сокращения удаленных вызовов (IO, DB и т. Д.)
3. , уменьшающий объем загружаемых данных.

viewstate - убийца производительности # 1 с веб-формами.все, что вы можете сделать, чтобы уменьшить размер viewstate, - это хорошо.

если вы отображаете только несколько записей за раз, загружайте только те записи, которые хотите отобразить.пролистать данные в базе данных, а не пользовательский интерфейс.когда вы загружаете 100 или 1000 записей из базы данных и затем отображаете 1-20 записей, все полученные записи хранятся в viewstate, а не только записи, отображаемые пользователю.

количество выполненных запросов также может уменьшитьсяспектакль.скажем, у вас есть сетка, и когда вы привязываетесь к сетке, вы загружаете список значений поиска в раскрывающийся список с помощью элемента управления источником данных.каждый раз, когда выпадающий список связан, источник данных будет выполняться.очень легко создать select n + 1 проблему, подобную этой.

наконец, если запрос плохо сформирован или схема db не оптимизирована (индексация и т. д.), запросы могут приниматьвыполнение секунд или даже минут, а не миллисекунд.