Multiple RadHtmlPlaceholder performance issues (Chrome)

[Vladimir]

Hello,

We've been having performance issues and I narrowed it down to the simplest case that reproduces the issue. I simply created a new silverlight 4 project (+web project associated to it) and:

- added reference to Telerik.Windows.Controls
- added the code below to the MainPage.xaml file
- added "<param name="windowless" value="true" />" to the silverlight object in the aspx page, on the web project

When running in Chrome, there's huge performance issues when trying to type in the textbox (try to hold a key down to repeat it, for example). I also noticed one of the cores of my CPU going haywire (close to 100%) whenever I kept a key down. It also happens when it gains focus, etc.

From what I could figure out, the issue is with the JavaScript generated by the RadHtmlPlaceholder on LayoutUpdate, recalculating sizes and whatnot for each of the controls. Also, the less RadHtmlPlaceholders there are, the less noticeable the delay gets.

So, the question obviously is, how can I fix this? I should not that due to the complex application structure, I cannon remove all the RadHtmlPlaceholders to have a single one (where the performance hit would be less noticeable).


MainPage.xaml:

<UserControl x:Class="TelerikTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <StackPanel>
        <TextBox BorderBrush="Blue" BorderThickness="3" Width="100" />
        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadHtmlPlaceholder />
            <telerik:RadHtmlPlaceholder />
            <telerik:RadHtmlPlaceholder />
            <telerik:RadHtmlPlaceholder />
            <telerik:RadHtmlPlaceholder />
            <telerik:RadHtmlPlaceholder />
            <telerik:RadHtmlPlaceholder />
            <telerik:RadHtmlPlaceholder />
            <telerik:RadHtmlPlaceholder />
            <telerik:RadHtmlPlaceholder />
            <telerik:RadHtmlPlaceholder />
            <telerik:RadHtmlPlaceholder />
        </Grid>
    </StackPanel>
</UserControl>

[Vladislav]

Hello Vladimir,

Thank you for this report.
We are aware of these performance issues while using multiple RadHTMLPlaceholders in an application.
Unfortunately we currently don't have a workaround regarding this issue.
We however do not recommend using multiple RadHTMLPlaceholders in a single application because of these limitations.
Can you elaborate a little more on your scenario? Why you need to show so many HTML pages inside a Silverlight application? Do you need to show all of them simultaneously? 

Greetings,
Vladislav
the Telerik team

[Vladimir]

Hello,

Thank you for your reply. The application, at its core, is just a set of 12 applications accessible from a silverlight "gateway". The interface is made from 12 buttons with 12 iframes (RadHTMLPlaceholders). Some applications are html (loaded from various sources), some are silverlight, some even flash.

Each button enables its related iframe (toggles its visibility) and sets the current iframe's visibility to off. What I would like to be able to do is disable the javascript calculations for the frames that are not visible (normally at least 11, sometimes all 12 of them). Is there any way to do this, or can you see some other workaround?


Thank you

[Tina Stancheva]

Hi Vladimir,

In order to get over the performance impact of all these RadHtmlPlaceholders you'll have to unload the controls that you don't use. However, setting the Visibility of the RadHtmlPlaceholders to Collapsed won't unload them. You'll need to either remove them from the visual tree or place them inside a control that will automatically unload its children - thus will unload the RadHtmlPlaceholder. For example if you use a RadWindow control to show the RadHtmlPlaceholders, as soon as you close the RadWindow, the HtmlPlaceholder will be unloaded. Or you can display the 12 HtmlPlaceholders in different TabItems in a RadTabControl. Switching through the RadTabItems (changing the RadTabControl selection) by default will unload the content of the previously selected item and load the content of the next one, every time.

Another approach that you can try is to use only one RadHtmlPlaceholder control and use the buttons to change its SourceUrl property. This way you won't have to deal with the performance impact caused by the usage of a big number of HtmlPlaceholder controls.

Any of the above described solutions should decrease the CPU usage as well as the performance issues you described, so please give them a try and let us know if they help or if we can further assist you.

Regards,
Tina Stancheva
the Telerik team

[Vladimir]

Hello,

Thank you for you reply. I have tried and the performance goes up (still not perfect, but an improvement). However, the RadHtmlPlaceholder doesn't keep its state if you unload it (which is needed if I load a Silverlight or Flash application in it). Is there any way to get around this issue?

Coming back to the main problem, apparently, the JavaScript functions that get called by EACH RadHtmlPlaceholder on every layout update are rather costly, and I would love a way to simply disable that for all but the visible control (or one of my choosing).


Thank you

[Tina Stancheva]

Hi Vladimir,

You can set the RadHtmlPlaceholder.KeepContentInMemory property to True in order to keep the state of the page contained inside the control.

However, I am not sure which approach you chose to improve the performance of the control but if you're unloading all but one RadHtmlPlaceholder, only the one visible RadHtmlPlaceholder should call the Javascript functions used to measure it and render it on the web page. Basically JavaScript functions are called when the RadHtmlPlaceholder is loaded, resized and unloaded. So if you're unloading all but one control, that should minimize the number of JavaScript functions executed by the RadHtmlPlaceholders. Unfortunately at this point we cannot further optimize the behavior of the control when displaying external pages due to the Silverlight framework limitations.

Regards,
Tina Stancheva
the Telerik team