What's New?

[CLOSED] [1.0] Client rendering performance twice as slow

Page 1 of 2 12 LastLast
  1. #1
    Oct 22, 2009, 12:21 PM

    [CLOSED] [1.0] Client rendering performance twice as slow

    I notice that client side rendering is twice as slow once I upgraded a few pages to v1.0. One page went from 843ms to 1624ms. Another went from 687ms to 1453ms.

    Visually, I can tell the speed difference. The way I measure it is by the following scripts:


    Start Script placed in page header:


    var start = new Date();

    End Script attached to ResourceManager's documentReady handler


    window.status = new Date() - start;

    What can I do to optimize?
  2. #2
    Oct 22, 2009, 12:44 PM

    RE: [CLOSED] [1.0] Client rendering performance twice as slow

    Hi,

    1. Under which browser?
    2. Can you post your test sample?
    3. I think that startPoint should be place inside onReady handler otherwise the time will count script loading time also (it is not good if you want to know rendering time only)

    I can suggest use the following approach
    protected void Page_Load(object sender, EventArgs e)
        {
            ResourceManager1.RegisterBeforeClientInitScript("this.startPoint = new Date();");
            ResourceManager1.Listeners.DocumentReady.Handler = "alert(new Date() - this.startPoint);";
        }
  3. #3
    Oct 22, 2009, 12:57 PM

    RE: [CLOSED] [1.0] Client rendering performance twice as slow

    This is under IE8 w/ compatibility mode. In this case, I think measuring client script download is fine since the number of scripts did not change and most scripts are cached. I do like your approach better and will try it out.

    I will try to recreate a simple sample that mimics the pages' layout. It wont be easy as we have other 3rd party controls on the page...
  4. #4
    Oct 22, 2009, 1:24 PM

    RE: [CLOSED] [1.0] Client rendering performance twice as slow

    With your way of measuring:

    Page1: 547ms --> 1001ms
    Page2: 328ms --> 567ms


    It still looks like a close 2x slower. Sample coming soon.
  5. #5
    Oct 22, 2009, 2:51 PM

    RE: [CLOSED] [1.0] Client rendering performance twice as slow



    Sample with a common nested borderlayouts. Note nesting is required because first borderlayout usually resides in MasterPage and second borderlayout is in content page. The time may vary across browsers/computer. I tested on IE8 w/ compatibility mode as our application is IE only.

    Fast, Old Way (438ms):
    
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Response.AddHeader("Pragma", "no-cache")
        Me.Response.Cache.SetCacheability(HttpCacheability.NoCache)
        
        If Not Coolite.Ext.Web.Ext.IsAjaxRequest Then
            Me.script.AddBeforeClientInitScript("this.startPoint=new Date();")
            Me.script.Listeners.DocumentReady.Handler = "window.status=new Date() - this.startPoint;"
        End If
    End Sub
    
    Private Sub store_RefreshData(ByVal sender As Object, ByVal e As Coolite.Ext.Web.StoreRefreshDataEventArgs) Handles store.RefreshData
        Dim list As New List(Of Object)
        For i As Integer = 1 To 26
            list.Add(New With {.FirstName = "John" &amp; i, .LastName = "Doe" &amp; i, .Department = "Department" &amp; i, .Age = 25})
        Next
        Me.store.DataSource = list
        Me.store.DataBind()
    End Sub
         
</script>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">


    <script type="text/javascript">
        function btnClick(btn) {
            alert(btn.text);
        }
    </script>


    <ext:ScriptManager runat="server" ID="script">
    </ext:ScriptManager>
    <ext:Store runat="server" ID="store">
        <Proxy>
            <ext:DataSourceProxy>
            </ext:DataSourceProxy>
        </Proxy>
        <Reader>
            <ext:JsonReader ReaderID="LastName">
                <Fields>
                    <ext:RecordField Name="LastName">
                    </ext:RecordField>
                    <ext:RecordField Name="FirstName">
                    </ext:RecordField>
                    <ext:RecordField Name="Department">
                    </ext:RecordField>
                    <ext:RecordField Name="Age">
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:ViewPort ID="Viewport1" runat="server">
        <Body>
            <ext:BorderLayout runat="server">
                <North>
                    <ext:Panel runat="server" Border="false" Height="50">
                        <Body>
                            Navigation and Header</Body>
                    </ext:Panel>
                </North>
                <Center MarginsSummary="5,5,5,5">
                    <ext:Panel ID="Panel1" runat="server" Border="false">
                        <Body>
                            <ext:BorderLayout runat="server">
                                <West Collapsible="true" Split="true">
                                    <ext:TreePanel runat="server" ID="tree" Title="Folders" Icon="FolderStar" UseArrows="true"
                                        TrackMouseOver="true" Width="350">
                                        <TopBar>
                                            <ext:Toolbar runat="server">
                                                <Items>
                                                    <ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button2" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button3" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <Root>
                                            <ext:TreeNode Text="Root" Icon="Folder">
                                                <Nodes>
                                                    <ext:TreeNode Text="Child1" Icon="Folder">
                                                    </ext:TreeNode>
                                                    <ext:TreeNode Text="Child2" Icon="Folder">
                                                    </ext:TreeNode>
                                                    <ext:TreeNode Text="Child3" Icon="Folder">
                                                    </ext:TreeNode>
                                                    <ext:TreeNode Text="Child4" Icon="Folder">
                                                    </ext:TreeNode>
                                                    <ext:TreeNode Text="Child5" Icon="Folder">
                                                    </ext:TreeNode>
                                                </Nodes>
                                            </ext:TreeNode>
                                        </Root>
                                    </ext:TreePanel>
                                </West>
                                <Center>
                                    <ext:GridPanel runat="server" ID="grid" Title="Users" Icon="User" StoreID="store">
                                        <TopBar>
                                            <ext:Toolbar ID="Toolbar1" runat="server">
                                                <Items>
                                                    <ext:Button ID="Button11" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button4" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button5" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button6" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button7" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button8" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button9" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button10" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <ColumnModel>
                                            <Columns>
                                                <ext:RowNumbererColumn Fixed="true">
                                                </ext:RowNumbererColumn>
                                                <ext:Column DataIndex="FirstName" Header="First Name">
                                                </ext:Column>
                                                <ext:Column DataIndex="LastName" Header="Last Name">
                                                </ext:Column>
                                                <ext:Column DataIndex="Department" Header="Department">
                                                </ext:Column>
                                                <ext:Column DataIndex="Age" Header="Age">
                                                </ext:Column>
                                            </Columns>
                                        </ColumnModel>
                                        <View>
                                            <ext:GridView ForceFit="true">
                                            </ext:GridView>
                                        </View>
                                        <SelectionModel>
                                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
                                            </ext:RowSelectionModel>
                                        </SelectionModel>
                                        <BottomBar>
                                            <ext:PagingToolbar ID="PagingToolbar1" runat="server" StoreID="store" PageSize="25">
                                            </ext:PagingToolbar>
                                        </BottomBar>
                                    </ext:GridPanel>
                                </Center>
                            </ext:BorderLayout>
                        </Body>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Body>
    </ext:ViewPort>


    </form>
</body>
</html>
    Slow, New Way (1001ms)
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Response.AddHeader("Pragma", "no-cache")
        Me.Response.Cache.SetCacheability(HttpCacheability.NoCache)
        
        If Not Ext.Net.X.IsAjaxRequest Then
            Me.script.AddBeforeClientInitScript("this.startPoint=new Date();")
            Me.script.Listeners.DocumentReady.Handler = "window.status=new Date() - this.startPoint;"
        End If
    End Sub
    
    Private Sub store_RefreshData(ByVal sender As Object, ByVal e As Ext.Net.StoreRefreshDataEventArgs) Handles store.RefreshData
        Dim list As New List(Of Object)
        For i As Integer = 1 To 26
            list.Add(New With {.FirstName = "John" &amp; i, .LastName = "Doe" &amp; i, .Department = "Department" &amp; i, .Age = 25})
        Next
        Me.store.DataSource = list
        Me.store.DataBind()
    End Sub
         
</script>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">


    <script type="text/javascript">
        function btnClick(btn) {
            alert(btn.text);
        }
    </script>


    <ext:ResourceManager runat="server" ID="script">
    </ext:ResourceManager>
    <ext:Store runat="server" ID="store">
        <Proxy>
            <ext:PageProxy>
            </ext:PageProxy>
        </Proxy>
        <Reader>
            <ext:JsonReader IDProperty="LastName">
                <Fields>
                    <ext:RecordField Name="LastName">
                    </ext:RecordField>
                    <ext:RecordField Name="FirstName">
                    </ext:RecordField>
                    <ext:RecordField Name="Department">
                    </ext:RecordField>
                    <ext:RecordField Name="Age">
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Viewport ID="Viewport1" runat="server">
        <Content>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North>
                    <ext:Panel ID="Panel1" runat="server" Border="false" Height="50">
                        <Content>
                            Navigation and Header</Content>
                    </ext:Panel>
                </North>
                <Center MarginsSummary="5,5,5,5">
                    <ext:Panel ID="Panel2" runat="server" Border="false">
                        <Content>
                            <ext:BorderLayout ID="BorderLayout2" runat="server" >
                                <West Collapsible="true" Split="true">
                                    <ext:TreePanel runat="server" ID="tree" Title="Folders" Icon="FolderStar" UseArrows="true"
                                        TrackMouseOver="true" Width="350">
                                        <TopBar>
                                            <ext:Toolbar ID="Toolbar1" runat="server">
                                                <Items>
                                                    <ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button2" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button3" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <Root>
                                            <ext:TreeNode Text="Root" Icon="Folder">
                                                <Nodes>
                                                    <ext:TreeNode Text="Child1" Icon="Folder">
                                                    </ext:TreeNode>
                                                    <ext:TreeNode Text="Child2" Icon="Folder">
                                                    </ext:TreeNode>
                                                    <ext:TreeNode Text="Child3" Icon="Folder">
                                                    </ext:TreeNode>
                                                    <ext:TreeNode Text="Child4" Icon="Folder">
                                                    </ext:TreeNode>
                                                    <ext:TreeNode Text="Child5" Icon="Folder">
                                                    </ext:TreeNode>
                                                </Nodes>
                                            </ext:TreeNode>
                                        </Root>
                                    </ext:TreePanel>
                                </West>
                                <Center>
                                    <ext:GridPanel runat="server" ID="grid" Title="Users" Icon="User" StoreID="store">
                                        <TopBar>
                                            <ext:Toolbar ID="Toolbar2" runat="server">
                                                <Items>
                                                    <ext:Button ID="Button11" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button4" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button5" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button6" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button7" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button8" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button9" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                    <ext:Button ID="Button10" runat="server" Text="Save" Icon="Disk" Handler="btnClick">
                                                    </ext:Button>
                                                </Items>
                                            </ext:Toolbar>
                                        </TopBar>
                                        <ColumnModel>
                                            <Columns>
                                                <ext:RowNumbererColumn Fixed="true">
                                                </ext:RowNumbererColumn>
                                                <ext:Column DataIndex="FirstName" Header="First Name">
                                                </ext:Column>
                                                <ext:Column DataIndex="LastName" Header="Last Name">
                                                </ext:Column>
                                                <ext:Column DataIndex="Department" Header="Department">
                                                </ext:Column>
                                                <ext:Column DataIndex="Age" Header="Age">
                                                </ext:Column>
                                            </Columns>
                                        </ColumnModel>
                                        <View>
                                            <ext:GridView ForceFit="true">
                                            </ext:GridView>
                                        </View>
                                        <SelectionModel>
                                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
                                            </ext:RowSelectionModel>
                                        </SelectionModel>
                                        <BottomBar>
                                            <ext:PagingToolbar ID="PagingToolbar1" runat="server" StoreID="store" PageSize="25">
                                            </ext:PagingToolbar>
                                        </BottomBar>
                                    </ext:GridPanel>
                                </Center>
                            </ext:BorderLayout>
                        </Content>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Content>
    </ext:Viewport>
    </form>
</body>
</html>
  6. #6
    Oct 22, 2009, 6:21 PM

    RE: [CLOSED] [1.0] Client rendering performance twice as slow

    Hi Jacky,

    Thanks for the tests. We're reproducing similar results.


    We're investigating and will post an update shortly.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  7. #7
    Oct 22, 2009, 7:55 PM

    RE: [CLOSED] [1.0] Client rendering performance twice as slow

    Thanks for looking into this. There are many threads on ExtJS forum about slowness with ExtJS 3.0. I was afraid v1.0 will inherit that...
  8. #8
    Oct 22, 2009, 8:02 PM

    RE: [CLOSED] [1.0] Client rendering performance twice as slow

    Hi,

    Just in case, I found that if set EnableOverflow="false" for Toolbar it decrease rendering time (slightly but...)
    Also we removed OnBeforeClientInit from ViewportBase (not required anymore and it is decrease rendering time also)


    Continue investigation


    P.S. Toolbar and Menu have own layout now (in ExtJS 3.0) therefore they render longer then in 2.3
  9. #9
    Oct 26, 2009, 1:00 PM

    RE: [CLOSED] [1.0] Client rendering performance twice as slow

    We committed a few minor tweaks which sped up the rendering a bit, although more work and research is required.

    There does appear to be some changes from ExtJS 2.x vs 3.0 which has caused some rendering performance degradation. Maybe related to the layout logic, although that's more speculation on my part at this point.


    This is a high priority issue for us and we're certainly hoping to implement further improvements before the final v1.0 release.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  10. #10
    Nov 17, 2009, 2:49 AM

    RE: [CLOSED] [1.0] Client rendering performance twice as slow

    Just a quick update... we know of some more performance/rendering work that has been added to extjs recently to help with garbage collection and caching. We're running some tests.

    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Slow performance in rendering toolbar with button group & buttons
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 29, 2012, 11:26 AM
  2. Slow rendering of Ext JS
    By westerncape1000 in forum 1.x Help
    Replies: 1
    Last Post: Sep 13, 2011, 9:43 AM
  3. VS 2008 Slow Performance - Hotfix
    By shankar in forum Open Discussions
    Replies: 0
    Last Post: Jul 25, 2010, 9:33 PM
  4. [CLOSED] HTMLEditor slow performance
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 25, 2009, 2:42 PM
  5. [CLOSED] Slow performance of preselected remote ComboBox?
    By macap in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jul 02, 2009, 6:51 AM

Posting Permissions