1. Use Document Fragments: Document fragments allow you to create a new document, add nodes to it, and then append this document to an already existing element. This approach helps to significantly reduce the reflow.
1. Batch DOM changes: Instead of making one change at a time, group similar changes together.
1. Avoid unnecessary complexity: When creating a dynamic webpage, keep the structure as simple as possible. The more complex your page is, the harder it becomes for the browser to make the changes.
1. Use classes to change element styles: Instead of adding inline styles to a DOM element in JavaScript, toggle the elements classes. Reflows are quite expensive, and adding several inline styles will cause multiple reflows.
1. Reduce Repaints and Reflows: Repaint occurs when changes are made to an elements skin that changes visibility but not layout, and reflow is even more critical as it involves changes that affect the layout of a portion of the page (or the whole page).
1. Use requestAnimationFrame for Animations: requestAnimationFrame allows for animations to run smoothly by making sure changes happen in sync with the display refresh rate, so you don’t end up with more frames than the display can render.
1. Avoid touching the DOM unnecessarily: If you can make changes to a JavaScript variable rather than a DOM element, do that. Accessing the DOM is usually the slowest part of any JavaScript operation.
1. Limit the Scope of your CSS: JQuery uses CSS selectors, which work from right to left, applying the right most tag, class, or id and then filtering all the way up. Therefore, efficient CSS writing can significantly increase the speed.
1. Use Event Delegation: Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements.
1. Reduce the number of elements on the page as much as possible: More elements on the page make the DOM tree bigger, which means it takes a longer time for the browser to traverse it.
