Question

I’ve an aspx page that renders a programmatically created RadGrid. There are about 15 columns, and just over 1000 rows. It takes about 6-7 seconds from load to finish, out of which only 3 secs are server-side processing. I can definitely optimize this. But the remaining 4 seconds seem to be happening after the client has received the response from the server.

• After my button click, the grid is loaded only after 6-7 seconds.
• But Fiddler shows 2.2 seconds as overall elapsed time.
• I’ve a GIF to show “Loading…” in an AjaxLoadingPanel, and it hangs (doesn’t animate) during the last 4 seconds.

I took a look at Chrome’s timeline, and this is what I see:

• I send the page request at around 2 seconds (Send Request). I start seeing a GIF loading animation.
• At around 4.2 seconds, the GIF animation stops. For the next 3-4 seconds, that’s when you see “XHR Ready State Change” in the timeline.
• At around 8.5 seconds, the GIF animation goes, and my page is loaded completely.
• Fiddler tells me that the page load took 2.2 seconds in all.

Based on this, I’m guessing that the browser is trying to parse and render the page for the last 4 seconds. What do I do now? Can I dig in further to see why?

• There seem to be a lot of “Layout” events coming from various ScriptResource.axd files, these are all generated by Telerik.
• There is also a warning shown against the Layout record that says “Forced synchronous layout is a possible performance bottleneck“. Is this something I can control? Will combining the .axd files into a single file (using a custom HTTP handler?) help in any way?
  

What do these mean? That the Radgrid is emitting too much code for the browser to handle?

1. Paging is turned ON, but customer wants to see at least 1000 records per page.
2. Sorting, paging, row selection, row-right-click menu etc. are all enabled/available.

Thanks for helping, please let me know if you need more information.

Answer 1

I see in your timeline that only 1 sec was used for execution JS code.
The rest of the time was used for layout.
You need to modify the code somehow and reduce the number of places where you force layout.
I think this document could be interesting for you. http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

The other way is to use a viewport schema. As example you need to create rows only for a visible part of the page and use empty divs with necessary size for the invisible parts.
It is common practice that uses when the amount of data is quite big. As example Sources panel works that way and can show a file with 500k lines of code.

The same technique is used in Timeline panel.