Agnostic AJAX: Asynchronous JavaScript and Data Clinton W. Smullen III, Stephanie A. Smullen University of Tennessee at Chattanooga Chattanooga, TN 37403, USA
[email protected],
[email protected] May 7, 2008
Presentation created with Dave Raggett's Slidy
1 of 50
AJAX is Asynchronous JavaScript and XML
Need not use XML as data format for AJAX updates
Study effects of different AJAX data update formats HTML table XML JSON - JavaScript Object Notation CSV – Comma Separated Values GZIP
2 of 50
Effects measured Size of response
Time for JavaScript code in browser
Instruction count executed by browser
3 of 50
Application Existing production application Used Daily Supplies real-time class information from a SIS Returns list of courses meeting specified criteria and additional information Validated XHTML 1.1
4 of 50
5 of 50
Application common elements “Branding” Graphics Navigation items JavaScript for navigation CSS StyleSheet Total 15KB, Linked to HTML page
6 of 50
7 of 50
Page displaying no results 28KB Mostly for the HTML form Plus linked common elements
8 of 50
9 of 50
Application Process HTML form submits to server script Server queries database Results returned to server are XML Server uses XSLT to produce XHTML Sends XHTML result to client
10 of 50
11 of 50
Previous work Comparison of HTML with AJAX Client effects Server effects Service Times Process modelling Selected test set of 122 queries
12 of 50
Response Sizes for 122 queries Size
Min
Median
Max
HTMLf
28 KB
79 KB
2.1 MB
HTML
528 B
46 KB
1.9 MB
HTMLgz 224 B
3 KB
103 KB
XML
214 B
23 KB
972 KB
JSON
31 B
15 KB
663 KB
CSV
11 B
8 KB
375 KB
13 of 50
Size KB for responses for 122 test queries
14 of 50
Byte Transfer Ratio - BTR Measure of effectiveness of data format BTR = (AJAX size/HTML size)*100 Reduction achieved by AJAX compared to HTML BTR = 40% means AJAX is 40% of size of full HTML page Smaller BTR is better Any value less than 100% is a reduction
15 of 50
BTR vs size of full HTML KB
16 of 50
Update size vs corresponding full HTML
17 of 50
Regression Coefficients Slope
Intercept R^2
HTMLgz 0.05
-0.21
0.991
CSV
0.179
-4.98
0.9997
JSON
0.317
-9.04
0.9999
XML
0.464
-13.16
1
HTML
0.888
-24.59
1
18 of 50
Conclusion AJAX update size is Predictable Scalable over a wide range of HTML response sizes
19 of 50
Performance Study Focus just on updating
section of page All other elements ignored Exactly the same for all variants considered
20 of 50
Data produced by application Semantically tabular Simple, regular structure Contains character data No attributes No metadata Dense table Test used same data as production application Only the data format changed
21 of 50
Test queries Selected eight test queries from set of 122
Full HTML response sizes range from 28KB to 380KB
XML response sizes range from 214B to 164KB
22 of 50
AJAX update data formats
HTML
HTMLgz
XML
XMLgz
JSON
JSONgz
CSV
CSVgz
23 of 50
Data adapters written Convert production XML to JSON
Convert production XML to CSV
24 of 50
Responses stored on server Stored responses in correct data format
Not retrieved from live production application
Standardized response data over time
25 of 50
Response Sizes for 8 test queries Size
Min
Median
Max
HTMLf
28 KB
62 KB
380 KB
HTML
528 B
30 KB
313 KB
HTMLgz 224 B
2.3 KB
21 KB
XML
214 B
16 KB
164 KB
XMLgz
181 B
1.6 KB
16 KB
JSON
31 B
10 KB
112 KB
JSONgz
61 B
1.4 KB
15 KB
CSV
11 B
5.7 KB
65 KB
CSVgz
41 B
1.2 KB
13 KB
26 of 50
Conclusions Using AJAX reduces update size Average BTR for AJAX formats: unzipped gzipped HTML
52.0%
3.7%
XML
27.1%
2.7%
JSON
18.4%
2.3%
CSV
10.5%
2.0%
27 of 50
GZIP Size Reductions Reductions to 5 - 40% for same data and format Savings of 95-60% Average over all is 15% of original size Savings of 85% Larger savings in large response sizes
28 of 50
Test Page XHTML page
area JavaScript code
JavaScript code Issues XMLHttpRequest for data Retrieves data stored on server Calls display function to convert data to HTML table Assigns HTML table data to
area
29 of 50
JavaScript code Same code used for every trial Other than display function
Display function used depended on data format Separate HTML, XML, JSON, CSV display functions No GZIP display functions needed
30 of 50
JavaScript code Experimental only Not production quality Little exception handling No data validation No user interface Only synchronous XMLHttpRequest calls
31 of 50
Test JavaScript Code size Code
HTML
XML
JSON
CSV
Display
18
1794
1511
1105
Total
959
2735
2452
2046
Minimalized JavaScript code sizes
32 of 50
Conclusion Code size is not an important factor here
However: Code complexity varies Data format fault tolerance varies
33 of 50
Execution Time JavaScript code execution time in browser Measured time for display function to run All other JavaScript code is the same Used FireFox with Firebug JavaScript Profiler 10 runs for each of 8 queries for each of 8 formats
34 of 50
Average Display Times in MS
35 of 50
Smaller Test Queries Display Times
36 of 50
Larger Test Queries Display Times
37 of 50
Conclusions Display code times all within +/- 11% of HTML Moderate responses 17% difference worst to best Large responses 19% difference worst to best CSV and JSON close together XML, XMLgz slowest Using gz saves average of 1.4% time in browser But more effort elsewhere Additional work underway here
38 of 50
Instruction Counts Pin used to collect instruction counts and thread counts Instrumentation package to collect dynamic data Used to collect total instruction count for task Five runs were made for each test case Average number of instructions analyzed
39 of 50
Task measured Total number of instructions executed: load the Safari (for Windows) browser download test XHTML page and JavaScript from server load page in browser issue XMLHttpRequest to the server retrieve data from server convert AJAX update to HTML table display table on page in
area close the browser
40 of 50
Instruction Counts for AJAX updates
41 of 50
Smallest Queries – Instruction Counts
42 of 50
Largest Queries – Instruction Counts
43 of 50
Conclusions GZIP executed more instructions Every gz worse than all non-gz Average was 14% more Worst case used 21% more
CSV, JSON, XML about the same XML slightly larger
For larger queries XML used more 10% more than CSV 5% more than JSON
Work on ARM processors underway
44 of 50
Which is best? "It depends on what the meaning of the word 'is' is." - Bill Clinton, 1998
45 of 50
"Is best" = Response Size Use AJAX instead of full HTML CSV is smallest JSON is 1.5x – 2x larger than CSV XML is 2.5x – 3x larger than CSV
Always gzip regardless of format Unless number of instructions counts
46 of 50
"Is best" = Code Size All about the same size
Software engineering factors count more than size
47 of 50
"Is best" = Code Time in Browser All are similar
CSV and JSON about the same
XML a bit slower
48 of 50
"Is best" = Instruction Execution Count Best to worst: CSV, JSON, XML, HTML CSVgz, JSONgz, XMLgz, HTMLgz
GZIP always executed more instructions
49 of 50
Comments?
50 of 50
