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

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.