You are on page 1of 35

Performance Tune

your Ajax
Applications

The Ajax Experience 2007
Bob Buffone

Agenda

• Introduction
• Performance Tuning
– Startup Time
– Runtime

• Metrics
• jsLex

Introduction

• Name: Bob Buffone
• Company: Nexaweb Technologies,
Inc.
• Position: Chief Architect
• Other Projects:
– Apache XAP (committer)
– Random Mashups
– jsLex
– Just like to make things small and fast

Startup Time • # of Requests • Size of Requests • Time of Requests • Time of initial code completion .

Reducing # of Requests • Highly important for applications that use lots of JavaScript files. – Even when cached the browser still makes a request .

js = Concatenation file_a.js file_b.js + file_b.js .Tips to Reduce # of Requests • Condense files into one or more larger files – Runtime – Development file_a.js file_c.

js = Ruby file_a.js + file_b. file_a.js file_b.js .js PHP/JSP/ File_c.Tips to Reduce # of Requests • Server-side code combines files based on a request.

 Can be mitigated with caching – Hard to distribute code to other people • Where it could be used: – Small single projects .Server-side Concatenation • Pluses: – Easy depending on your server tier – Easy to update code • Minuses: – Performance load on server.

php”> </script> function combineFile($file){ $handle = fopen($file. combineFile(“file_b. if ($handle != null){ echo fread($handle.js"). . filesize($file)).js"). } } //combine files combineFile(“file_a.Tips to Reduce # of Requests • PHP Example: • <script src=“combiner. "r").

Tips to Reduce # of Requests • Development and Build Processes – Dojo – Ant – Command line scripts file_a.js Ant / file_c.js file_b.js+file_b.js = Dojo file_a.js .

Dojo Advantages / Disadvantages • Pluses: – Not server load issues – Easy to update code – Dependency based • Minuses: – More Complicated (Ant. Rhino. …) – Hard to distribute code to other people – Need to change files • Where it could be used: – Medium to Large projects .

provide("xap.util.application. Rhino (Custom). … • Profiles – Determines the starting files to trace dependencies.require("xap.Application"). • Incorporate require and provides in your files. Xap.Dojo Packaging Overview • What you will need: – Ant. Xap.com . http://www.dojotoolkit.Exception").

html .js"/> <fileset dir=“extensions" includes=“**/*.js"/> </concat> • Problem – Not dependency based • http://ant.js" force=“yes"> <filelist dir=“core“ files=“file_a.apache.js“ excludes=“file_notneeded.org/manual/CoreTasks/concat.Concat Ant Task Overview <concat destfile=“file_ab.

js Process File_a_smaller.Reducing Size of Requests • Techniques – Remove white space and comments – gZip file_a.js .

Dojo.Removing White Space • Tools – Open source – Packer. … – Share-ware .Safe Compress. ShrinkSafe… • Careful of removing end of lines – Semicolon is optional but needed if you remove the end of line X = “Bob” Process X=“bob”y=10 Y = 10 .

Dojo. Process X=“bob”.Removing White Space • Tools – Open source. … • Careful of removing end of lines – Semicolon is optional but needed if you remove the end of line X = “Bob”. Packer. Y = 10.Safe Compress. .y=10. … – Share-ware .

“for”… Do not need “{}” • Combine var declarations into a single var – var x=1.y=2. • Use JS style object! •… .Coding Style • This can help make code much smaller • Single line “if”.

Gzip Compression • Pluses – Dramatically reduces size of file  330KB to 70KB – Simple to do  Lots of gzip tools • Minuses – Lots of browser caveats .

1 and must specify that it supports gzip • Script tag must be between the HEADER tags in the HTML (solves IE bug with compressed JavaScript) • Some client side and/or server code will be needed to detect the user agent and request the appropriate script file -. this requires web server configuration changes in most cases • Browser must request HTTP 1.most web servers support this .Gzip Compression Caveats • Content-Encoding must be gzip and Content- Type must be application/x-javascript.

Other Items • Minimize the code that is executed at startup • Bring back data once screen is complete • Loading images – Lets users know something is going on – Distracts the user from the time it is taking .

Runtime Performance • High level – Minimize the code – use the native facilities • Lower Level – XML Parsing – DOM Searching – DOM Creation – If statement optimization .

XML Parsing • Don’t Write your own parser! – Tried it in XAP: 10 – 100x slower than native parsers • Use the Native Parser – Encapsulated differences using Parser Factory  Does parsing  Normalizes DOM • No native xPath .

Parser Differences • Creating Parsers – IE: nativeDoc=new ActiveXObject("Microsoft. • Error Handling – IE: check error code – Mozilla: check returned document  Error document • White space .XMLDOM"). – Mozilla: parser=new DOMParser().

innerHTML = “<table><tr><td>New Table</td><tr></table>”. document. .getElementById(“myDiv”). • Minuses – Code gets messy quickly when doing more complicate snippets of HTML.DOM Creation – innerHTML • Pluses – Fast – Code can be small.

join("\n"). html[html. html[html.innerHTML = html.length] = “My cell text”. html[html. . html[html.length] = "<table>".DOM Creation – innerHTML • How YUI Does It html[html.length] = "</td>“ … domObject.length] = "<td>“.length] = "<tr>".

createElement(“td”).appendChild(td). var tr = document.createElement(“tr”). table.DOM Creation – Tail Recursion • Create DOM Objects var table = document. • Append in reverse order tr.appendChild(tr). var td = document. .appendChild(table). onScreenElement.createElement(“table”).

Searching Dom Operations • Use native – getElementById() – getElementsByTagName() • Avoid complete DOM traversals • toolkits – Prototype – jQuery .

Let’s Look at some low level JavaScript • Compare low level calls between browser • Compare different way of doing things – Getter/Setter vs direct property access – For loop structure – innerHTML vs appendChild .

• Pluses – Quick and easy • Minuses – You need to know where the problem is – You need to change code . alert(after – before). //Do something that takes awhile var after = new Date().Finding Bottlenecks • By Hand var before = new Date().

jsLex Performance Tool • Systematically Injects profile code – Ant task – Modified Mozilla Rhino engine • Pluses – Don’t need to change your code – Metrics complete code base – Don’t need to know where the bottleneck is .

jsLex Performance Tool - Continued • Pluses – GUI console to look through the stats – Save stats – Compare stats – Stack Traces • Minuses – Will need to change the starting file – Adding Metric causes probing effect – Can slow code considerably – Multi-step Workflow .

Inject metric code into JavaScript files – Creates function mapping file 2.jsLex Workflow 1. Modify your HTML page to include jsLex 3. Open mapping file 5. Click Snapshot . Run Page 4.

Demo .

Questions? .

apache.com • Upcoming Webinar – November 20th 2pm EST go to nexaweb.com – http://incubator.Thank You! • For more information go to – http://www.rockstarapps.com to sign up.nexaweb.org/xap • Home of jsLex – http://www. .