Javascript tips

When functions are executed in JavaScript, a set of first order variables including the immediate scope chain, the arguments of the function and any locally-declared variables are instantiated. Therefore, it takes time to climb up the scope chain when you try to access a globally-declared variable. Reducing the the call stack's depth and taking advantage of the this keyword can speed up execution.

While primitive value types like strings and integers get copied every time they are passed into a new function, reference types, like arrays and objects, are passed as lightweight references. Therefore, you can do things like pass DOM node references recursively to cut down on DOM traversal. Also, remember that comparing strings always takes longer than comparing references.

Binding your functionality to the mouseup event, which fires before the click event, provides a performance boost by ensuring that no interactions are missed if the user makes several mouse clicks in rapid secession.

Since events like 'mousemove' and 'resize' execute hundreds of times per second, pay special attention to any event handlers bound to those events. If they take more than 2-3 milliseconds to complete, you need to better optimize your code.

Caching is your greatest asset for speeding up load times. Ensure you leverage browser caching as well as intermediary caching mechanisms such as a content delivery network. This will ensure that your assets load quickly both for previous visitors as well as first time visitors.

Adding a dependency manager, like RequireJS or webpack, to your load scripts lets the user see your application's layout before it becomes functional. This can have a huge positive impact on conversions for first-time visitors. Just make sure your dependency manager is set up to track which dependencies have already been loaded, or else the same libraries could load twice. Always aim to load the absolute minimum the user needs to see.

Bundling your application's components into *.js files and passing them through a JavaScript minification program will make your code leaner. Some popular code minification tools are listed at the end of this tutorial.

On top of analyzing, parsing and rewriting your code for optimal performance, Google Closure Compiler also double checks your syntax and variable references.

Library dependencies add a lot to loading times, so strive to keep their use to a minimum, and avoid them entirely if at all possible. One way to reduce your dependency on external libraries is to rely more on in-browser technology. Furthermore, if you need complex CSS selectors, try using Sizzle.js instead of jQuery. If you have libraries that contain just one feature, it makes more sense to just add that feature separately.

If you have scrollable DIVs, you can use a buffer to remove items from the DOM that aren't currently visible inside the viewport. This technique helps you save on both memory usage and DOM traversal.