Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Question: Optimizing JavaScript

 
Vijitha Kumara
Bartender
Posts: 3913
9
Chrome Fedora Hibernate
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Dear Author,

First of all wellcome to JavaRanch....

Is the book explain about optimizing javascripts with examples? Because javascript which are not properly optimized may cause performance issues of a web applications.

Thanks in Advance,

[ August 25, 2008: Message edited by: Vijitha Kumara ]
[ August 26, 2008: Message edited by: Vijitha Kumara ]
 
Stoyan Stefanov
author
Ranch Hand
Posts: 61
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Vijitha, thanks for the welcome words and the question. Funny thing, my daily job at Yahoo! is in the Exceptional Performance team and web optimization is what we do

In the book, there are scattered hints and best practices about optimization, but there's no section specifically dedicated to this topic.

I would put the javascript optimizations into three categories:

  • delivery
  • DOM manipulations
  • low-level micro optimziations


  • The delivery is how the JavaScript code is served to the browser, this is high impact, low effort optimization. All you need to do is:

  • merge all scripts into one file
  • minify the scripts
  • enable gzip compression
  • implement "never expires" policy - add a far future Expires header
  • put scripts at the bottom of the HTML or use an alternative loading technique


  • These are easy wins that give an instant result. Our team has documented these as performance best practices.

    Then you have DOM manipulations, these tend to be the most expensive things you can do in the browser with javascript. You can cache references to DOM elements, update the part of the DOM tree that you need "offline" before you stick it back to the main tree and so on. A really nice resource is this talk here, slides are available too. Responding to browser events is also something I consider in this category.

    Finally there are micro optimizations which are high effort, relatively low impact activities, such as optimizing loops or string concatenations. These will rarely give a noticeable result, unless there are some extremities in the code . Also browsers tend to improve their engines (Firefox just added a JIT compiler to 3.1, IE8 fixed string concatenation among others), so these improvements get even less important with time and may even become counter-optimizations. And if they come at the price of readability and maintainability, they should definitely be avoided.
     
    Vijitha Kumara
    Bartender
    Posts: 3913
    9
    Chrome Fedora Hibernate
    • Mark post as helpful
    • send pies
    • Quote
    • Report post to moderator
    Thanks a lot for your explanation.
     
    • Post Reply
    • Bookmark Topic Watch Topic
    • New Topic