Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Performance Best Practices - Part 1 Client Side [JS, CSS, HTML, jQuery]

Presenter: Sathyan, Mindfire Solutions
Date: 03rd...
Image Source: http://www.webperformancetoday.com/2011/06/30/revisiting-theperformance-equation/ Presenter: Sathyan, Mindfi...












Average Frontend time is 75% and above
No inline JavaScript
No Inline Styles
Refer only the necessary ...











Minimize HTTP Requests
Put Stylesheets at the Top
Put Scripts at the Bottom
Avoid Redirects
Make Ajax ...
Presenter: Sathyan, Mindfire Solutions










JAX
What?
Really?
AJAX Control Toolkit
But I need It…
Callback
Read
See

Presenter: Sathyan, Mindfire So...









CSS Sprites

http://www.websiteoptimization.com/speed/
tweak/css-sprites/
Replace graphic rollovers with CSS...


Use efficient CSS selectors
◦ Right to left $(“body #container div a”)
◦ Rules with descendants body * {...}.hide-scrol...





CSS 3 ?
Group Similar Styles
Reduce No of line breaks
Simple colors #333333, #DDDDDD, #112255, #AABBCC, #FF0000
t...







Scroll, Resize 
Chrome Developer Tools – Profiles – flipkart
CSS Stress Test
Chrome Developer Tools – Timelin...






Native JS Code
Grouping
Reuse
Caching
Refer an element as directly as possible using
the ID selector rather tha...










Concat with Array.prototype.join() – Really?
Data Structures Push() pop() Shift() - Read
Use „this‟
Swit...






Always Unbind before binding
Most abused part
Leads to repeated calls
Repeated requests leads to pathetic web p...


DOM Manipulation is BAD

for (var ct=0; ct <1000; ++ct)
{
$("#header").html($("#header").html() + „something from resul...
//BAD

for (var ctPatient=0; ctPatient<=rows.length; ++ctPatient)
{
$('#alertResult').append('<tr><td>'+rows[ctPatient]+'<...


Avoid using pseudo and attribute selectors
◦ $(„:visible, :hidden‟); $(‟[attribute=value]‟);








Class Selecto...





Depth of call stack
Rapid fire rounds – 2 to 3 milliseconds
Even bubbling – Super Post
Mouseup Vs Click

Presente...
$("#longlist li").on("mouseenter", function() {
$(this).text("Click
me!");
});
$("#longlist li").on("click", function() {
...





Hello World!
Why?
Options?
Window Events?

Presenter: Sathyan, Mindfire Solutions



It matters
The latest is the greatest, always

Presenter: Sathyan, Mindfire Solutions










The best Javascript debugger out there!
Console shows warning, errors, info
Look for Yellow and Red – If y...







Asynch Calls for Wait time
Number of requests – can they be reduced?
Are there repeated calls? Where is the mos...


Yslow
◦
◦
◦
◦
◦
◦
◦
◦
◦

Use a Content Delivery Network (CDN)
Add Expires headers
Avoid empty src or href
Compress comp...






uniform way to analyze and report on the
degree to which measured performance
meets user expectations.
Set Your A...











Chrome Developer Tools – Audit
Miniprofiler
Glimpse
Firebug - Network
Yslow
PageSpeed
Newrelic
http://...
Presenter: Sathyan, Mindfire Solutions

















http://www.stevesouders.com
http://www.websiteoptimization.com/
http://www.webpagetest.org/
...
Question and Answer







HTML5?
Local Storage?
Web Sockets?
http://phantomjs.org/
Node.js
Backbone.js

Presenter: ...
Thank you

Presenter: Sathyan, Mindfire Solutions
Upcoming SlideShare
Loading in …5
×

0

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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

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

Views

Total views

2,834

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

26

Shares

0

Comments

0

Likes

0

×