jQuery를 사용하는 asp.net 페이지의 속도를 높이는 방법

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

나는이되는 웹 양식의 성능 개선을 사용하고, 정말 따라 웹 사이트

의 로딩 속도를 꽤 쉽게 수정이 확신 보통 많은 일을 요구합니다. Webform은 디버깅 및 확장하기가 가장 어려운 웹 프레임 워크 중 하나입니다.

은 일반적으로 성능 향상은 쿼리 계획

원격 호출 (IO, DB 등)

로드 된 데이터의 양을 줄여을 줄일 개선

1. 에 의해 만들어 질 수있다.

viewstate는 webforms와 함께 # 1 성과 킬러입니다. viewstate의 크기를 줄이기 위해 할 수있는 일은 모두 좋은 일입니다.

한 번에 몇 개의 레코드 만 표시하는 경우 표시 할 레코드 만로드하십시오. 페이지가 데이터베이스가 아닌 UI의 데이터를 통해 db에서 100 또는 1000s 레코드를로드 한 다음 1-20 레코드를 표시하면 검색된 모든 레코드가 사용자에게 표시된 레코드가 아니라 viewstate에 저장됩니다.

실행 된 쿼리의 수 또한 성능을 저하시킬 수 있습니다. gridview가 있다고 가정하고 gridview에 바인딩하면 데이터 소스 컨트롤을 사용하여 조회 값 목록을 드롭 다운에로드합니다. 드롭 다운 목록이 바인딩 될 때마다 데이터 소스가 실행됩니다. select n + 1 문제는 매우 간단합니다.

마지막으로 쿼리가 잘못 형성되거나 db 스키마가 최적화되지 않은 경우 (인덱싱 등) 쿼리를 실행할 때 밀리 초가 아닌 몇 초 또는 몇 분이 걸릴 수 있습니다. 밖으로

Answer 2

발굴 된 dynaTrace AJAX 판 (http://ajax.dynatrace.com/ajax/en/)

이 viewstate가 얼마나 큰이며, 복용의 탈 직렬화가 얼마나 오래 사본? 양식 필드의

얼마나 많은 viewstate가에서의 데이터에 의존 얼마나 큰 드롭 다운 목록 등

내 생각 엔 당신이 다음 직렬화 해제를해야합니다 너무 많은 데이터를 밀고있는 것입니다입니다 Javascript를 통해 양식에 채워집니다.

현재 사용중인 브라우저가 무엇이며 현재 Chrome이나 Firefox 빌드가 더 빠릅니다.