Web Performance Tips: 10 JavaScript Best Practices

I had a great time with San Francisco Bay. Net User Group last night. In this presentation, Peter Kellner talked first about the top programming tips that you can use in your web site to make sure it's as fast as it can be. Following Peter’s general discussion of client side optimization techniques, I talked about performance optimization strategies and JavaScript best practices in web development.

As I promised, here is the slide deck for JavaScript best practices presentation.

Performance Optimization and JavaScript Best Practices

View more presentations from Doris Chen.

To highlight the presentation, I have talked about the following JavaScript best practices tips:

  1. Put stylesheets at the top (css)
  2. Move scripts to the bottom (javascript)
  3. Provide a clean separation of content, CSS, and JavaScript
  4. De-reference unused objects
  5. Think Asynchronous
  6. Working with Objects
  7. Defer Loading Resources
  8. Use JSLint -- Code Quality Tool
  9. Reduce the size of JavaScript file
    • gzip
  10. General JavaScript Coding Best Practices
    • Use === Instead of ==
    • Eval = Bad
    • Don’t Use Short-Hand
    • Reduce Globals: Namespace
    • Don't Pass a String to "SetInterval" or "SetTimeOut"
    • Use {} Instead of New Object()
    • Use [] Instead of New Array()

 

Here are some pictures to share for a good event.

SFBayNet_Summit 005SFBayNet_Summit 007SFBayNet_Summit 006SFBayNet_Summit 009