Performance tuning JavaScript

In this article we'll look at what is performance, 
why it is important, different ways of tracking performance issues 
and ways to solve them.

What and why performance is important?


Performance tuning is very important when an application gets larger. But it can be very crucial to retain the value of the software. When developing JavaScript applications there are variety of tools which you can use to tune the performance of a web application.

Memory can be held by an object in 2 different ways. directly by the object itself or implicitly by holding references to other objects. 

Different types of performance issues exists!

Memory leaks 
Memory leak is a gradual loss of available computer memory. 

Identifying performance issues

Before do any kind of performance tuning you need to identify what are the performance issues I have. You can use different tools and mechanisms to identify existing performance issues like memory leaks. 

Using Chrome Developer Tools for profiling

Use timeline in Developer tools to do profiling. Start with reading this introduction. 

Things to take

Memory leaks in JavaScript is based on reference counting
See JavaScript memory profling with Google Chrome


Using timers

Measure time to execute a function (SO) 

Using Google Chrome

finding JavaScript memory leaks with Chrome (SO)

You can also use V8 benchmark suite to profile JavaScript performance and identity bottlenecks. Checkout this link for more information. 

Not only in Google Chrome, but there are tools available in other major browsers as well. 

Writing memory efficient code is another important thing. You can also optimize existing JavaScript code in different ways.

Memory management in JS
http://stackoverflow.com/questions/23506064/how-do-you-detect-memory-limits-in-javascript
http://stackoverflow.com/questions/2936782/javascript-memory-limit

Performance of popular JavaScript MVC frameworks
http://www.filamentgroup.com/lab/mv-initial-load-times.html

Tips from W3Schools
Best way to profile JavaScript execution DOM interaction is expensive
http://andyshora.com/how-bad-is-dom-interaction-javascript.html 
http://stackoverflow.com/questions/8750101/multiple-small-dom-operation-vs-one-large-dom-operation 
http://stackoverflow.com/questions/6022396/too-many-dom-elements?rq=1
http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management
http://www.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/
 

Memory leaks in JavaScript - Stackoverflow

Resources
http://www.hongkiat.com/blog/ultimate-guide-to-web-optimization-tips-best-practices/

Perceived Performance

image credit : devbridge