Sathyan shares and talks about the best practices for day to development and production deployment of web applications that uses JS, CSS, HTML, jQuery.
3. 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
4. Presenter: Sathyan, Mindfire Solutions
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
6. JAX
What?
Really?
AJAX Control Toolkit
But I need It…
Callback
Read
See
Presenter: Sathyan, Mindfire Solutions
7. Presenter: Sathyan, Mindfire Solutions
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
8. Presenter: Sathyan, Mindfire Solutions
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
9. Presenter: Sathyan, Mindfire Solutions
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
11. Presenter: Sathyan, Mindfire Solutions
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()
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. Presenter: Sathyan, Mindfire Solutions
Always Unbind before binding
Most abused part
Leads to repeated calls
Repeated requests leads to pathetic web page
See
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
16. Presenter: Sathyan, Mindfire Solutions
Avoid using pseudo and attribute selectors
◦ $(‘:visible, :hidden’); $(’[attribute=value]’);
Class Selectors Next Slower [IE9]
Tags!
ID ID ID ID
Chaining – Multi Selectors
Sizzle
17. Depth of call stack
Rapid fire rounds – 2 to 3 milliseconds
Even bubbling – Super Post
Mouseup Vs Click
Presenter: Sathyan, Mindfire Solutions
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
20. It matters
The latest is the greatest, always
Presenter: Sathyan, Mindfire Solutions
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. 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. 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. 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