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

Performance Best Practices - Part 1 -
Client Side [JS, CSS, HTML, jQuery]
Presenter: Sathyan, Mindfire Solutions
Date: 03rd Sep 2013

Image Source: http://www.webperformancetoday.com/2011/06/30/revisiting-the-
performance-equation/ Presenter: Sathyan, Mindfire Solutions

 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

 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

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

 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

 Use efficient CSS selectors
◦ Right to left $(“body #container div a”)
◦ Rules with descendants body * {...}.hide-scrollbars * {...}
◦ Rules with child or adjacent selectors body > * {...}.hide-
scrollbars * {...}
◦ 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

 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

 Scroll, Resize 
 Chrome Developer Tools – Profiles – flipkart
 CSS Stress Test
 Chrome Developer Tools – Timeline Ctrl E R
flipkart
 Chrome Developer Tools –Audit

 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()

 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!

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

 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 );

//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);

 Avoid using pseudo and attribute selectors
◦ $(‘:visible, :hidden’); $(’[attribute=value]’);
 Class Selectors Next Slower [IE9]
 Tags!
 ID ID ID ID
 Chaining – Multi Selectors
 Sizzle

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

$("#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

 Hello World!
 Why?
 Options?
 Window Events?

 It matters
 The latest is the greatest, always

 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

 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

 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

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

 Chrome Developer Tools – Audit
 Miniprofiler
 Glimpse
 Firebug - Network
 Yslow
 PageSpeed
 Newrelic
 http://www.webpagetest.org/
 https://code.google.com/p/leak-finder-for-
javascript/

 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/writing-
efficient-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/

Question and Answer
 HTML5?
 Local Storage?
 Web Sockets?
 http://phantomjs.org/
 Node.js
 Backbone.js

Thank you

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

Recomendados

Recomendados

Más contenido relacionado

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

Similar a Performance Best Practices - Part 1 - Client Side [JS, CSS, HTML, jQuery] (20)

Más de Mindfire Solutions

Más de Mindfire Solutions (20)

Último

Último (20)

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