Performance Tune your Ajax Applications. The Ajax Experience 2007 Bob Buffone

Transcription

1 Performance Tune your Ajax Applications The Ajax Experience 2007 Bob Buffone

2 Agenda Introduction Performance Tuning Startup Time Runtime Metrics jslex

3 Introduction Name: Company: Position: Bob Buffone Nexaweb Technologies, Inc. Chief Architect Other Projects: Apache XAP (committer) Random Mashup Facebook Applications

4 Startup Time # of Requests Size of Requests Time of Requests Time of initial code completion

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

6 Tips to Reduce # of Requests Condense files into one or more larger files Runtime Development file_a.js file_b.js Concatenation file_a.js & file_b.js

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

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

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

10 Tips to Reduce # of Requests Development and Build Processes Dojo Ant Command line scripts file_a.js file_b.js Ant / Dojo file_a.js & file_b.js

11 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

12 Dojo Packaging Overview What you will need: Ant, Rhino (Custom), Profiles Determines the starting files to trace dependencies. Incorporate require and provides in your files. Xap.provide("xap.application.Application"); Xap.require("xap.util.Exception");

13 Concat Ant Task Overview <concat destfile= file_ab.js" force= yes"> <filelist dir= core files= file_a.js"/> <fileset dir= extensions" includes= **/*.js excludes= file_notneeded.js"/> </concat> Problem Not dependency based

14 Reducing Size of Requests Techniques Remove white space and comments gzip file_a.js Process File_a_smaller.js

15 Removing White Space Tools Open source, Dojo, 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 Y = 10 Process X= bob y=10

16 Removing White Space Tools Open source, Dojo, Share-ware - Safe Compress, Careful of removing end of lines Semicolon is optional but needed if you remove the end of line X = Bob ; Y = 10; Process X= bob ;y=10;

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

18 Gzip Compression Caveats Content-Encoding must be gzip and Content- Type must be application/x-javascript; this requires web server configuration changes in most cases Browser must request HTTP 1.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 -- most web servers support this

19 Other Items Minimize the code that is executed at startup Bring back data once screen is complete Loading images Lets users no something is going on Distracts the user from the time

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

21 XML Parsing Don t Write your own parser! Tried it in XAP: x slower than native parsers Use the Native Parser Encapsulated differences using Parser Factory Does parsing Normalizes DOM No native xpath

22 Parser Differences Creating Parsers IE: nativedoc=new ActiveXObject("Microsoft.XMLDOM"); Mozilla: parser=new DOMParser(); Error Handling IE: check error code Mozilla: check returned document Error document White space

23 DOM Creation innerhtml Pluses Fast Code can be small. document.getelementbyid( mydiv ).innerhtml = <table><tr><td>new Table</td><tr></table> ; Minuses Code gets messy quickly when doing more complicate snippets of HTML.

24 DOM Creation innerhtml How YUI Does It html[html.length] = "<table>"; html[html.length] = "<tr>"; html[html.length] = "<td> ; html[html.length] = My cell text ; html[html.length] = "</td> domobject.innerhtml = html.join("\n");

25 DOM Creation Tail Recursion Create DOM Objects var table = document.createelement( table ); var tr = document.createelement( tr ); var td = document.createelement( td ); Append in reverse order tr.appendchild(td); table.appendchild(tr); onscreenelement.appendchild(table);

26 Searching Dom Operations Use native getelementbyid() getelementbytagname() Avoid complete DOM traversals toolkits Prototype jquery

27 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

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

29 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

30 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

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

32 Demo

33 Questions?

34 Thank You! For more information go to Home of jslex