Performance Best Practices - Part 1 - Client Side [JS, CSS, HTML, jQuery]

2,671 views

Published on

Sathyan shares and talks about the best practices for day to development and production deployment of web applications that uses JS, CSS, HTML, jQuery.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,671
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Performance Best Practices - Part 1 - Client Side [JS, CSS, HTML, jQuery]

  1. 1. Performance Best Practices - Part 1 Client Side [JS, CSS, HTML, jQuery] Presenter: Sathyan, Mindfire Solutions Date: 03rd Sep 2013
  2. 2. Image Source: http://www.webperformancetoday.com/2011/06/30/revisiting-theperformance-equation/ Presenter: Sathyan, Mindfire Solutions
  3. 3.         Average Frontend time is 75% and above No inline JavaScript No Inline Styles Refer only the necessary include [js, css, etc.] files for the page Always remove code, DOM, CSS that you do not need – Sample Minimal comments, comment only what the code does and not how! Use JSON Less less less Presenter: Sathyan, Mindfire Solutions
  4. 4.          Minimize HTTP Requests Put Stylesheets at the Top Put Scripts at the Bottom Avoid Redirects Make Ajax Cacheable Use GET for AJAX Requests Post-load Components Preload Components Reduce the Number of DOM Elements Presenter: Sathyan, Mindfire Solutions
  5. 5. Presenter: Sathyan, Mindfire Solutions
  6. 6.         JAX What? Really? AJAX Control Toolkit But I need It… Callback Read See Presenter: Sathyan, Mindfire Solutions
  7. 7.      CSS Sprites http://www.websiteoptimization.com/speed/ tweak/css-sprites/ Replace graphic rollovers with CSS rollovers colored backgrounds, borders, or spacing instead of graphic techniques Replace graphic text headers with CSS text headers Presenter: Sathyan, Mindfire Solutions
  8. 8.  Use efficient CSS selectors ◦ Right to left $(“body #container div a”) ◦ Rules with descendants body * {...}.hide-scrollbars * {...} ◦ Rules with child or adjacent selectors body > * {...}.hidescrollbars * {...} ◦ Rules with overly qualified selectors – IDs with tags ◦ Remove redundant qualifiers.     Avoid CSS expressions [ IE 5 – 7] Put CSS in the document head Specify image dimensions Specify a character set Presenter: Sathyan, Mindfire Solutions
  9. 9.     CSS 3 ? Group Similar Styles Reduce No of line breaks Simple colors #333333, #DDDDDD, #112255, #AABBCC, #FF0000 to #333, #DDD, #125, #ABC, #F00   Remove “px” Images Presenter: Sathyan, Mindfire Solutions
  10. 10.      Scroll, Resize  Chrome Developer Tools – Profiles – flipkart CSS Stress Test Chrome Developer Tools – Timeline Ctrl E R flipkart Chrome Developer Tools –Audit Presenter: Sathyan, Mindfire Solutions
  11. 11.      Native JS Code Grouping Reuse Caching Refer an element as directly as possible using the ID selector rather than using search/find in a container, yes that is right, because it translates directly to good old getElementByID() Presenter: Sathyan, Mindfire Solutions
  12. 12.         Concat with Array.prototype.join() – Really? Data Structures Push() pop() Shift() - Read Use „this‟ Switch it! Loops $.each() Vs Native Initializing instance variables Know your Closures Cache – $(".someelement") -- Assign to a Var! Presenter: Sathyan, Mindfire Solutions
  13. 13.      Always Unbind before binding Most abused part Leads to repeated calls Repeated requests leads to pathetic web page See Presenter: Sathyan, Mindfire Solutions
  14. 14.  DOM Manipulation is BAD for (var ct=0; ct <1000; ++ct) { $("#header").html($("#header").html() + „something from resultset‟); } should be written as: var fullHeaderContent = $("#header").html(); for (var ct=0; ct <1000; ++ct) { fullHeaderContent += „something from resultset‟; } $("#header").html(fullHeaderContent ); Presenter: Sathyan, Mindfire Solutions
  15. 15. //BAD for (var ctPatient=0; ctPatient<=rows.length; ++ctPatient) { $('#alertResult').append('<tr><td>'+rows[ctPatient]+'</td></tr>'); } // AWESOME var domTree = ''; for (var ctPatient=0; ctPatient<=rows.length; ++ctPatient) { domTree += '<tr><td>'+rows[ctPatient]+'</td></tr>'; } $('#alertResult').append(domTree); Presenter: Sathyan, Mindfire Solutions
  16. 16.  Avoid using pseudo and attribute selectors ◦ $(„:visible, :hidden‟); $(‟[attribute=value]‟);      Class Selectors Next Slower [IE9] Tags! ID ID ID ID Chaining – Multi Selectors Sizzle Presenter: Sathyan, Mindfire Solutions
  17. 17.     Depth of call stack Rapid fire rounds – 2 to 3 milliseconds Even bubbling – Super Post Mouseup Vs Click Presenter: Sathyan, Mindfire Solutions
  18. 18. $("#longlist li").on("mouseenter", function() { $(this).text("Click me!"); }); $("#longlist li").on("click", function() { $(this).text("Why did you click me?!"); }); var list = $("#longlist"); list.on("mouseenter", "li", function(){ $(this).text("Click me!"); }); list.on("click", "li", function() { $(this).text("Why did you click me?!"); }); http://gregfranko.com/jquery-best-practices/#/20
  19. 19.     Hello World! Why? Options? Window Events? Presenter: Sathyan, Mindfire Solutions
  20. 20.   It matters The latest is the greatest, always Presenter: Sathyan, Mindfire Solutions
  21. 21.       The best Javascript debugger out there! Console shows warning, errors, info Look for Yellow and Red – If you see them, they are bad, get rid of those warnings, errors right away! Do you see 404? Bad, Very Bad, Please act on it Are there repeated calls? No use of “stressing” the point here, get rid of duplicate calls. Net Tab – Wait time - receive time Presenter: Sathyan, Mindfire Solutions
  22. 22.     Asynch Calls for Wait time Number of requests – can they be reduced? Are there repeated calls? Where is the most time spent? Categorize the bottlenecks using the waterfall charts console.profile, console.time and other Console APIs are very powerful, learn and use http://getfirebug.com/wiki/index.php/Conso le_API Presenter: Sathyan, Mindfire Solutions
  23. 23.  Yslow ◦ ◦ ◦ ◦ ◦ ◦ ◦ ◦ ◦ Use a Content Delivery Network (CDN) Add Expires headers Avoid empty src or href Compress components with gzip Configure entity tags (ETags) Make favicon small and cacheable Minification Bundling One Big JS/CSS Presenter: Sathyan, Mindfire Solutions
  24. 24.    uniform way to analyze and report on the degree to which measured performance meets user expectations. Set Your Apdex Score Et Your Apdex Score Presenter: Sathyan, Mindfire Solutions
  25. 25.          Chrome Developer Tools – Audit Miniprofiler Glimpse Firebug - Network Yslow PageSpeed Newrelic http://www.webpagetest.org/ https://code.google.com/p/leak-finder-forjavascript/ Presenter: Sathyan, Mindfire Solutions
  26. 26. Presenter: Sathyan, Mindfire Solutions
  27. 27.              http://www.stevesouders.com http://www.websiteoptimization.com/ http://www.webpagetest.org/ http://webdevchecklist.com/asp.net/performance/ http://www.strangeloopnetworks.com/assets/images/visualizing_web_performance_pos ter.jpg https://developers.google.com/speed/pagespeed/?csw=1 https://developers.google.com/speed/docs/best-practices/rendering http://oreilly.com/server-administration/excerpts/even-faster-websites/writingefficient-javascript.html http://gregfranko.com/jquery-best-practices/#/ http://www.artzstudio.com/2009/04/jquery-performance-rules/ http://vimeo.com/43659068 http://addyosmani.com/blog/ http://www.webperformancetoday.com/2010/07/09/waterfalls-101/ Presenter: Sathyan, Mindfire Solutions
  28. 28. Question and Answer       HTML5? Local Storage? Web Sockets? http://phantomjs.org/ Node.js Backbone.js Presenter: Sathyan, Mindfire Solutions
  29. 29. Thank you Presenter: Sathyan, Mindfire Solutions

×