Improving performance with JS

Question

While using javascript in developing ,say a photo blog where you retrieve all the images from a folder and display it in all unique ways or making an ajax call to retrieve data from server and load it with all styling and logic applied on the fly (or any thing that involves hard hitting js code that spans hundreds of lines or even thousands), what are all the areas that JS developers concentrate on making the code more efficient (in terms of performance).

For instance we come across a lot of online galleries. what would be the first thing that would be the concern of a js developer if he has to load like 50 images from his server on to the website. I am pulling this up just to make an instance of JS code having to deal with quite good amount of data.

The thing that I am looking for is, I am currently involved in JS development and when I write medium(or large) js applications what should I be concentrating for improving performance.

1. In terms of memory used?
2. In terms of making loops efficient?
3. In terms of using 3rd party frameworks like Jquery or Dojo?
4. In terms of design and Algo used (I guess there is always this option open)

Any suggestions in writing a more efficient JS code would be of great help.

Answer 1

A professor of mine says - "Good algorithm, do not need a micro-optimization".

There was a similar question. The problem with JavaScript is that it doesn't exist alone in web pages. There is HTML ( DOM ) and CSS.

1. About the memory used - this is a fundamental question. If you want more speed, you need more memory, or the other way. It is a trade-off ^wikipedia. You must define a some kind of a balance. In my personal opinion (like here) you will get cleaner code, with less variables (objects) with no cloning, and the HTML will be cleaner. Limit the variables holding reference of DOM collections.

2. About the loops - the loops by themselves are not the problem. The problem is inside the loop: don't check for something over and over again. Use memoization ^wikipedia. Be careful with the iteration over DOM collections, they may become slow if there are a lot dynamically added elements over the time. Use variables to cache the current state, or position (oh! trade-off here).

3. Third party libs like jQuery are really helpful as they present an unified way to do the same thing on every browser. But like jQueryUI look for some that come in modules. Many times I only need the selectors which are inside another lib called sizzle incuded in jQuery and not the entire one. But nevertheless I've a point against their dominance. HTML5 is spreading and presents a native functionality, which at least if not better should be faster.

4. About the algorithms - use Design Patterns. They are techniques evolved in the years, tested and proven. Like using closures, unnamed self executing function which prevent global variables, etc...

Of course there are other helpful tricks like:

• minification of the code
  • YUI compressor, Google Closure compiler, saves bandwidth;
  • There are also obfuscaters and packers - with good algorithm, they may be helpful, but sometimes they may introduce errors!!! ;
  • on some pages you may have seen something like var doc = document;, a shortening the calling of document;
• using CDN - either from Google or ASP host;
• image optimization - JPG can be optimized to be smaller in size (about the galleries);
• exporting the static content like JavaScript and CSS on another host, to prevent sending cookie data over and over again. ( Here another side effect is that you do not need a server side language to be installed, only http server is needed )

As tools you may be or not, familiar with:

• JsLint - checking for JavaScript code errors;
• JsonLint - checking for errors in json data;
• JsPerf - for testing and comparing the performance of your scripts. Also contains a list of test devised by other users;
• regexpal - regex helper;
• there are a lot of "paste&share" sites jsfiddle, pastebin, etc;

Answer 2

Use a profiler to measure where your performance bottlenecks are, then see what you can do about them.

Even good programmers are very good at constructing performance arguments that end up being wrong, so the best programmers prefer profilers and test cases to speculation. -- Martin Fowler

Answer 3

Performance tuning is very, very application specific. As Donald Knuth says,

We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil

Generally, the best idea is to write your application and then figure out what you need to optimize as you go. Application takes too long to load? Use a minifier and defer loading of heavy resources (such as images). Too much CPU usage? Maybe you're updating the DOM too frequently instead of in batches. You won't know until you have a working sample, and then profile it.

Third party libraries are a great tool for getting a prototype up and working quickly. The cons are generally 1) Their payload can be large, increasing load time (though this can be mitigated by using CDNs/caching), 2) They make it a lot easier to do things that can be CPU intensive, because it hides so much of what is going on. Though this is only an issue if you are having CPU issues anyway, which is not always the case (and hard to know ahead of time without profiling).

Everytime you modify the DOM, the browser has to reflow and figure out how the page should be rendered with your change. This is why it is recommended that you use CSS classes to modify/change styles, because they can be changed in a single go, where-as stacking style changes means reflow for every attribute you are changing.

There are a great deal of these types of JS performance tips floating around. What it all boils down to is what your actual working example is showing you based on the profiler (such as that available in Chrome development tools) as well as the user experience.