Your SlideShare is downloading. ×
Ajax perf
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Ajax perf


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. High Performance Ajax Applications Julien Lecomte
  • 2. Part 1 Developing ForHigh Performance
  • 3. Planning and designing for high performance• Plan for performance from day 1• Work closely with designers and product managers• Understand design rationale• Explain the tradeoffs between design and performance• Offer alternatives and show what is possible (prototype)• Challenge yourself to implement challenging designs (dont just say no)• Help simplify the design and interaction if needed (compromise)
  • 4. Engineering high performance: A few basic rules• Less is more – Don’t do anything unnecessary. – Don’t do anything until it becomes absolutely necessary.• Break the rules – Make compromises and break best practices, but only as a last resort!• Work on improving perceived performance – Users can deal with some reasonable amount of slowness if: • They are informed appropriately that an operation is pending. • The user interface remains reactive at all time. – Cheat whenever you can by first updating the UI and then do the work. • Need to “lock” all or part of the user interface.
  • 5. Measuring performance• Test performance using a setup similar to your users’ environment• Profile your code during development• Automate profiling/performance testing• Keep historical records of how features perform• Consider keeping some (small amount of) profiling code in production
  • 6. Part 2High Performance Page Load
  • 7. Yahoo!s Exceptional Performance rules1. Make Fewer HTTP Requests •• A web page works in 33(sometimes imbricated) stages: A web page works in (sometimes imbricated) stages:2. Use a Content Delivery Network 1) load 1) load3. Add an Expires Header 2) render 2) render4. Gzip Components (including JS!) 3) run 3) run5. Put CSS at the Top •• These rules cover mostly the first stage. These rules cover mostly the first stage.6. Move Scripts to the Bottom7. Avoid CSS Expressions8. Make JavaScript and CSS External9. Reduce DNS Lookups10. Minify JavaScript11. Avoid Redirects12. Remove Duplicate Scripts13. Configure ETags14. Make Ajax CacheableSee for more information.
  • 8. Asset optimization• Minify CSS and JavaScript files: – Use the YUI Compressor [ ] – Stay away from so-called advanced compression schemes - like Packer• Combine CSS and JavaScript files: – At build time [ ] – At run time• Optimize image assets: – PngCrush [ ] – PngOptimizer [ ] – etc.
  • 9. Reduce unminified code size• Loading and parsing HTML, CSS and JavaScript code is costly.• Be concise and write less code.• Make good use of JavaScript libraries.• Consider splitting your large JavaScript files into smaller files (bundles) when the parsing and compilation of the script takes an excessive amount of time (Firefox bug #313967)• Load code (HTML, CSS and JavaScript) on demand (a.k.a “lazy loading”) – See – Use the YUI Loader – Dojos package system – JSAN Import System
  • 10. Optimize initial rendering (1/4) Miscellaneous tips...• Consider rendering the first view on the server: – Be aware of the added page weight – You will still need to attach event handlers once the DOM is ready• Close Your HTML Tags to Speed Up Parsing: – Implicitly closed tags add cost to HTML parsing –• Consider flushing the apache buffer very early on: – The download of external CSS files (should be at the top of the page!) may get a head start. – May not influence the rendering speed however. Browsers buffer their input before displaying it.• Load only essential assets / load assets on a delay or on demand – Use the YUI Image Loader
  • 11. Optimize initial rendering (2/4) Don’t always wait for onload...• Most DOM operations can be accomplished before the onload event has fired.• If you have control over where your code is going to be inserted in the page, write your init code in a <script> block located right before the closing </body> tag.• Otherwise, use the YUI Event utility’s onDOMReady method: YAHOO.util.Event.onDOMReady(function () {{ YAHOO.util.Event.onDOMReady(function () // Do something here... // Do something here... // e.g., attach event handlers. // e.g., attach event handlers. }); });
  • 12. Optimize initial rendering (3/4) Post-load script loading• A well designed site should be fully functional, even without JavaScript enabled.• Therefore, you may be able to load scripts on a delay.• Doing so benefits the loading of other assets (style sheets, images, etc.)• Which makes your site load faster• Right before the closing </body> tag, insert the following: <script> <script> window.onload == function () {{ window.onload function () var script == document.createElement("script"); var script document.createElement("script"); script.src == ...; script.src ...; document.body.appendChild(script); document.body.appendChild(script); }; }; </script> </script>
  • 13. Optimize initial rendering (4/4) Conditional preloading• Preloading assets (JavaScript, CSS, Images, etc.) has the potential to really enhance the user experience.• However, one must be smart about when the preloading takes place. Otherwise, the preloading may actually worsen the user experience...•• Try it at
  • 14. Part 3High Performance JavaScript
  • 15. Reduce the amount of symbolic look-up: The scope chain (1/2) var gg == 7; var 7; function f(a) {{ function f(a) var vv == 8; var 8; xx == vv ++ aa ++ g; g; }} f(6); f(6); parent• Look-up is performed every time a variable is accessed.• Variables are resolved backwards from most specific to least specific scope.
  • 16. Reduce the amount of symbolic look-up: The scope chain (2/2)• Therefore, declare (with the var keyword) and use variables in the same scope whenever possible, and avoid global variables at all costs.• Never use the with keyword, as it prevents the compiler from generating code for fast access to local variables (traverse the object prototype chain first, and then up the scope chain, and so on)• Cache the result of expensive look-ups in local variables: var arr == ...; var arr ...; var arr == ...; var arr ...; var globalVar == 0; var globalVar 0; var globalVar == 0; var globalVar 0; (function () {{ (function () (function () {{ (function () var i; var i; var i, l, localVar; var i, l, localVar; for (i == 0; ii << arr.length; i++) {{ for (i 0; arr.length; i++) ll == arr.length; arr.length; globalVar++; globalVar++; localVar == globalVar; localVar globalVar; }} for (i == 0; ii << l; i++) {{ for (i 0; l; i++) })(); })(); localVar++; localVar++; }} globalVar == localVar; globalVar localVar; })(); })(); (faster on all A-grade browsers)
  • 17. Reduce the amount of symbolic look-up: The prototype chain function AA () {} function () {} B.prototype A.prototype.prop1 == ...; A.prototype.prop1 ...; function BB () {{ function () this.prop2 == ...; this.prop2 ...; }} B.prototype == new A(); B.prototype new A(); var bb == new B(); var new B();• Accessing members bound to the primary object is about 25% faster than accessing members defined anywhere in the prototype chain.• The longer the traversal of the prototype chain, the slower the look-up.
  • 18. Optimize object instantiation function Foo () {...} function Foo () {...} == function () {...}; function () {...}; function Foo () {{ function Foo () == function () {...}; function () {...}; }}• If you need to create many objects, consider adding members to the prototype instead of adding them to each individual object in the object constructor (properties are bound once, to the prototype object)• This also reduces memory consumption.• However, it slows down the look-up of object members.
  • 19. Don’t use eval!• The string passed to eval (and its relatives, the Function constructor and the setTimeout and setInterval functions) needs to be compiled and interpreted. Extremely slow!• Never pass a string to the setTimeout and setInterval functions. Instead, pass an anonymous function like so: setTimeout(function () {{ setTimeout(function () // Code to execute on aa timeout // Code to execute on timeout }, 50); }, 50);• Never use eval and the Function constructor (except in some extremely rare cases, and only in code blocks where performance is not critical)
  • 20. Optimize string concatenation• On Internet Explorer (JScript), concatenating two strings causes a new string to be allocated, and the two original strings to be copied: var ss == “xxx” ++ “yyy”; var “xxx” “yyy”; ss += “zzz”; += “zzz”;• Therefore, it is much faster on Internet Explorer to append strings to an array, and then use Array.join (don’t use this for simple concatenations!) var i, ss == “”; var i, “”; var i, ss == []; var i, []; for (i == 0; ii << 10000; i++) {{ for (i 0; 10000; i++) for (i == 0; ii << 10000; i++) {{ for (i 0; 10000; i++) ss += “x”; += “x”; s[i] == “x”; s[i] “x”; }} }} ss == s.join(“”); s.join(“”);• Other JavaScript engines (WebKit, SpiderMonkey) have been optimized to handle string concatenations by doing a realloc + memcpy whenever possible.• Use the YUI Compressor!
  • 21. Optimize regular expressions• Don’t use the RegExp constructor, unless your regular expression is assembled at runtime. Instead, use regular expression literals.• Use the test method if all you want to do is test for a pattern (the exec method carries a small performance penalty)if (/loaded|complete/.test(document.readyState)) {...} if (/loaded|complete/.test(document.readyState)) {...}• Use non-capturing groups (?:...)• Stick to simple patterns. If your regular expression looks like the following, reconsider...(?:(?:rn)?[t])*(?:(?:(?:[^()<>@,;:".[]000-031]+(?:(?:(?:rn)?[t])+|Z|(?=[["()<>@,;:".[]]))|" (?:(?:rn)?[t])*(?:(?:(?:[^()<>@,;:".[]000-031]+(?:(?:(?:rn)?[t])+|Z|(?=[["()<>@,;:".[]]))|"(?:[^"r]|.|(?:(?:rn)?[t]))*"(?:(?:rn)?[t])*)(?:.(?:(?:rn)?[t])*(?:[^()<>@,;:".[]000-031 (?:[^"r]|.|(?:(?:rn)?[t]))*"(?:(?:rn)?[t])*)(?:.(?:(?:rn)?[t])*(?:[^()<>@,;:".[]000-031]+(?:(?:(?:rn)?[t])+|Z|(?=[["()<>@,;:".[]]))|"(?:[^"r]|.|(?:(?:rn)?[t]))*"(?:(?:rn)?[t]) ]+(?:(?:(?:rn)?[t])+|Z|(?=[["()<>@,;:".[]]))|"(?:[^"r]|.|(?:(?:rn)?[t]))*"(?:(?:rn)?[t])*))*@(?:(?:rn)?[t])*(?:[^()<>@,;:".[]000-031]+(?:(?:(?:rn)?[t])+|Z|(?=[["()<>@,;:".[]]))|[ *))*@(?:(?:rn)?[t])*(?:[^()<>@,;:".[]000-031]+(?:(?:(?:rn)?[t])+|Z|(?=[["()<>@,;:".[]]))|[([^[]r]|.)*](?:(?:rn)?[t])*)(?:.(?:(?:rn)?[t])*(?:[^()<>@,;:".[]000-031]+(?:(?:(?:rn)? ([^[]r]|.)*](?:(?:rn)?[t])*)(?:.(?:(?:rn)?[t])*(?:[^()<>@,;:".[]000-031]+(?:(?:(?:rn)?[t])+|Z|(?=[["()<>@,;:".[]]))|[([^[]r]|.)*](?:(?:rn)?[t])*))*|(?:[^()<>@,;:".[]000-0 [t])+|Z|(?=[["()<>@,;:".[]]))|[([^[]r]|.)*](?:(?:rn)?[t])*))*|(?:[^()<>@,;:".[]000-031]+(?:(?:(?:rn)?[t])+|Z|(?=[["()<>@,;:".[]]))|"(?:[^"r]|.|(?:(?:rn)?[t]))*"(?:(?:rn)?[t 31]+(?:(?:(?:rn)?[t])+|Z|(?=[["()<>@,;:".[]]))|"(?:[^"r]|.|(?:(?:rn)?[t]))*"(?:(?:rn)?[t])*)*<(?:(?:rn)?[t])*(?:@(?:[^()<>@,;:".[]000-031]+(?:(?:(?:rn)?[t])+|Z|(?=[["()<>@,;:".[] ])*)*<(?:(?:rn)?[t])*(?:@(?:[^()<>@,;:".[]000-031]+(?:(?:(?:rn)?[t])+|Z|(?=[["()<>@,;:".[]]))|[([^[]r]|.)*](?:(?:rn)?[t])*)(?:.(?:(?:rn)?[t])*(?:[^()<>@,;:".[]000-031]+(?:(?:(?: ]))|[([^[]r]|.)*](?:(?:rn)?[t])*)(?:.(?:(?:rn)?[t])*(?:[^()<>@,;:".[]000-031]+(?:(?:(?:rn)?[t])+|Z|(?=[["()<>@,;:".[]]))|[([^[]r]|.)*](?:(?:rn)?[t])*))*(?:,@(?:(?:rn)?[t])) rn)?[t])+|Z|(?=[["()<>@,;:".[]]))|[([^[]r]|.)*](?:(?:rn)?[t])*))*(?:,@(?:(?:rn)?[t]))
  • 22. Caching• Caching can be justified by: – High cost (CPU or network latency) associated with getting a value – Value will be read many times – And will not change often!• Increases memory consumption  tradeoff• Memoization:var fn == (function () {{ var fn (function () function fn () {{ function fn () var fn == function () {{ var fn function () var bb == false, v; var false, v; if (!fn.b) {{ if (!fn.b) var vv == ...; var ...; return function () {{ return function () fn.v == ...; fn.v ...; return (fn == function () {{ return (fn function () if (!b) {{ if (!b) fn.b == true; fn.b true; return v; return v; vv == ...; ...; }} })(); })(); bb == true; true; return fn.v; return fn.v; }; }; }} }} return v; return v; }; };})(); })(); Module pattern Store value in function object Lazy function definition
  • 23. How to handle long running JavaScript processes (1/2)• During long running JavaScript processes, the entire browser UI is frozen• Therefore, to maintain a decent user experience, make sure that JavaScript threads never take more than ~ 300 msec (at most) to complete.• You can break long running processes into smaller units of work, and chain them using setTimeout.• You can also process the data on the server.• More info at• Demo
  • 24. How to handle long running JavaScript processes (2/2)function doSomething (callbackFn) {{ function doSomething (callbackFn) // Initialize aa few things here... // Initialize few things here... (function () {{ (function () // Do aa little bit of work here... // Do little bit of work here... if (termination condition) {{ if (termination condition) // We are done // We are done callbackFn(); callbackFn(); }} else {{ else // Process next chunk // Process next chunk setTimeout(arguments.callee, 0); setTimeout(arguments.callee, 0); }} })(); })();}}
  • 25. Miscellaneous tips (1/2)• Primitive operations are often faster than the corresponding function calls: var aa == 1, bb == 2, c; var 1, 2, c; myArray.push(value); myArray.push(value); cc == Math.min(a, b); Math.min(a, b); myArray[myArray.length] == value; myArray[myArray.length] value; cc == aa << bb ?? aa :: b; b; myArray[idx++] == value; myArray[idx++] value;• If possible, avoid using try...catch in performance-critical sections: var i; var i; var i; var i; for (i == 0; ii << 100000; i++) {{ for (i 0; 100000; i++) try {{ try try {{ try for (i == 0; ii << 100000; i++) {{ for (i 0; 100000; i++) ... ... ... ... }} catch (e) {{ catch (e) }} ... ... }} catch (e) {{ catch (e) }} ... ... }} }}
  • 26. Miscellaneous tips (2/2)• If possible, avoid in performance-critical sections: var key, value; var key, value; var i, value, length == myArray.length; var i, value, length myArray.length; for (key in myArray) {{ for (key in myArray) for (i == 0; ii << length; i++) {{ for (i 0; length; i++) value == myArray[key]; value myArray[key]; value == myArray[i]; value myArray[i]; ... ... ... ... }} }}• Branch outside, not inside, whenever the branching condition does not change: function fn () {{ function fn () var fn; var fn; if (...) {{ if (...) if (...) {{ if (...) ... ... fn == function () {...}; fn function () {...}; }} else {{ else }} else {{ else ... ... fn == function () {...}; fn function () {...}; }} }} }}
  • 27. Part 4High Performance Dynamic HTML
  • 28. Document tree modification Using innerHTMLvar i, j, el, table, tbody, row, cell; var i, j, el, table, tbody, row, cell; var i, j, el, idx, html; var i, j, el, idx, html;el == document.createElement("div"); el document.createElement("div"); idx == 0; idx 0;document.body.appendChild(el); document.body.appendChild(el); html == []; html [];table == document.createElement("table"); table document.createElement("table"); html[idx++] == "<table>"; html[idx++] "<table>";el.appendChild(table); el.appendChild(table); for (i == 0; ii << 1000; i++) {{ for (i 0; 1000; i++)tbody == document.createElement("tbody"); tbody document.createElement("tbody"); html[idx++] == "<tr>"; html[idx++] "<tr>";table.appendChild(tbody); table.appendChild(tbody); for (j == 0; jj << 5; j++) {{ for (j 0; 5; j++)for (i == 0; ii << 1000; i++) {{ for (i 0; 1000; i++) html[idx++] == "<td></td>"; html[idx++] "<td></td>"; row == document.createElement("tr"); row document.createElement("tr"); }} for (j == 0; jj << 5; j++) {{ for (j 0; 5; j++) html[idx++] == "</tr>"; html[idx++] "</tr>"; cell == document.createElement("td"); cell document.createElement("td"); }} row.appendChild(cell); row.appendChild(cell); html[idx++] == "</table>"; html[idx++] "</table>"; }} el == document.createElement("div"); el document.createElement("div"); tbody.appendChild(row); tbody.appendChild(row); document.body.appendChild(el); document.body.appendChild(el);}} el.innerHTML == html.join(""); el.innerHTML html.join(""); (much faster on all A-grade browsers)Warning: See
  • 29. Document tree modification Using cloneNodevar i, j, el, table, tbody, row, cell; var i, j, el, table, tbody, row, cell; var i, el, table, tbody, template, row, cell; var i, el, table, tbody, template, row, cell;el == document.createElement("div"); el document.createElement("div"); el == document.createElement("div"); el document.createElement("div");document.body.appendChild(el); document.body.appendChild(el); document.body.appendChild(el); document.body.appendChild(el);table == document.createElement("table"); table document.createElement("table"); table == document.createElement("table"); table document.createElement("table");el.appendChild(table); el.appendChild(table); el.appendChild(table); el.appendChild(table);tbody == document.createElement("tbody"); tbody document.createElement("tbody"); tbody == document.createElement("tbody"); tbody document.createElement("tbody");table.appendChild(tbody); table.appendChild(tbody); table.appendChild(tbody); table.appendChild(tbody);for (i == 0; ii << 1000; i++) {{ for (i 0; 1000; i++) template == document.createElement("tr"); template document.createElement("tr"); row == document.createElement("tr"); row document.createElement("tr"); for (i == 0; ii << 5; i++) {{ for (i 0; 5; i++) for (j == 0; jj << 5; j++) {{ for (j 0; 5; j++) cell == document.createElement("td"); cell document.createElement("td"); cell == document.createElement("td"); cell document.createElement("td"); template.appendChild(cell); template.appendChild(cell); row.appendChild(cell); row.appendChild(cell); }} }} for (i == 0; ii << 1000; i++) {{ for (i 0; 1000; i++) tbody.appendChild(row); tbody.appendChild(row); row == template.cloneNode(true); row template.cloneNode(true);}} tbody.appendChild(row); tbody.appendChild(row); }} (faster on all A-grade browsers – sometimes much faster)Warning: expando properties/attached event handlers are lost!
  • 30. Document tree modification Using DocumentFragment• A DocumentFragment (DOM Level 1 Core) is a lightweight Document object.• It supports only a subset of the regular DOM methods and properties.• IE’s implementation of the DocumentFragment interface does not comply with the W3C specification and returns a regular Document object. var i, j, el, table, tbody, row, cell, docFragment; var i, j, el, table, tbody, row, cell, docFragment; docFragment == document.createDocumentFragment(); docFragment document.createDocumentFragment(); el == document.createElement("div"); el document.createElement("div"); docFragment.appendChild(el); docFragment.appendChild(el); table == document.createElement("table"); table document.createElement("table"); el.appendChild(table); el.appendChild(table); tbody == document.createElement("tbody"); tbody document.createElement("tbody"); table.appendChild(tbody); table.appendChild(tbody); for (i == 0; ii << 1000; i++) {{ for (i 0; 1000; i++) ... ... }} document.body.appendChild(docFragment); document.body.appendChild(docFragment);
  • 31. Limit the number of event handlers (1/2)• Attaching an event handler to hundreds of elements is very costly• Multiplying event handlers augments the potential for memory leaks• Solution: Use event delegation, a technique that relies on event bubbling <div id="container"> <div id="container"> div#container div#container <ul> <ul> <li id="li-1">List Item 1</li> <li id="li-1">List Item 1</li> <li id="li-2">List Item 2</li> <li id="li-2">List Item 2</li> <li id="li-3">List Item 3</li> <li id="li-3">List Item 3</li> ul ul <li id="li-4">List Item 4</li> <li id="li-4">List Item 4</li> <li id="li-5">List Item 5</li> <li id="li-5">List Item 5</li> ... ... </ul> </ul> li#li-x li#li-x </div> </div> text node text node
  • 32. Limit the number of event handlers (2/2)YAHOO.util.Event.addListener("container", "click", function (e) {{ YAHOO.util.Event.addListener("container", "click", function (e) var el == YAHOO.util.Event.getTarget(e); var el YAHOO.util.Event.getTarget(e); while ( !== "container") {{ while ( !== "container") if (el.nodeName.toUpperCase() === "LI") {{ if (el.nodeName.toUpperCase() === "LI") // Do something here... // Do something here... break; break; }} else {{ else el == el.parentNode; el el.parentNode; }} }}}); });
  • 33. Limiting reflows• Reflows happen whenever the DOM tree is manipulated.• Browsers have optimizations you may take advantage of to minimize reflow: – Modifying an invisible element (display:none) does not trigger reflow – Modifying an element “off-DOM” does not trigger reflow• Batch style changes: – Change the value of the style attribute using setAttribute (does not work on Internet Explorer) Example:el.setAttribute("style", "display:block;width:auto;height:100px;..."); el.setAttribute("style", "display:block;width:auto;height:100px;..."); – Change the value of the cssText property of the style object. == "display:block;width:auto;height:100px;..."; "display:block;width:auto;height:100px;..."; – More maintainable: Change the CSS class name of an element. Example:YAHOO.util.Dom.replaceClass(el, "foo", "bar"); YAHOO.util.Dom.replaceClass(el, "foo", "bar");
  • 34. Miscellaneous tips...• Consider using the onmousedown event instead of the onclick event – Get a head start by making use of the small delay between the time a user presses the mouse button and the time he/she releases it.• “Downshift your code”: throttle frequent and expensive actions – See
  • 35. Part 5High Performance Layout and CSS
  • 36. Miscellaneous tips...• Use CSS Sprites for Snappy Image Replacement.• Avoid using JavaScript for layout. – window.onresize is throttled... – Use pure CSS instead! – Side benefits: improves maintainability, degrades more gracefully, etc.• Avoid using Internet Explorer expressions – Expressions are constantly evaluated in order to react to environment changes. – There are ways to more safely use expressions, but in general, you shouldn’t need/use them.• Avoid using Internet Explorer filters (or keep their use to a minimum)• Optimize Table Layout – Goal: allow the rendering engine to start rendering a table before it has received all the data – Use table-layout:fixed – Explicitly define a COL element for each column – Set the WIDTH attribute on each col• Optimize your CSS selectors [ ]
  • 37. Part 6High Performance Ajax
  • 38. Ajax Best Practices• Never resort to using synchronous XMLHttpRequest – – Asynchronous programming model slightly more complicated. – Need to lock all or part of the UI while the transaction is pending.• Programmatically handle network timeouts.• Solution: Use the YUI Connection Manager: var callback == {{ var callback success: function () {{ /* Do something */ }, success: function () /* Do something */ }, failure: function () {{ /* Do something */ }, failure: function () /* Do something */ }, timeout: 5000 timeout: 5000 }; }; YAHOO.util.Connect.asyncRequest("GET", url, callback); YAHOO.util.Connect.asyncRequest("GET", url, callback);
  • 39. Improving perceived network latency using the optimistic pattern• If the data is validated locally (on the client, using JavaScript) before being sent to the server, the request will be successful in 99.9% of the cases.• Therefore, in order to optimize the user experience, we should assume a successful outcome and adopt the following pattern: → Update the UI when the request gets sent. → Lock the UI/data structures with the finest possible granularity. → Let the user know that something is happening. → Let the user know why a UI object is locked. → Unlock the UI/data structures when the outcome is successful. → Handle error cases gracefully.
  • 40. Miscellaneous tips...• Be aware of the maximum number of concurrent HTTP/1.1 connections.• Multiplex Ajax requests whenever possible, and if your backend supports it.• Piggyback unsollicited notifications in a response to an Ajax request.• Favor JSON over XML as your data exchange format – Accessing a JSON data structure is easier and cheaper than accessing XML data. – JSON has less overhead than XML.• Push, don’t poll. Use COMET to send real-time notifications to the browser.• Consider using local storage to cache data locally, request a diff from the server: – Internet Explorer’s userData – Flash local storage – DOM:Storage (WhatWG persistent storage API, implemented in Firefox 2) – Google Gears – etc.
  • 41. Part 7Performance Tools
  • 42. Performance Tools• YSlow? [ ]• Task manager• IE Leak Detector a.k.a Drip [ ]• Stopwatch profiling – AjaxView [ ] – JsLex [ ] – YUI profiler [ ]• Venkman or Firebug Profiler [ ]