ASP.NET Ajax in-depth performance analysis
Let's do some ASP.NET runtime analysis on
www.dropthings.com. Those
who don't know what it is, it's an open source start page I made
using ASP.NET Ajax, .NET 3.0 and Linq.
ASP.NET Ajax has a pretty big runtime which consists of Core
Framework, scripts for UpdatePanel, Preview Script required for
Drag & Drop. Additionally I need Ajax Control Toolkit
(ACT). All these add up to a staggering 564 KB of download in 12
script references on the page. The download size mostly depends on
the usage of extenders and Ajax features. A moderate use of
extender results in the following download:
Here’s a simulation of 256kbps internet speed on 200ms
network latency. I use a tool named Charles (
www.xk72.com/charles) to
capture traffic and simulate slow internet speed by throttling data
transfer speed. From the durations, we see almost 20 sec is spent
on downloading the runtime over a 256kbps line!
Let’s explain which script in the above list does what. I
will be identifying the scripts using their file size in order of
their appearance:
- 21.64 KB – Handy script for Postbacks
- 83.38 KB – Microsoft Ajax Core runtime
- 30.16 KB - UpdatePanel, partial update, asynchronous postback
scripts.
- 136.38 KB – Preview version of Ajax which allows Drag
& Drop script
- 36.02 KB – The actual drag & drop script in Preview
library
- 45.25 KB – Ajax Control Toolkit
- 4.08 KB – Timer script
- 140.86 KB – ACT Animation framework
- 18.05 KB – ACT Behavior base implementation. Required for
Behaviors provided in the Ajax Control Toolkit project.
- 16.48 KB – ACT Animation Behavior
- 7.32 KB – My Custom Drag Drop behavior
- 9.73 KB – My Custom Floating Behavior
The total payload for only the runtime is too high to accept
because we cannot make a user wait for 20 sec just to download Ajax
scripts before user can actually start interacting on the page. So,
I took several approaches to reduce the size of the
download:
- Eliminate Preview version of Ajax completely and use ACT for
Drag & Drop
- Use IIS 6 compression to deliver compressed scripts from the
client
- Combine multiple script files into one file
ACT comes with its own DragDropManager which we need for Drag
& Drop. So far I thought of using
Sys.Preview.UI.DragDropManager in the ASP.NET Ajax January CTP. But
just for the DragDropManager, I need to add nearly 180 KB of
scripts for the entire Preview Library runtime. If I use
ACT’s DrgaDropManager, I can get rid of the Preview
runtime.
Without the preview scripts, the scripts downloaded are:
The following downloads are missing here:
- 136.38 KB – Preview version of Ajax which allows Drag
& Drop script
- 36.02 KB – The actual drag & drop script in Preview
library
I saved about 180 KB, nearly 7 sec from total download. So,
user gets to work on the page 7 secs earlier than before.
When I enabled IIS 6 compression, the situation improved
dramatically. Here’s the data transfers when compression is
enabled:
The total download comes down from 448 KB to 163 KB! Total 64%
download bytes reduction! This results in 3 times faster page
download.
The scripts are downloaded in two steps – first the core
runtimes download and then ACT and other scripts download. The
content is displayed after the core runtime is downloaded. So, the
time it takes to show the content on the browser reduces
significantly because now it takes only 50KB to download before
something is visible on the screen compared to 130 KB on
non-compressed mode.
ScriptManager control has
LoadScriptsBeforeUI property which you
can set to “False” in order to postpone several script
downloads after the content is downloaded. This adds the script
references end of the <body> tag. As a result, you see the
content first and then the additional scripts, exteders, ACT
scripts get downloaded and initialized.
<
asp:ScriptManager
ID
="ScriptManager1"
runat
="server"
EnablePartialRendering
="true"
LoadScriptsBeforeUI
="false"
ScriptMode
="Release"
>
...
</
asp:ScriptManager
>
You can explicitly set ScriptMode=false in order to emit release
mode highly optimized Ajax runtime scripts during local
debugging.