telerik perf : before getting rid of it (min screen width : 800px approx) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Generally, comparing telerik controls with the standard ASP controls is a bit like comparing apples to pears – both are types of fruit, but quite different from one another, they offer different things. All I want to clarify is, do not reinvent the wheel and above all, the performance of an application depends on the developer and the logic of the application, not always on the exact controls used … in many scenarios we need to do a li’le more. Telerik does come with some baggage, and that will only get worse if you have to load a bunch of additional tools. I have found that the Rad Controls can do just about many things. I do not neglect a group of developers complaining about telerik controls and trying to avoid its use due to performance hit , may be they’re right but I’d first make sure that I’ve tweaked the controls ( RadGrid etc. ) for best performance, which mostly remain unnoticed. performance & size wise : asp.net default controls are indeed better than telerik, jQuery UI is better than asp.net default controls, html controls are better than jQuery UI, no code on your page is fastest ! |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Myth(s) :
fact(s) :
General :
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Real time validation : Instead using asp.net server side validator controls, try to use real time validation using RadInput or using JavaScript ! Here is the telerik demo that illustrates how. Or if you want to do it JavaScript way, just keep replacing anything non numeric with empty string, regEx is your friend ! For instance, a simple numeric textbox can be got to working w/o telerik as shown below : this would prevent your page from having unnecessary overhead if you’re looking to implement something relatively quite simple. Of course this can also be further optimized by using pure JavaScript if your page is not using jQuery already. jsbin live demo : jsbin.com/ayUhokIl/1 https://gist.github.com/ablaze8/fcf972bbbe1a500c03e715688c1b5ebd |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Web.Config ( 1st myth )
light mode rendering : https://gist.github.com/ablaze8/854b9189d0f02618e9fd1042df991f81 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rad Grid Do :
( 1A ) if possible, don’t load data in view state ( telerik docs ) Managing view state: If you can avoid it, never ever load data in view state. If you bind data using declarative DataSource / setting DataSource and then using databind() after or during page load, all of data is persisted in viewstate. Myth, if I turn off my ViewState my grid would break, the functionality would go out of the window. Truth is, there is also something called Control-Sate (.NET 2.0) and we can never turn off, so this myth is quite far away from the fact, you’d still have lots of functionality. If you can not get the view state smaller, try using custom PageSatePersister. Also telerik you can compress the ViewState (* but might not be the best option). Before we talk further, let’s have a look at this ViewState demo.
… What happened ? What caused the view state to reduce drastically ? If you haven’t noticed in demo, Short Answer : Bind Data in OnPreInit().
Long Answer : (reason) it occurs before ViewState is tracked & restored. Must be fired on every page postback. In other words, you can rebind the data here and once its available, anything has been changed like selected row index, paging etc. can be reapplied to data through ViewState properties after the data has been loaded and before it has been saved and tracked. So, if you load data here, it is not saved in view state & not to mention you can also use caching here so you do not need to fetch data from database on every PostBack ! ( 1B ) Let’s now say that you do not have the option to do so, or you do not want to do so. Next option is, to disable ViewState(s). So for the 2nd screen shot above, my ViewState is 5544 bytes for 13 records, now let’s say that I just want to show the data the grid is read only and if you’re not doing any editing, by setting EnableViewState=”false” and by doing only that for the 2nd image above my view state reduces from 5544 bytes to 304 bytes ! What would you give up by disabling view state ? Let’s consider following scenario :
now for the structure above, even if the RadGrid has disabled ViewState, you still can do filtering, paging, sorting and editing… persistently. Don’t take it my word for it. Now if we reconsider the same page seen earlier ( with added paging, filtering and sorting & editing ) for some good 91 records. Okay so I loaded the RarGrid and 1st of 10 pages ( as now I have paging as one of the enabled features ) and the ViewSate sizes are : 8184, 8140, 8196, 8200, 8200, 8100, 8204, 8124, 8176 & 6068 bytes respectively … so pretty much similar for each page except Page 10, which had one record. I turned off the view state for rad grid and I still can perform all those operations. Page Size 10 records, and guess what, ViewSates are reduced to : 600, 632, 632, 632, 632, 632, 632, 632, 632, &, 632 bytes. For Page Size 20, ViewState size counts changes to : 660 & 664 for rest 4 pages. One little thing : ( 1st myth )
After disabling viewstate : Can I filter data ? Yes. Can I sort my data now ? Oh, Yes. Can I still perform paging ? Why not ? Did filter & sorting persisted when I performed paging on my grid ? Absolutely, yes ! What has gone with ViewState then ? Notice that now if try to edit the record and hit update, with disabled ViewState the value reverts back to original value. In other words, you do not have to worry about disabled viewstate if your grid functions as read-only RadGrid. However you’d certainly require ViewState in RadGrid if your grid needs to perform edit operation.
( 1C ) if you do not want to disable viewstates, at the end of the day last option you’ve left is page state persister, in your browser file. So Now you want to get rid of view state and also want all full functionalists. So with following your ViewState would get compressed and stored somewhere (session). Best of both worlds, but as your view state is not tightly coupled, you might want to make sure caching has no problems with that and other possible consequences.
( 2 ) Shared Column Editors e.g. shared Date Picker. Rad InputManger is quite useful. You can put simple asp:TextBoxes and can manage settings from within RadInputManager to turn asp:TextBox into NumericTextBox, RE Validation. Result: less markup, less initialization code & footprint.
misc :
protected void MyButton_Click(object sender, EventArgs e) { //perform some actions here RadGrid1.DataSource = null; //call the Rebind() method after nullifying the data source RadGrid1.Rebind(); } |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rad Combobox 2nd most commonly used control. You can use the same approach of databinding explained above in the screen shots for Rad Grid. Or ViewState. Your pptions does not end here for RadCombobox. If you’re not doing anything fancy with it You can most certainly add <telerik:RadComboBox ... RenderMode="Lightweight"; ... and you can also make it look a lot like native control by : RenderMode=”Native”. ComboBox – Render Mode : Documentation
Talking in general how do you bind your RadCombobox ? Something like below ? foreach(var cust in Customers) { RadComboBox1.Items.Add(new RadComboBoxItem(cust.Name, cust.ID); } How about this : RadComboBox1.DataSource = Customers; RadComboBox1.DataTextField = "Name"; RadComboBox1.DataValueField = "ID";
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rad Date/Numeric-Input, Rad MaskedTextBox & Rad TextBox Don’t use any until you really have to ! jQuery UI & Ajax Control Toolkit sample site has quite a nice of alternatives here. or try to use asp.net default controls and skinning them. |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rad TreeView |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rad Editor Bad Scenario(s) : Having many editors on the page (10, 20 or even 30. More common in MOSS scenarios). RadEditor for ASP.NET AJAX initializes about 3-4 times faster than the Classic version on the client side. Nonetheless, having 30 instances of the editor is bound to cause a delay. However, this delay can be greatly reduced and brought to almost nothing – by setting a ToolProviderID (so that many editors share the same toolbar and no additional markup is sent on client), as well as set the ToolbarMode property – non default toolbars use lazy initialization and are initialized not when the page loads, but when an editor is first used (e.g. the user clicks in the content area). Loading too much content into the editor (100K and more).This is done very rarely. Problem is inherent. When having to deal with so much content, the browser eats lots of memory to provide for storing the editor states needed by the Undo/Redo, the Undo/Redo itself starts executing slowly due to the huge content. That said – my advise is to follow your instincts. |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Rad TabStip Having lots of page views (inside RadMultiPage) can slow down switching between tabs. Also it generates lots of HTML (because of the controls contained in the pageviews). To tackle this problem we have an online example demonstrating how to load pageviews on demand via AJAX. The multipage also has a property “RenderSelectedPageOnly” which does exactly what it says. In this case switching to a new page view requires postback. RadAjaxManager & RadAjaxPanel |
telerik
some recipes :
1 Comment