Javascript tips

Batch your DOM changes

Every time you make DOM changes, batch them up to prevent repeated screen rendering. If you're making style changes, try to make all of your modifications at once rather than applying changes to each style individually.

Use document.getElementById()

Using jQuery lets you create specific selectors based on tag names and classes, but this approach necessitates several iterations as jQuery loops through DOM elements to find a match. You can speed up the DOM by using the document.getElementById() method instead.

// With jQuery
var button = jQuery('body div.window > div.minimize-button:nth-child(3)')[0];

// With document.getElementById()
var button = document.getElementById('window-minimize-button');

Trim your HTML

The complexity of your HTML plays a large role in determining how long it takes to query and modify DOM objects. If you can cut your application's HTML by half, you could potentially double your DOM speed. That's a tough goal, but you can start by eliminating unnecessary <div> and <span> tags.

Use pointer references

You can also cut down on DOM traversal trips by storing pointer references for in-browser objects during instantiation. If you don't expect your DOM to change, storing a reference to the DOM or jQuery objects needed to create your page can help speed everything along. Alternatively, if you need to iterate inside a function, but you haven't stored a reference, you can make a local variable with a reference to the object.

Use HTTP/2

HTTP/2 is the latest version of the HTTP protocol and provides some great enhancements that will not only help improve your JavaScript performance but will also help speed up your site in general. HTTP/2 uses multiplexing, therefore allowing multiple requests and responses to be sent at the same time. If you haven't moved to HTTPS yet, be sure to do so as soon as possible to take advantage of the performance improvements that HTTP/2 has to offer.

Unorganized code

JavaScript's loose nature is both an asset and a liability. You can do a lot with just a small subset of lexical constructs, but a lack of organization in your code can result in inadequate allocation of resources. Familiarizing yourself with ECMA standards can help you construct more concise JavaScript.

Inefficient iterations

Since iterations take up so much processing time, they provide a great starting point for optimizing your code. Removing unnecessary loops or calls within loops will speed up your JavaScript performance.

Poor event handling

Proper use of event handlers can improve performance by reducing the depth of your call stack; however, if you don't keep track of them, they can execute repeatedly without your knowledge. Use them sparingly and wisely.

Too many dependencies

If your JavaScript dependencies are plentiful and poorly managed, then your application's performance will suffer. Your users will have to wait longer for objects to render, which is especially annoying for mobile users with limited bandwidth.

Too many interactions with the host

Every interaction with the host object, or the user's browser, increases unpredictability and contributes to performance lag. This problem often manifests as slow rendering of DOM objects. You obviously can't avoid such interactions, but you can keep them to a minimum. Learning more about what can contribute to blocking the DOM and how to fix it.