Microsoft GCR CSS Ready to show Presentation

-- Lance Zhang

TECH TOPIC

ASP.NET AJAX Performance Improvement

AJAX OVERVIEW

AJAX (asynchronous JavaScript and XML), is a group of interrelated web development techniques used for creating interactive web applications or rich Internet applications.

AJAX FRAMEWORKS

There are more than 100 popular AJAX Frameworks

1.dojo 2.Rico 3.qooxdoo 4.tibet 5.Flash/JavaScript Inte-gration kit 6.Google AJAXSLT 7.libXmlRequest 8.RSLite 9.SACK 10.sarrisa11.XHConn12.CPAINT13.Sajax14.JSON/JSON-RPC15.Direct Web Remoting16.SWATO17.Java BluePrints18.Ajax.Net19.Atlas20.Ruby on Rails21.AFLAX 22.AjaxAC23.AJAXExtended24.Ajax.NET Professional25.AjaxRequest Library26.AHAH: Asychronous HTML and HTTP27.Bajax28.Code Snippets

29.Cross-Browser.com30.DHTML API, Drag & Drop for Images and Lay-ers31.DHTMLgoodies.com32.DHTML Kitchen33.dp.SyntaxHighlighter34.Dynamic Drive35.DynAPI36.Ext JS (javascript li-brary)37.Engine for Web Appli-cations38.FACE39.JSL : JavaScript Stan-dard Library40.Javascript Toolbox41.jQuery - New Wave Javascript42.JSAN - JavaScript Ar-chive Network43.JSFBGL - Javascript framebuffer graphics li-brary44.Kabuki AJAX Toolkit45.LINB(Lazy INternet and Browser)46.liberty47.MochiKit48.moo.ajax49.moo.fx50.overLIB

51.overLIB52.overlibmws DHTML Popup Library53.Plex Toolkit54.PlotKit - Javascript Chart Plotting55.Prototype56.qForms JavaScript API57.sardalya58.script.aculo.us59.JonDesign’s Smooth SlideShow Library60.Spry Framework for Ajax61.Tabtastic62.Taconite63.Tacos64.The Solvent65.ThyApi66.TwinHelix67.TurboWidgets68.UIZE JavaScript API69.High Performance JavaScript Vector Graph-ics Library71.WMS Javascript Li-brary72.Yahoo Design Pattern Library73.Yahoo! User Interface Library

74.Yahoo! UI Library75.Zapatec AJAX Suite76.Zebda77.Zephyr78.ZK79.Backbase80.Mootools81.Clean AJAX82.Wt83.Echo84.Google Web Toolkit85.ThinWire86.Symfony87.Tigermouse88.Xajax89.AjaxAnywhere90. ajaxCFC91.AjaxTags component of Java Web Parts92.AJS93.Anaa94.DotNetRemoting Rich Web Client SDK for AS-P.NET95.Fleegix.js96.JsHttpRequest97.JSON-RPC-JAVA98.Rialto99.Scriptaculous100.SmartClient from Isomorphic Software

101.TIBCO General Inter-face 102.Visual WebGui103.xWire104.WebORB105.Zimbra106.Bling!107.Behaviour108.WZ_DradDrop109.WZ_jsGraphics110.Nifty Corners111.TOXIC112.DOM-Drag113.AJFORM114.AJAXGear Toolkit115.Interactive Website Framework116.JSPkg117.Ajaxcaller118.XOAD119.PAJAJ120.PEAR: HTML_AJAX121.Flexible AJAX122.FlashObject123.OSFlash - Flashjs124.jWic125.JSMX126.DreamFace Interac-tive127. DOMAssistant128.JavaScriptMVC

ASP.NET AJAX; 73.7

AJAX Control Toolkit; 49.6

Ajax.NET; 13.3

radControls; 11.7

Prototype; 11.5

Raw Ajax; 11.3

Script.acu-lo.us; 9.7

Ext JS; 6.1Yahoo! UI; 5.5 Infragistics; 4.9

Performance Issues ?

Experiment Page

Performance Analysis HttpWatch to show the network traffic.

ScriptReferenceProfiler to show the JavaScript reference.

The Network Traffic

The JavaScript References

ScriptReferenceProfiler http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=13356

Optimization in Web.configCache

Compress

Best Practice

in Web.confi

g

Enable The Caching

Enable The Compression

Optimization in ScriptManager

Best Practice in ScriptMan

ager

EnablePartialRendering

LoadScriptBeforeUIScript Mode

ScriptMode

Scott Guthrie‘s post：Don’t leave the <compilation debug=”true”/>

It will cause:囧 The compilation of ASP.NET pages takes longer囧 Code can execute slower囧 Much more memory is used within the

application at runtime 囧 Scripts and images downloaded from the

WebResources.axd handler are not cached

EnablePartialRendering EnablePartialRendering: It gets or sets a value that enables

partial rendering of a page, which in turn enables you to update regions of the page individually by using UpdatePanel controls.

will be16

LoadScriptBeforeUI

Moving ASP.NET AJAX scripts after visible content

Script D

Script Combination

Build up into one

Script C

Script AScript B

ToolkitScriptManager

CompositeScript

ASP.NET 3.5 with SP1

Summary

Web.config

• Cache• Compress

ScriptManager

• ScriptMode• EnablePartial

Rendering • LoadScriptBef

oreUI

Script Combinatio

n

• ToolkitScriptManager

• CompositeScript

Thank you!&

Questions?