Jul 05, 2013, 11:42 AM
[CLOSED] Performance question
Hello
I have as usercontrol that is dynamically sticked on the page as a new tab.
The idea of application is that it will open the same tab many times in order to allow switch user between tabs quickly. the tab content is relativelly heavy
Originally I have everything generated in codebehind, but it was relativelly slow to get page rendered and loaded with data
now I have following idea:
- render usercontrol script to some hidden field
- once the new tab is requested, I replace ID in tab with right indexes - so I can later on use direct events ( during postback the respective control is created on server etc.... all that works now)
the problem is performance - it take about 3-4 seconds to render tab in IE. Is there any room for improvement?
Note I sport that speed of app changes if I add/exclude some of our custom CSS scripts
I simplified my app as follows:
page:
I have as usercontrol that is dynamically sticked on the page as a new tab.
The idea of application is that it will open the same tab many times in order to allow switch user between tabs quickly. the tab content is relativelly heavy
Originally I have everything generated in codebehind, but it was relativelly slow to get page rendered and loaded with data
now I have following idea:
- render usercontrol script to some hidden field
- once the new tab is requested, I replace ID in tab with right indexes - so I can later on use direct events ( during postback the respective control is created on server etc.... all that works now)
the problem is performance - it take about 3-4 seconds to render tab in IE. Is there any room for improvement?
Note I sport that speed of app changes if I add/exclude some of our custom CSS scripts
I simplified my app as follows:
page:
<%@ Page Language="C#" %>
<html>
<head id="Head1" runat="server">
<title>Lazy Load of UserControl - Ext.NET Examples</title>
</head>
<body>
<form id="Form1" runat="server">
<script runat="server">
protected override void OnPreRender(EventArgs e)
{
if (IsPostBack == false)
{
UserControl uc1 = (UserControl) this.LoadControl("~/WindowsApp/UserControls/TextControll.ascx");
uc1.ID = "UC" ;
var pnl = new Ext.Net.Panel()
{
ID = "dynamicPanelUC",
Title = "Tab",
CloseAction = CloseAction.Destroy,
Closable = true,
};
pnl.ContentControls.Add(uc1);
hid2.Text = pnl.ToBuilder().ToScript().ToString();
}
base.OnPreRender(e);
}
</script>
<script>
var alaInstances = { };
function onCLick() {
var hid = <%=hid2.ClientID %>;
var value = hid.getValue();
var startDate = new Date();
var evaluated = eval(value);
<%= tabPanel.ClientID %>.add(dynamicPanelUC);
var endDate = new Date();
alert(endDate-startDate)
}
</script>
<ext:ResourceManager runat="server" Theme="Gray" Namespace=""></ext:ResourceManager>
<ext:Panel runat="server" ID="pnlDynamic"></ext:Panel>
<ext:Hidden runat="server" ID="hid2" />
<ext:TabPanel ID="tabPanel" ClientIDMode="Static" runat="server" Title="Tab with dynamic controls" Width="1000"
Height="800" BodyPadding="5" DeferredRender="True">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Add Client" OnClientClick="onCLick();"/>
</Items>
</ext:Toolbar>
</TopBar>
</ext:TabPanel>
</form>
</body>
</html>
usercontrol:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TextControll.ascx.cs"
Inherits="WindowsApp_UserControls_TextControll" %>
<script>
</script>
<ext:Hidden runat="server" ID="hiddenField">
</ext:Hidden>
<ext:FormPanel ID="tab2FormPanel" runat="server" Border="False" AutoScroll="True">
<Items>
<ext:Panel ID="topPanel" runat="server" Border="False" Frame="True" Cls="toolbarPanel"
Collapsible="True">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Defaults>
<ext:Parameter runat="server" Name="Margin" Value="0 10 0 0">
</ext:Parameter>
</Defaults>
<TopBar>
<ext:Toolbar runat="server" ID="tab2Toolbar">
<Items>
<ext:Hidden runat="server" ID="hidData" />
<ext:Button runat="server" ID="btnCreateNew" Icon="ApplicationAdd" Cls="grayButton"
Text="Create New">
</ext:Button>
<ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
<ext:Button runat="server" ID="btnSave" Icon="Disk" Cls="grayButton" Text="Save">
<DirectEvents>
<Click>
<EventMask Msg="Saving..." ShowMask="True" Target="CustomTarget" CustomTarget="#{tab2FormPanel}">
</EventMask>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button runat="server" ID="btnDelete" Icon="Delete" Cls="grayButton" Text="Delete"
Hidden="True">
</ext:Button>
<ext:Button runat="server" ID="btnCancel" Icon="Cancel" Cls="grayButton" Text="Cancel" />
<ext:ToolbarSeparator ID="ToolbarSeparator22" runat="server" />
<ext:Button ID="Button3" runat="server" Text="TR Actions" Icon="Wand" Cls="greyButton">
<Menu>
<ext:Menu ID="Menu11" runat="server">
<Items>
<ext:MenuItem ID="btnViewComments" runat="server" Text="View Comments" Cls="greyButton"
Icon="Comments">
<Listeners>
<Click Handler="alert('not implemented')">
</Click>
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="Button2" runat="server" Text="Void" Cls="greyButton" Icon="Cancel">
<DirectEvents>
</DirectEvents>
</ext:MenuItem>
<ext:MenuItem ID="btnBillingInfo" runat="server" Text="Billing Info" Cls="greyButton"
Icon="Money">
<Listeners>
<Click Handler="alert('not implemented')">
</Click>
</Listeners>
</ext:MenuItem>
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server" />
<ext:Button ID="Button1" runat="server" Text="Templates" Icon="Page" Cls="greyButton">
<Menu>
<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="btnSaveAsTemplate" runat="server" Text="Save As Template" Cls="greyButton"
Icon="PageSave">
<Listeners>
<Click Handler="alert('not implemented')">
</Click>
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="btnNewFromTemplate" runat="server" Text="New From Template" Cls="greyButton"
Icon="PageCopy">
<Listeners>
<Click Handler="alert('not implemented')">
</Click>
</Listeners>
</ext:MenuItem>
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel ID="Panel2" runat="server" Width="300" Frame="True">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:ComboBox runat="server" FieldLabel="Business" ID="ddlBusiness" Width="250" AllowBlank="false">
<DirectEvents>
<Select>
<EventMask ShowMask="True" CustomTarget="#{Panel2}" Target="CustomTarget" />
</Select>
</DirectEvents>
</ext:ComboBox>
<ext:ComboBox ID="ddlRequestType" runat="server" FieldLabel="Request Type" Width="250"
AllowBlank="false" />
<ext:ComboBox ID="ddlBillingCode" runat="server" FieldLabel="Billing Code" Width="250"
AllowBlank="false" />
<ext:TextField ID="txtTROwner" runat="server" Disabled="True" FieldLabel="TR Owner"
PreserveIndicatorIcon="True" />
<ext:TextField ID="txtStatus" runat="server" Text="Accepted" Disabled="True" FieldLabel="Status"
PreserveIndicatorIcon="True" />
</Items>
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" Width="370" Frame="True" PaddingSpec="10">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:TextField runat="server" ID="txtTRNumber" FieldLabel="TR#" Disabled="True" />
<ext:TextField ID="txtCreatedBy" runat="server" Disabled="True" FieldLabel="Created By" />
<ext:TextField ID="txtCreatedDate" runat="server" Disabled="True" FieldLabel="Created Date" />
</Items>
</ext:Panel>
<ext:Panel ID="Panel4" runat="server" Frame="True" Layout="Fit" Flex="1">
<Items>
<ext:TextArea ID="txtPreliminaryShipmentInfo" runat="server" FieldLabel="Shipping Information and Comments " />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel ID="Panel14" runat="server" Border="False" Frame="True" Cls="toolbarPanel"
Collapsible="True">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="Panel32" runat="server" Width="300" Frame="True">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:ComboBox runat="server" FieldLabel="Business" ID="ddlBusiness1" Width="250" AllowBlank="false">
<DirectEvents>
<Select>
<EventMask ShowMask="True" CustomTarget="#{Panel2}" Target="CustomTarget" />
</Select>
</DirectEvents>
</ext:ComboBox>
<ext:ComboBox ID="ddlRequestType1" runat="server" FieldLabel="Request Type" Width="250"
AllowBlank="false" />
<ext:ComboBox ID="ddlBillingCode1" runat="server" FieldLabel="Billing Code" Width="250"
AllowBlank="false" />
<ext:TextField ID="txtTROwne1r" runat="server" Disabled="True" FieldLabel="TR Owner"
PreserveIndicatorIcon="True" />
<ext:TextField ID="txtStatus1" runat="server" Text="Accepted" Disabled="True" FieldLabel="Status"
PreserveIndicatorIcon="True" />
</Items>
</ext:Panel>
<ext:Panel ID="Panel31" runat="server" Width="370" Frame="True" PaddingSpec="10">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:TextField runat="server" ID="txtTRNumber1" FieldLabel="TR#" Disabled="True" />
<ext:TextField ID="txtCreatedBy1" runat="server" Disabled="True" FieldLabel="Created By" />
<ext:TextField ID="txtCreatedDate1" runat="server" Disabled="True" FieldLabel="Created Date" />
</Items>
</ext:Panel>
<ext:Panel ID="Panel41" runat="server" Frame="True" Layout="Fit" Flex="1">
<Items>
<ext:TextArea ID="txtPreliminaryShipmentInfo1" runat="server" FieldLabel="Shipping Information and Comments " />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel runat="server" ID="tabPanel" ActiveIndex="0">
<Items>
<ext:Panel ID="Panel1" runat="server">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<TopBar>
<ext:Toolbar runat="server" ID="Toolbar1">
<Items>
<ext:Hidden runat="server" ID="Hidden1" />
<ext:Button runat="server" ID="Button4" Icon="ApplicationAdd" Cls="grayButton" Text="Create New">
</ext:Button>
<ext:ToolbarSeparator ID="ToolbarSeparator3" runat="server" />
<ext:Button runat="server" ID="Button5" Icon="Disk" Cls="grayButton" Text="Save">
<DirectEvents>
<Click>
<EventMask Msg="Saving..." ShowMask="True" Target="CustomTarget" CustomTarget="#{tab2FormPanel}">
</EventMask>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button runat="server" ID="Button6" Icon="Delete" Cls="grayButton" Text="Delete"
Hidden="True">
</ext:Button>
<ext:Button runat="server" ID="Button7" Icon="Cancel" Cls="grayButton" Text="Cancel" />
<ext:Button runat="server" ID="Button8" Icon="BookNext" Cls="grayButton" Text="Create Succesive Shipment" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel ID="Panel5" runat="server" Title="Shipment Detail" Layout="table" Frame="True"
Flex="1" Margin="10">
<LayoutConfig>
<ext:TableLayoutConfig Columns="3" />
</LayoutConfig>
<Defaults>
<ext:Parameter Name="Margin" Value="0 10 2 0" />
</Defaults>
<Items>
<ext:TextField runat="server" ID="txtShipmentNo" FieldLabel="Shipment#" />
<ext:ComboBox runat="server" ID="DropDownListControl1" FieldLabel="Business" />
<ext:ComboBox runat="server" ID="DropDownListControl2" FieldLabel="Billing Code" />
<ext:ComboBox runat="server" ID="ddlMasterMode" FieldLabel="Master Mode" />
<ext:ComboBox runat="server" ID="ddlServiceLevel" FieldLabel="Service Level" />
</Items>
</ext:Panel>
<ext:Panel ID="Panel6" runat="server" Title="Shipment Diagram" Height="200" Margin="10">
</ext:Panel>
<ext:Panel ID="Panel7" runat="server">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Defaults>
<ext:Parameter Name="margin" Value="5" />
<ext:Parameter Name="Height" Value="300" />
</Defaults>
<Items>
<ext:Panel ID="Panel11" runat="server" Title="Costs & Categories" Width="200" Flex="1"
MaxWidth="300" Layout="Fit" Frame="True">
<Items>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel ID="Container1" runat="server">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Defaults>
<ext:Parameter Name="margin" Value="5" />
</Defaults>
<Items>
<ext:Panel ID="Panel12" runat="server" Title="Lowest rate carrier" Width="400" Height="100">
</ext:Panel>
<ext:Panel ID="Panel13" runat="server" Title="Comments" Layout="Fit" Flex="1">
<Items>
<ext:TextArea runat="server" ID="comments" />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel ID="Panel8" runat="server" Layout="vbox" AutoScroll="True">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Hidden runat="server" ID="Hidden2" />
<ext:Panel ID="Panel822" runat="server" Layout="vbox" Title="TU Details" TitleCollapse="True"
Collapsible="True">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="Panel9" runat="server" Layout="hbox">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="StretchMax" />
</LayoutConfig>
<Items>
<ext:Panel ID="Panel10" runat="server" Title="General" Frame="True" Width="350" MarginSpec="10 0 10 10">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:ComboBox runat="server" FieldLabel="Mode" ID="ddlMode" />
<ext:ComboBox ID="ddlEquipment" runat="server" FieldLabel="Mode" />
<ext:Checkbox runat="server" ID="cboOOG" FieldLabel="OOG" />
<ext:Checkbox runat="server" ID="cboPremium" FieldLabel="Premium" />
<ext:ComboBox ID="ddlRootCause" runat="server" FieldLabel="Root Cause" />
<ext:ComboBox ID="DropDownListControl3" runat="server" FieldLabel="Premium Reason Code" />
<ext:FieldContainer ID="FieldContainer11" runat="server" Layout="vbox" HideLabel="False">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<alc:NumberFieldControl runat="server" ID="txtDistance" FieldLabel="Distance" />
<ext:FieldContainer ID="FieldContainer12" runat="server" Layout="hbox" HideLabel="False"
FieldLabel=" " LabelSeparator=" ">
<Items>
<ext:Button ID="Button9" runat="server" Text="View On Map" />
<ext:Button runat="server" ID="btnCalculate" Text="Calculate" />
</Items>
</ext:FieldContainer>
</Items>
</ext:FieldContainer>
<ext:ComboBox ID="ddlBorderCrossing" runat="server" FieldLabel="Border Crossing" />
</Items>
</ext:Panel>
<ext:Container ID="Container2" runat="server" Margin="10" Layout="vbox">
<Items>
<ext:Panel ID="Panel15" runat="server" Title="References" Width="300" MinHeight="50"
Flex="1">
<Items>
</Items>
</ext:Panel>
<ext:Panel ID="Panel16" runat="server" Title="TPSP Autocreation" Width="300" MinHeight="50"
MarginSpec="10 0 0 0" Flex="1">
</ext:Panel>
</Items>
</ext:Container>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel runat="server" ID="pnlOrigin" Hidden="True">
<Items>
<ext:Panel ID="Panel17" Frame="True" Layout="vbox" runat="server">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:ComboBox runat="server" ID="ddlOriginLocation" Text="Location" />
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:FormPanel>
Last edited by Daniil; Jul 10, 2013 at 4:26 AM.
Reason: [CLOSED]
