rad controls for asp.net ajax performance whitepaper

13
www.telerik.com 1 How Telerik’s ASP.NET AJAX Controls Help You Build High-Performing Applications Faster Contents Optimization Techniques Utilized in RadControls for ASP.NET AJAX 2 Content Delivery Network (CDN) Support 2 HTTP Compression with RadCompression 2 Performance Optimization Helper Controls 2 Rich Client-side Capabilities 3 Flexible Semantic Rendering 3 CSS Sprites for Minimal HTML Footprint 3 Control-specific Optimization Techniques 4 Grid 4 Editor 6 Scheduler 8 TreeView 10 Combobox 11 Menu 12 TabStrip 12 ToolTip 12 Splitter 12 Calendar 13 Input 13 Additional Performance Optimization Resources 13

Upload: ufuk-yalcin

Post on 21-Apr-2015

322 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Rad Controls for ASP.net AJAX Performance Whitepaper

www.telerik.com1

How Telerik’s

ASP.NET AJAX Controls Help You Build High-Performing Applications Faster

Contents

Optimization Techniques Utilized in RadControls for ASP.NET AJAX 2• ContentDeliveryNetwork(CDN)Support 2

• HTTPCompressionwithRadCompression 2

• PerformanceOptimizationHelperControls 2

• RichClient-sideCapabilities 3

• FlexibleSemanticRendering 3

• CSSSpritesforMinimalHTMLFootprint 3

Control-specific Optimization Techniques 4• Grid 4

• Editor 6

• Scheduler 8

• TreeView 10

• Combobox 11

• Menu 12

• TabStrip 12

• ToolTip 12

• Splitter 12

• Calendar 13

• Input 13

Additional Performance Optimization Resources 13

Page 2: Rad Controls for ASP.net AJAX Performance Whitepaper

www.telerik.com2

Optimization Techniques Utilized in Rad-Controls for ASP.NET AJAXAtTelerik,weknowthatclaimsaboutoffering“thefastest”,“therichest”or“themostcomplete”componentsuitemeannothingwithoutfactstobackthemup.ThisiswhywehaveassembledahostoffactsanddataabouttheoptimizationtechniquesutilizedinRadControlsforASP.NETAJAXtoactuallyshowyoutheyarethefastest,therichest,andthemostcomplete.NETUIcomponentsonthemarket.

ThefactsbelowexplainspecificwaysyoucanoptimizetheperformanceofyourapplicationsbuiltwithTelerik’sRadCon-trolsforASP.NETAJAXandhowweareattackingtheperformanceissuesformanyofourkeycontrols.

• Content Delivery Network (CDN) SupportTelerik’sCDNishostedontheAmazonCloudFrontservice,aglobalcontentdeliveryserviceusedtocacheanddeliveralltypesofcontent,includingimages,videos,CSSandJavaScriptfiles.ThiswayifyourappisbuiltwithRadControlsforASP.NETAJAX,itsclientrequestswillautomaticallyberedirectedtothenearestserverasopposedtothecentralwebserverandwillbeabletomorequicklyretrieveanddownloaditscontent.Whatismore,Telerikcoversthehostingexpensesforyourapp’sresourcesstoredontheCDN.

• HTTP Compression with RadCompressionRadControlsallowyoutoachievelesstrafficandfasterpageloadforyourappcompletelycodelesslythankstoitsHttp-Module,RadCompression. Inotherwords,RadCompressionwill interceptthebitsthatyourserver issendingbacktoabrowser(orSilverlight-client,forthatmatter)andcompressthem.Oncethecompressedbitsreachthebrowser,standardbrowsertechnologytakes-overanddecompressestheresponsesoyourapplicationcanworkwithitnormally.Thecom-pressionprocessiscompletelytransparenttoyourclient-sidecode(JavaScriptorSilverlight)andyourserver-sidecode.Itsimplyreducesthenumberofbitsthatmustbesentoverthewire(fromyourservertoyourclient)andthusimprovesyourpageperformancebyreducingtheTTLB(timetolastbyte)toupto75%.Readthefullarticleandseetestresults»

• Performance Optimization Helper ControlsTelerik’sASP.NETAJAXsuiteshipswithseveralcomponentsengineeredtosignificantly improveyourTelerik-basedap-plication’sperformance.

• RadScriptManager and RadStyleSheetManager Sincethenumberofrequestsapagegeneratesuponinitialloadisoneofthemostcommonperformancebottlenecks,TelerikhasdevisedtheRadScriptManagerandRadStyleSheetManagercontrolstohelpyoucombineallJavaScriptandCSSrequeststotheserverintoasinglerequest,thusgreatlyimprovingtheoverallpageloadtime.ReadthefullarticleforacompleteanalysisofhowtheRadManagersimpactpageperformance»

• RadInputManager TheRadInputManagercontrolisaninputvalidationcontrolprovidingyourenduserswithreal-timefeedbackaboutthetexttheyhaveentered.RadInputManageristhebestchoicefortopperformanceandhighly-optimizedpagesforafewsimplereasons:itreducesthebytessentoverthewireandhasabettercachingstory,itismuchfastertoconfigurethantraditionalASP.NETvalidationcontrolsanditimprovesoverallpageloadperformance.ReadthefullarticleforacompleteanalysisofhowtheRadInputManagerimpactpageperformance»

Page 3: Rad Controls for ASP.net AJAX Performance Whitepaper

www.telerik.com3

• RadAjaxManager: TheTelerikAjaxManagercontroloffersacompletelycodelessapproachforAJAX-enablingexistingornewwebapplica-tions,usingMicrosoftASP.NETAJAXengine.First,youdon’thavetoclutteryourmarkupwiththeUpdatePanelsnormallyrequiredbyASP.NETAJAX,makingyourcodeeasiertomaintainandread.Next,youdon’thavetomanuallythinkthroughhowTriggersshouldbedefinedonyourUpdatePanels.TheRadAjaxManagerautomaticallyfiguresthatoutbasedonyoursimpledefinitionthecontrolsthatshouldbeupdatedafterspecificcontroleventsfire.Andfinally,RadAjaxManagerpro-videsacompleteclient-sideAPIthatmakesiteasytoperformadvancedASP.NETAJAXoperationswithouthavingtowritealotJavaScriptmanually.Readhowitworks»

• Rich Client-side CapabilitiesRadControlsforASP.NETAJAXallowdeveloperstofullyleveragethewidelysupportedclient-orientedprogrammingoftheASP.NETAJAXframework.Thecontrolsofferversatileclient-sidefeatureswhichcanbeimmediatelypersistedontheserver.Createclient-sidescriptsthatmodifythecontrolsontheclientandhavethechangesbereflectedwhenaccessingthesamecontrolsontheserver.ThatmeansthecontrolscanuseJavaScripttorendertheirUIinthebrowser,reducingtripstotheserverandspeeding-upyourapplication’sperformance.

Additionally,RadControlsexposeanumberofpowerfuldatabindingandcachingtechniquesfortakingfullcontroloverperformance,lightweightJSONtraffics,aswellascompletesupportforViewState-lessoperation.TheintegratedjQuerylibraryisalsoanimportantelementofourclient-sidedatabindingandweuseitforadvancedcallingofPageMethodsandWebServices.Checkoutthefollowingblogspostsandexamplesformoredetails.

• OptimizingViewStateusage

• RadGrid’sClient-sidedatabindinghelptopic

• RadGrid.NET3.5Client-sideBindingdemo

• jQueryIntegration

• Gridclient-sidedata-bindingperformancewith1mil.Records

• Flexible Semantic RenderingTheTelerikASP.NETAJAXnavigationcomponentsuseadvancedCSSrenderingwithlistitemsratherthanHTMLtablesinordertokeepthepageoutputcleanandminimal.Thesemanticrenderingnotonlyimprovestheresponsivenessofyourapplications,butitalsomakesyourwebpagesmoreeasilyunderstandablebyscreenreadersandthusincreasesitsacces-sibilitytovisuallyimpairedusers.There’sanotherbenefitcomingfromthesemanticmarkupofourUIcontrols–theHTMLismuchmoresearchengine(SEO)friendly.

• CSS Sprites for Minimal HTML FootprintWhatisoneofthemostcommonbottlenecksthathurtwebpages’loadperformance?It’sconcurrentconnectionstothewebserver.Modernbrowserscanonlydownloadahandfulof itemsfromthesamedomainatonetime,whichmeanspageswithtonsofimages,CSSfiles,andJavaScriptfilestakeanexceptionallylongtimetodownload-notbecauseofthebits,butbecauseoftheconnectionlimit.TelerikRadControlsforASP.NETAJAXuseCSSspritestocombinenumerousim-agesintoone,sothatyouhaveonlyonerequesttotheserver.ThentherelevantpartofthespriteimageisdisplayedusingCSS.Thisdecreasespageloadtimebetween20-60%.Readfulldetails»

Page 4: Rad Controls for ASP.net AJAX Performance Whitepaper

www.telerik.com4

Control-specific Optimization Techniques • RadGridWhenpickingagridcontrol,it’simportanttofocusonfeatures,easeofconfiguration,pageloadtime,performancewithlargedatasets,andsupportforadvancedoptimizationtechniques.Let’sseehowRadGridaddresseseachoftheserequire-ments.

FeaturesRadGridhashundredsofbuilt-infeaturesspanningeverythingfrompop-updataeditingandfilteringtoclient-sidecol-umnreorderingandanumberofbuilt-inskins.YoucancontrolalmostallfeaturesbysettingsimplepropertiesandthankstotherichvisualconfiguratorsandSmartTagsinVisualStudio,thissetuptaskiseveneasier.Telerik’sonlinedemoshigh-lightmanyoftheGrid’sfeaturesandprovidethecompletesourcecodeforthem,sothatyoucanseeforyourselfthatthereisnomagichappening“behindthecurtain”.

SeeRadGridfeaturesinaction»

ReadaboutRadGridperformancetipsandtricks»

Page Load PerformanceGoodfeaturesaren’tgoodenoughtomakeagridgreat.Theyneedtoloadquicklyandimprovetheuserexperienceratherthaninterruptingit.ExactlyforthisreasonRadGridisbuiltinaway,sothatitstotalJavaScriptpayloadforallfeaturesisassmallaspossible–it’sonly174KB.RadGridalsoleveragesCSSandspritestominimizeitsHTMLfootprintandtoreducethenumberofrequeststheGridrequirestoload.Infact,RadGridrendersthesmallestHTMLfootprintandgeneratesthesmallestnumberofrequestcomparedtoanyothercommercialdatagrid.

Handling Large Data SetsGridsneedtobeabletohandlelargeamountsofdataontheweb.Telerik’sRadGridisoptimizedforthesescenarios.In.NET2.0scenariosRadGridforASP.NETAJAXisoptimizedtoload,page,sort,andfilterupto100,000recordswithoutper-formanceproblems.In.NET3.5scenarios,though,thecontrolautomaticallystartsusingLINQ-basedtechniquestoeasilyhandle1millionrecords.

SeeRadGridlarge

dataprocessing

inaction»

Page 5: Rad Controls for ASP.net AJAX Performance Whitepaper

www.telerik.com5

Advanced Optimization TechniquesThereisalwaysatrade-offbetweentheeaseofuseofaUIcomponentanditsperformanceoptimization.Thekeyistofindacomponentthatmakesiteasytoaddadvancedperformanceoptimizationswhenyouneedthem.RadGridexposesanumberoftechniquesfortakingfullcontroloverperformance,suchaspowerfulclient-sidedatabindingandcompletesupportforViewState-lessoperation.Withclient-sidebinding,forexample,RadGridcanpage,sort,andfilterdatawithnearclient-likeresponsiveness.

SeeRadGridvirtualscrollingwithclientbindinginaction»

SeeRadGridclient-sidedatabindinginaction»

SeeRadGridViewStateoptimizationtechniques»

RadGridClient-sideBindingandCaching»

AccessibilityPeopleoftenforgettheimportanceofaccessibilityinwebdevelopment.Ifyouarebuildingapplicationsforlargeenter-prisesorgovernments,though,youcan’taffordnottoaddressit.RadGridisfullycompliantwithSection508accessibilityguidelines,whichmeansitcanevenbeaccessedbyclientsthatdon’thaveJavaScriptenabled!Whilemanygridsclaimtobeaccessible,fewtrulytaketheaccessibilitysupportasfarasRadGrid.

Page 6: Rad Controls for ASP.net AJAX Performance Whitepaper

www.telerik.com6

SeeRadGridrunninginnoJavaScriptmode»

RadGrid By the NumbersThefollowingnumbersareresultsofatestperformedonasimplepagewithRadGridusingdefaultsettingsboundtoaLinqDataSourcewithaquerythatreturns1,000,000records,eachwith5columns.

RadGrid for ASP.NET AJAX

Avg. load time JavaScript size

63ms 74KB

• RadEditorAmongthemostimportantcriteriaforpickingarichtexteditorforthewebarerichnessandpageloadtime.Italsohelpstofindaneditorthathasprovenitselfinthe“realworld”andsinceTelerik’sRadEditoristhepreferredchoiceofMicrosoft’sMSDN,CodePlex,andSharePointteams,wethinkyou’llagreeyou’reingoodcompany.

Page Load TimeTelerik’sEditorforASP.NETAJAXisoneoftherichestandfastestloadingrichtexteditorsonthemarket,acombinationyoudon’toftenfind.Whenourengineerssetouttobuildthebestrichtexteditorfortheweb,theyrecognizedthatoneofthemostimportantrequirementsisthatitsupportsasub-secondpageloadtime.Andthat’sexactlywhatyougetwithRadEditorforASP.NETAJAX.

RadEditorloadsonallmajorbrowsersin0.75secondsonaveragethankstotwoveryimportantfeatures:itloadsonlytheJavaScriptforthetoolbarfeaturesusedatthemoment,anditusesCSSspritesforskinning.Furthermore,toolsthatarenotimmediatelyusedbytheEditorautomaticallyemploya“lazyloading”techniquetoensurethateventhemostcomplexoftheEditor’sconfigurationsdonothurtyourpageloadtime.

NeedalotofEditorsonyourpageatonetime(SharePointdevelopers,I’mlookingatyou)?That’susuallyaperformancekillerforrichtexteditors,butRadEditorprovidesoptimizationtechniquesallowingsharingtoolbarsbetweenEditorin-stancesmakingitpossibletohavemorethan20Editorsonapageatonetime.

SeeRadEditoroptimizationtechniquesformanyEditorsononepage»

SeeRadEditorworkwithlargecontentwithoutanyperformanceproblems»

Page 7: Rad Controls for ASP.net AJAX Performance Whitepaper

www.telerik.com7

RichnessThereisnoquestionthatMicrosoftWordisthedefactostandardforwordprocessingonthedesktop.WithRadEditor,yougetacomparablelevelofrichnessinaweb-basedenvironmentandsupportforcomplextexteditinginastandards-based,XHTML-compliantUIcomponent.RadEditorevensupportsmanyofthekeyboardshortcutsWordusersareaccustomedto,makingiteasyforyourend-userstoworkwithRadEditor(read:lesstrainingandcustomersupport).

ItwouldbeimpossibletocapturealloftheEditor’sfeaturesinasimpleparagraph,buthighlightsincludeabuilt-ininlinespellchecker,arichclient-sideandserver-sideextensibilityAPI,abuilt-inimageuploaderandeditor,and(likeallTelerikcontrols)morethanadozen(andhighlyoptimized)CSSskins.Spendsometimewiththeonlinedemostoseeallofthesefeaturesfirsthand.

SeeRadEditorfeaturesinaction»

SeeRadEditoraccessibilityfeatures»

Page 8: Rad Controls for ASP.net AJAX Performance Whitepaper

www.telerik.com8

RadEditor by the NumbersThefollowingnumbersarebasedonasimplepagewithaRadEditorusingdefaultsettingsloadedinInternetExplorer7.

RadGrid for ASP.NET AJAX

Avg. load time 680ms

Number of requests 21Requests(w/oRadManagers)15JSfiles(12forRadEditorandRadWindow,and3forASP.NETAJAX),5CSSfiles(3forRadEditor,2forRadWindow),4imagesfiles(togetherforRadEditorandRadWindow)

JavaScript size VariableRadEditor,RadWindow,RadSpellfilesonly–94.1Kb

• RadSchedulerWhenpickingaschedulercontrol,youshouldlookforonethatloadsquickly,hasarich,interactiveUI,andallowsflexiblebindingtoanytypeofschedulingdatayouhave.

Page Load TimeSimilartoRadEditor,RadSchedulerforASP.NETAJAXonlyloadsthescriptfilesforthefeaturesthatareabsolutelyneces-saryduringtheinitialpageload.Lazyloadingisusedtoloadadditionalscriptsasthey’reneeded,sotheendresultisaveryrichschedulingcomponentthatdoesnotimpactnegativelyyourpage’sinitialloadingtime.RadScheduler’sloadtimealsobenefitsfromthehighlyoptimizedHTMLoutput,ensuringonlythebareminimumHTMLisrenderedsoyourpagesstaylightweightandfast.

SeeRadSchedulerpageloadinginaction»

Page 9: Rad Controls for ASP.net AJAX Performance Whitepaper

www.telerik.com9

Flexible Data BindingOneofthebiggestproblemswithmostweb-basedschedulingcomponentsisthattheyrequireyoutobindtoobjectsordatasourcesthatimplementpre-definedpatternsorinterfaces.Thisisokayfornewprojects,butanabsoluteshowstop-perforexistingdevelopment.Fortunately,withRadSchedulerforASP.NETAJAXyoudon’thavetoworryaboutwhereyourdataisstored.YoucanbindtheSchedulertoanydatasourceorobjectthatcontainsyourschedulingdataandstilltakeadvantageofalloftherichUIfeatureslikedrag-and-dropappointmentsandrecurrence.

RadScheduler supportsWeb Service bindingwhich allows the developer to improve performance byminimizing theHTMLoutputandremovingtheneedofapagerefresh.InthismodeRadSchedulerdoesnotpostbacktothepageandtheappointmentsarerenderedontheclient.

Furthermore,theSchedulerloadsonlytheappointmentsthatare“inview”fromyourdatasource.Thatmeansyouonlyloaddataasit’sneededbytheSchedulerUI,significantlyreducingpotentiallyperformance-crushingqueriestoyourdatasourcefordata.

SeeRadSchedulerWebServicedatabindinginaction»

SeeRadSchedulerWCFWebServicedatabindinginaction»

SeeRadSchedulerdataoptimizationsinaction»

Page 10: Rad Controls for ASP.net AJAX Performance Whitepaper

www.telerik.com10

RadScheduler by the NumbersThefollowingnumberswerecollectedbyloadingadefaultRadScheduleronasimplepage,boundto10appointmentitemsdisplayedinWeekView.ThetestswereconductedinIE7.

RadScheduler for ASP.NET AJAX

Number of requests 420ms

Number of requests 20(w/oRadManagers)

JavaScript size 190KB(Variesbetweenviewtypes)

Whenpickingatreeviewcontrol,themostimportantfactorstoconsiderarerichclient-sidefeaturesandoptimizedperfor-mancewhendealingwithlargenodecollections.

Rich, client-side featuresTreeViewcontrolsareakeyUIconceptinallmajoroperatingsystems,andassuchusers-anddevelopers-haveacertainlevelofexpectationaboutwhatatreeshouldbeabletodo.RadTreeViewrisestothechallengebysupportingalloftherichinteractionsusersexpectfromatreeinastandards-based,XHTML-compliantUIcomponent.Thingslikenodedrag-and-drop(inthesametree,betweentrees,evenbetweentreesandgrids),nodeediting,andnodecontextmenusaresupportedrightoutofthebox.Allofthis,ofcourse,whilerenderinghighlyoptimizedHTMLandloadinglightningfastonthepage.

SeeRadTreeViewclient-sidefeaturesinaction»

Page Load TimeThemostcommonperformanceproblemtreesencounteronthewebisdealingwithlargenodecollections.Telerik’sengi-neersrecognizedthisproblemearlyonandprovidedanumberof“load-on-demand”modestoloadingnodesastheyareneeded.Fortopperformance,developerscanleveragetheRadTreeView’sbuilt-insupportforwebservicesthatenableseasycodelessbindingtofastandefficientservices.Withthisapproach,developerscanloadnodesasneededwithouttransmittingViewStateandwithoutexecutingthefullASP.NETpagelifecycle,meaningnodesloadwithsmall,unnotice-abledelay.

SeeRadTreeViewwebserviceoptimization»

RadTreeView(aswellasmostofourASP.NETAJAXcontrols)renderssomeJavaScriptcodeinJSONformatrequiredtoini-tializethenodes.Atthetimebeingthetextofthenodeisnotserializedinbydefaultwhichsavesalotofoutput.

RadTreeView by the NumbersTocollectthesenumbers,asimplepagewithaRadTreeViewusingdefaultsettingsisboundto1,000nodes(10x10x10),withallsub-nodesloadedondemandviawebservices.TestswereconductedinIE7.

Page 11: Rad Controls for ASP.net AJAX Performance Whitepaper

www.telerik.com11

RadTreeView for ASP.NET AJAX

Avg. Page load time 470ms

Number of requests 23(w/oRadManagers)

JavaScript size 180KB

Time to load sub-nodes 70mspernode

• RadComboBoxCombobox controlsdelivermore functionality than the standardHTML selectorASP.NETDropDownList canprovide,soit’smostimportanttolookforacontrolthatsupportsflexiblerendering,whilenotsignificantlyimpactingpageloadperformance.

Flexible Semantic RenderingMoreoftenthannot,you’llusearichcomboboxcontrollikeRadComboBoxwhenyouneedtorenderadropdownthatsupportsmorethansimplestringvalues.ThatmeansyouneedatoolthatcanrenderanyHTMLyouwantinthedropdownlist-andthat’sexactlywhatRadComboBoxallowsyoutodo.Frommulti-columnsupporttotemplatesupport,anythingyouneedfromadropdowncanberenderedinRadComboBox.

Allthisflexibilitycomespackagedinacontrolthatrenderslightweight,semanticHTMLforoptimumpageperformanceandSEO.RadComboBoxrendersasanunorderedlistintheHTML,whichmeansnonestedtablesareusedtobuildthecontrolsUI(acommondisadvantageofothercomboboxcontrols).

SeeRadComboBoxflexiblerenderinginaction»

Page Load TimeSimilartothetreecontrols,thebiggestproblemcomboboxesfaceishandlinglargecollectionsofvalues.BrowserssimplyhavelimitsonthenumberofHTMLitemstheycanprocessonapagebeforememoryproblemsbegintoseriouslyharmthepageperformance. Tohelpfight those issues,RadComboBox supports severalbuilt-in “load-on-demand”bindingmodesthatenableyoutoonlyloadlistitemsasthey’reneeded.AndjustlikeRadTreeView,RadComboBoxsupportsdirectbindingtowebservicesforsuperoptimized,JSONupdates.It’sstillpossibletohitbrowsermemorylimitswiththeseopti-mizations,butRadComboBoxmakesitmucheasiertoavoidthoseproblemswithsmartloadingofyourdata.

SeeRadComboBoxoptimizedwebservicebinding»

Page 12: Rad Controls for ASP.net AJAX Performance Whitepaper

www.telerik.com12

RadComboBox by the NumbersThenumbersbelowwerecollectedbytestingasimplepagewithaRadComboBoxforASP.NETAJAXboundtoawebser-vicethatreturns500valueswhenthecomboboxisexpanded.TestswereconductedinIE7.

RadTreeView for ASP.NET AJAX

Avg. Page load time 58ms

Number of requests 22(w/oRadManagers)

JavaScript size 188KB

Time to load list values 203ms

• RadMenuRadMenusupportswebserviceloadondemandandlazyinitialization.Additionally,RadMenucanseamlesslyworkwithdisabledViewState.

• RadTabStripHavinglotsofpageviewsinsideRadMultiPagecanslowdowntheswitchingbetweentabs.Whatismore,itgeneratesbigHTMLoutputbecauseofthecontrolscontainedinthepageviews.Totacklethisproblemwehaveanonlineexampledem-onstratinghowtoloadpageviewsondemandviaAJAX.Themultipagealsohasaproperty“RenderSelectedPageOnly”whichdoesexactlywhatitsays.Inthiscaseswitchingtoanewpageviewrequirespostback.

• RadToolTipRadToolTipandRadToolTipManagerarelightweightcontrolswhichgenerallycausenoperformanceproblems.However,intemplatedscenariosthenumberoftooltipcontrolsonthepagecaneasilygooutofhand.Wehaveseenscenariosin-volving1000+tooltipsonasinglepage.Sinceeachofthemneedstobeinitializedonclientpageload,thesystemtakesalotoftimetodoit,especiallyif<compilationdebug=true>.Insuchscenariosthereisabetterapproachtothetooltipsandthatisusingacoupleoflinesofclient-sidecodethatwillcreateatooltiponlywhentheuserneedstoseeit.Thefollowingdemodemonstratesthisapproach.

• RadCalendarRadDatePicker,RadDateTimePickerandRadTimePicker

HavingmanydatepickersonapagemightrendertoomuchHTMLandimpactperformance.RadDatePickerinstancescanshareaRadCalendarcontrolanduseittopickdates.

SeeanexampleofRadDatePickersharingcalendarsinaction»

WhenyouhavemanyRadTimePickerand/orRadDateTimePickercontrolsonapage,thismightrenderlargeamountofHTMLandimpactperformance.Forthiscase,toreducethehtmlandspeeduptheloadingtime,RadTimePicker/RadDate-TimePcikercontrolscanshareaninstanceofTimeViewcontrolforpickingtimes.

SeeanexampleofRadTimePicker/DateTimePickersharingTimeViewsinaction»

Page 13: Rad Controls for ASP.net AJAX Performance Whitepaper

www.telerik.com13

• RadInputRadDateInput,RadNumericInput,RadMaskedTextBoxandRadTextBox

Performanceproblemscanbecausedbyusingseveral instancesofRadInputtextboxes. Incaseyourscenariore-quiresalotoftextboxcontrolsonthepage, it isrecommendedtouseRadInputManagerforbetterperformance.IntegratingRadInputManagerwithRadGrid,forexample,willsignificantlydecreasetheinputeditorsloadingtimesinceplainMicrosoftTextBoxeswillbecreatedinsteadofthecorrespondingRadInputcontrolsandthedataenteredbytheenduserwillbeautomaticallyfilteredbyRadInputManagerbasedontheinputmanagersettings.

SeeRadInputManagerintegrationwithRadGridinaction»

Additional Performance Optimization Resources EverytoolthatTelerikbuildsisdesignedwithperformancemaximizationinmind.Telerik’sdocumentationfeaturesmanyarticlesfocusedspecificallyonhelpingyouoptimizeyourRadControlimplementations.

Formoreoptimizationtips,checkoutthesearticlesfromtheTelerikOptimizationTipsblogseries:

Optimization Tips Series (blog posts):

• TheRadManagersforASP.NETAJAX

• RadCompressionModule

• RadInputvs.RadInputManager

• TestingPagePerformance

• UsingRadAjaxManagerProxyControls

• UsingHTTPCompression

• OptimizingCustomSkins