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.
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)'); // With document.getElementById() var button = document.getElementById('window-minimize-button');
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.
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.
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.
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.