Ajax performance
High PerformanceAjax ApplicationsJulien Lecomtehttp://www.julienlecomte.net/blogfiles/performance/ajax-perf.ppthttp://www.slideshare.net/julien.lecomte/high-performance-ajax-applications Part 1Developing ForHigh Performance Planning and designingfor 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 (don't just say no)•Help simplify the design and interaction if needed (compromise) 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. 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 Part 2High PerformancePage Load Yahoo!'s Exceptional Performance rules1. Make Fewer HTTP Requests2. Use a Content Delivery Network3. Add an Expires Header4. Gzip Components (including JS!)5. Put CSS at the Top6. 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 http://developer.yahoo.com/performance/ for more information.•A web page works in 3 (sometimes imbricated) stages:1) load2) render3) run•These rules cover mostly the first stage. Asset optimization•Minify CSS and JavaScript files:–Use the YUI Compressor [ http://developer.yahoo.com/yui/compressor/ ]–Stay away from so-called advanced compression schemes - like Packer•Combine CSS and JavaScript files:–At build time [ http://www.julienlecomte.net/blog/2007/09/16/ ]–At run time•Optimize image assets:–PngCrush [ http://pmt.sourceforge.net/pngcrush/ ]–PngOptimizer [ http://psydk.org/PngOptimizer.php ]–etc. 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 http://ajaxpatterns.org/On-Demand_Javascript–Use the YUI Loader–Dojo's package system–JSAN Import System 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–http://msdn2.microsoft.com/en-us/library/ms533020.aspx#Close_Your_Tags•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 [...]... each col • Optimize your CSS selectors [ http://developer.mozilla.org/en/docs/Writing_Efficient_CSS ] High Performance Ajax Applications Julien Lecomte http://www.julienlecomte.net/blogfiles/performance /ajax-perf.ppt http://www.slideshare.net/julien.lecomte/high-performance-ajax-applications Part 4 High Performance Dynamic HTML How to handle long running JavaScript processes (1/2) • During long running . ApplicationsJulien Lecomtehttp://www.julienlecomte.net/blogfiles/performance /ajax-perf. ppthttp://www.slideshare.net/julien.lecomte/high-performance-ajax-applications Part