High Performance Client side technology tweaking for a website

When a page is rendered a typical browser subsystems used and there Best Practices

1. Networkingcompress network traffic with gzip and not compress not

• Images because they are already compressed.
• Providing cache able content
• Conditional Requests
• Minifing Javascript
• Don't scale images on the html. Crop to the required size before setting it on the html.
• Use Image sprites.
  

2. HTML Parser

• Avoid Inline Javascript
• Avoid Linking javascript in head tag
  
• Link javascript at end of the body tag, But if required use it with 'defer' tag.

3. CSS ParserAvoid Embedded styles.

• Counter to Js files use Css linking in the head tag.
• Avoid @import tag in CSS files but if required for cascading or hierarchical style sheet use it with link tag on the page.

4. Collections

5. Javascript

• Minimize symbol resolution
  

• Minimizing symbol resolution for functions
• Use JSON Native methods

6. Marshalling

• Minimize DOM interaction.. Retreive all the DOM elements in one call like

  var elems = document.body.all                                                    

  var lside = elems.lside.value;                                                      

  var rside = elems.rside.value;  

7. DOM

• Built in methods are always effective.
• Use selector API's for efficient access of collections (CSS Selectors)

8. Formatting

• Only send required styles.
• Simply selector pattern. Avoid Descendent selectors

9. Block Building 10. Layout 11. Rendering --> Layout Optimization

• Batch Visual Changes

Ref: http://live.visitmix.com/MIX10/Sessions/CL29