• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Question: Optimizing JavaScript

 
Bartender
Posts: 4116
72
Mac TypeScript Chrome Java Linux
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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 ]
 
author
Posts: 85
5
PHP
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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: 4116
    72
    Mac TypeScript Chrome Java Linux
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Thanks a lot for your explanation.
     
    What are you doing in my house? Get 'em tiny ad!
    a bit of art, as a gift, the permaculture playing cards
    https://gardener-gift.com
    reply
      Bookmark Topic Watch Topic
    • New Topic