[CLOSED] Rendering performance

[Inoventus]

Hello,

we're trying to optimize a form that takes too long to render. I've produced a significantly stripped down version with no <table> elements and no data initialization, and it still takes about 1.2 seconds to render on IE8 (compatibility mode), please see attachment. The form is not trivial, but there's not that much going on, and this is even a reduced version of the actual thing. Do you have suggestions on how to cut down on rendering time?

The rendering time is output with console.log(), so open Developer Tools (F12) before rendering the form.

This is a reformulation of a previous issue. Thanks in advance, and let me know if there's anything I should add to the question.

[geoffrey.mcgill]

Can you post the html rendered to the page? View > Source.

If you cannot post in public forums, please email to support@object.net.

[geoffrey.mcgill]

IE8 Compatibility Mode is not officially supported. Is there some specific reason why you need to support compat mode?

[Vladimir]

Hi,

What do you think that rendering above 1 sec is the issue? Web UI is not desktop application therefore speed for complex UI can be slower. Each Ext.Net web control creates extra markup in the DOM tree and uses many css styles therefore can be delay during rendering. Also, it depends from user computer (for example, for me rendering under IE8 takes 600ms). And IE8 has slowest javascript engine.

I don't think that if user open the page and rendering takes above the second then the user will be disappointed because loading page and resources can takes much more time then widget rendering (more by token, you use Loading mask therefore a user sees that page is loading).

On your page you use above 200 widgets (also you use grid which is quite heavy for rendering because use big additinal DOM elements and depends from binded data), layouts with additional resize and DOM elements moving logic

IMHO it is normal time rendering for such page for IE (and do not expect performance records from IE8, if time is critical for your application then require to use another browsers (like Chrome) from your customers)

[Inoventus]

The page posted above is a much simplified version of the real form, which takes 3-4 s to render. Add a second of server-side processing, and it becomes unbearable.

What steps would bring the most benefit here? Is it the grids that are expensive? Maybe there's a way to improve performance by disabling grid functionality that we do not need? Should we use something else instead of panels?

[Daniil]

Hi,

We would suggest you to use the following things:

1. TabPanel with DeferredRender=true, see
http://dev.sencha.com/deploy/dev/doc...deferredRender

2. <Items> and Layouts instead of <Content>. A user control can be wrapped in <ext:Container> (or <ext:Panel>) and be placed in <Items> collection.

3. <ext:Container> instead of <ext:Panel> anywhere where possible. It's possible almost anywhere where no header excepting some rare cases.

[Vladimir]

Hi,

Yes, please use all widgets inside layouts (Items collection) and do not use Content. If you need to use user controls then you can place user control inside Content but you have to wrap user control by layout

For example, compare performance of two following samples

<%@ Page Language="C#"  %>
 
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">    
     
    protected void Page_Load(object sender, EventArgs e)
    {
        ResourceManager1.RegisterBeforeClientInitScript("this.startPoint = new Date();");
        ResourceManager1.Listeners.DocumentReady.Handler = "alert('Render time: ' + (new Date() - this.startPoint) + ' ms');";

        this.BuildUI();
    }

    private void BuildUI()
    {
        var tabPanel = new TabPanel { Height = 500, EnableTabScroll = true };
        this.Form.Controls.Add(tabPanel);
        
        for (int i = 0; i < 10; i++)
        {
            var p = new Ext.Net.Panel { Title = "Tab " + i, Layout="form", AutoScroll = true };
            tabPanel.Items.Add(p);

            for (int j = 0; j < 100; j++)
            {
                var t = new TextField { FieldLabel = "Field " + i + "_" + j };
                p.Items.Add(t);
            }
        }
    }
 
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form id="form1" runat="server" onsubmit="return false">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
    </form>
</body>
</html>

<%@ Page Language="C#"  %>
 
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">    
     
    protected void Page_Load(object sender, EventArgs e)
    {
        ResourceManager1.RegisterBeforeClientInitScript("this.startPoint = new Date();");
        ResourceManager1.Listeners.DocumentReady.Handler = "alert('Render time: ' + (new Date() - this.startPoint) + ' ms');";

        this.BuildUI();
    }

    private void BuildUI()
    {
        var tabPanel = new TabPanel { Height = 500, EnableTabScroll = true, DeferredRender = false };
        this.Form.Controls.Add(tabPanel);
        
        for (int i = 0; i < 10; i++)
        {
            var p = new Ext.Net.Panel { Title = "Tab " + i, AutoScroll = true };
            tabPanel.Items.Add(p);

            for (int j = 0; j < 100; j++)
            {
                var t = new TextField { FieldLabel = "Field " + i + "_" + j };
                p.ContentControls.Add(t);
            }
        }
    }
 
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form id="form1" runat="server" onsubmit="return false">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
    </form>
</body>
</html>