analyzing the ajax application performance · 9/30/2008 1 gaurav seth, program manager, microsoft...
TRANSCRIPT
9/30/2008
1
Gaurav Seth, Program Manager, Microsoft
ANALYZING THE AJAX APPLICATION PERFORMANCE
Summary
AJAX subsystems
AJAX Stack for Internet Explorer
Performance Measurement
JScript Profiler
Enhancements in JScript Engine for Internet Explorer 8
Native JSON Support
AJAX SUBSYSTEMSKEY FACTORS THAT IMPACT THE PERFORMANCE
OF AN AJAX APPLICATION
AJAX Subsystems in Internet Explorer
Network
Client Server Response
Asynchronous Data Exchange
NETWORK
CLIENT
INTERNET EXPLORER
AJAX SUBSYSTEM STACK
AJAX Subsystems in Internet Explorer
Network
Parser
Reads
Analyzes
Converts
data (HTML, CSS, XML, etc.) to native object model format
NETWORK
PARSER (CSS/HTML/XML)
CLIENT
INTERNET EXPLORER
AJAX SUBSYSTEM STACK
AJAX Subsystems in Internet Explorer
Network
Parser
Layout
Computes the layout of the various components
NETWORK
PARSER (CSS/HTML/XML)
LAYOUT
CLIENT
INTERNET EXPLORER
AJAX SUBSYSTEM STACK
9/30/2008
2
AJAX Subsystems in Internet Explorer
Network
Parser
Layout
Rendering
Final painting of the page
Any subsequent updates
NETWORK
PARSER (CSS/HTML/XML)
LAYOUT
RENDERING
CLIENT
INTERNET EXPLORER
AJAX SUBSYSTEM STACK
AJAX Subsystems in Internet Explorer
Network
Parser
Layout
Rendering
Native OM (DOM)
Object representation of content
Communication layer
NETWORK
PARSER (CSS/HTML/XML)
LAYOUT
RENDERING NATIVE OM
CLIENT
INTERNET EXPLORER
AJAX SUBSYSTEM STACK
AJAX Subsystems in Internet Explorer
Network
Parser
Layout
Rendering
Native OM (DOM)
JScript Engine
Basic Primitives for language operations
Asynchronous data exchange
NETWORK
PARSER (CSS/HTML/XML)
LAYOUT
RENDERING NATIVE OM
JSCRIPT ENGINE
CLIENT
INTERNET EXPLORER
AJAX SUBSYSTEM STACK
AJAX Subsystems in Internet Explorer
Network
Parser
Layout
Rendering
Native OM (DOM)
JScript Engine
Others
Event and Error Handling
Wait/Idle time
NETWORK
PARSER (CSS/HTML/XML)
LAYOUT
RENDERING NATIVE OM
JSCRIPT ENGINE
OTHERS
CLIENT
INTERNET EXPLORER
AJAX SUBSYSTEM STACK
AJAX Subsystems in Internet Explorer
Network
Parser
Layout
Rendering
Native OM (DOM)
JScript Engine
Others
Misc/OS
Threading
Process handling etc.NETWORK
PARSER (CSS/HTML/XML)
LAYOUT
RENDERING NATIVE OM
JSCRIPT ENGINE
OTHERS
MISC/OS
CLIENT
INTERNET EXPLORER
AJAX SUBSYSTEM STACK
AJAX Subsystem timing across 30 sites
0 1000000 2000000 3000000 4000000 5000000 6000000
msn_foxsports_com
www_aim_com
www_bankofamerica_com
www_bestbuy_com
www_circuitcity_com
www_classmates_com
www_comcast_net
www_craigslist_org
www_dell_com
www_download_com
www_drudgereport_com
www_ebay_com
www_eharmony_com
www_etrade_com
www_expedia_com
www_familysearch_org
www_ford_com
www_foxnews_com
www_hp_com
www_iwon_com
www_jcpenney_com
www_livejournal_com
www_mapquest_com
www_microsoft_com
www_monster_com
www_motorola_com
www_msdn_com
www_gmail_com
www_msn_com
maps_google_com
CPU Subsystem Time (in microsoeconds)
Parsing
Layout
Rendering
Native OM
Marshalling
JScript
Others
9/30/2008
3
PERFORMANCE MEASUREMENTJSCRIPT PROFILER
Source Code Instrumentation
Javascript Profilers
Script Engine Instrumentation
Manual or Automatic
Works for all browsers High profiling
overhead Difficult to handle
dynamic code (eval)
Export profile dataorProvide a callback
Browser specific Relatively lower
overhead Provides more control
Dynamic Code
Built-ins
IE8 JScript Profiler
Uses new profiler API’s introduced in IE8 Beta 2
Profiles JScript code execution
JScript built-in methodsMay be called implicitly
May be called multiple times (recursive)
Easy to use and lightweight No setup required – part of IE8
Single click operation
IE8 JScript Profiler (contd)
Performance data in two views Functions
Call Tree
See multiple reports
Export data to CSV
Preserves data across page navigation / refreshes
Handles anonymous functions Give a inferred name based on a heuristic
logic
IE8 JScript Profiler (contd)
Anonymous functions
The two anonymous functions are named “Area” and “Foo” respectively.
var Shape = {
Area : function (){...}//anonymous function 1
};
Foo = function (){...} //anonymous function 2
JSCRIPT PROFILER DEMO
9/30/2008
4
IE8 JScript Profiler – Internals
Host creates the script engine(s)
Script Engine creates Logger when profiling is enabled
Logger handles Callbacks from the
script engine
Logs performance data
Profiler Core collects and displays the performance report
Host (Internet Explorer)
Script Engine
Logger Profiler Core
IActiveScriptProfilerCallback
IActiveScriptProfilerControl
Profiler GUI
IE8 JScript Profiler API IActiveScriptProfilerControl
Used to start and stop profiling
Methods
StartProfiling
StopProfiling
SetProfilerEventMask
Host (Internet Explorer)
Script Engine
Logger Profiler Core
IActiveScriptProfilerCallback
IActiveScriptProfilerControl
Profiler GUI IActiveScriptProfilerCallback
Handles callbacks from the script engine
Used to log performance data
Methods Initialize
Shutdown
ScriptCompiled
FunctionCompiled
OnFunctionEnter
OnFunctionExit
Documentation and details available on MSDN
ENHANCEMENTS IN JSCRIPT ENGINE NATIVE JSON SUPPORT
Native JSON Support
De-facto wire format
Simple
JScript like syntax
Secure
Avoids eval
Performant
Eval based parsers
XML
Native JSON Support
Based upon ECMAScript “3.1” proposal (as implemented by Douglas Crockford’s json2.js)
How to use it
Global JSON object
JSON.parse
JSON.stringify
Available in all IE8 modes
Speed gains (JScript based implementations)
10x gains in serialization
3x gains in deserialization
(text [, reviver])
(value [, replacer] [, space] )
- remember it’s a built-in
JSON DEMO
9/30/2008
5
Add “TAE” to the subject line
QUESTIONS?
Resources
JScript Blogs http://blogs.msdn.com/jscript
IE Blogs http://blogs.msdn.com/ie
JSON Documentation
• Search MSDN for “JSON” - filter for JScript
JSON - http://www.json.org/
Get IE8 Beta 2 from http://microsoft.com/ie/ie8
Add “TAE” to the subject line
THANK YOU
Your feedback is important to us.
Download IE8 Beta 2, and send us your feedback.