DOM Performance

How the browser renders the document
- Receives the data (bytes) from the server.
- Parsing by converting into tokens (<, TagName, Attribute, AttributeValue, >) classification.
- Turns tokens into nodes.
- Turns nodes into the DOM tree.
- Build CSSOM tree from the css rules.
- CSSOM and DOM trees are combined into a RenderTree.
  - Computes which elements are visible and their computed styles.
  - Starting from the root of the dom tree.
  - Not visible elements like (meta, script, link) and display: none are ommited from the render tree.
  - For each visible node, find the appropriate matching CSSOM rules and apply them.
- Reflow: compute the layout of each visible element (position and size).
- Repaint: renders the pixels to screen.
Repaint
- Occurs when changes affect the visibility.
- opacity, color, background-color, visibility.
Reflow (Layout, LayoutFlush, LayoutThrashing)
- Occurs when the changes affect the layout.
- width, position, float.
- It is re-calculation of positions and dimensions.
- Has a bigger impact, changing a single element can affect all children, ancestors, and siblings or the whole document.
- Triggers (chagne dom or css, scrolling, user actions focus).
- Reflow only has a cost if the document has changed and invalidated the style or layout.
- Something Invalidates + Something Triggers = Costly Reflow.

Minimizing Repaints And Reflows

Don't change styles by multiple statements, instead:
- Add class.
- Change the cssText.
Batch DOM changes
- Use a documentFragment to hold temp changes.
- Clone, update, replace the node.
- Hide the element with display: none (1 reflow, 1 repaint), add 100 changes, restore the display (total 2 reflow, 2 repaint).
Don't ask for computed styles repeatedly, cache them into variable.
- Multiple reads/writes (like for the height property of an element)
  - Writes, then reads, from the DOM, multiple times causing document reflows.
  - Read(cached), write(invalidate layout), read(trigger layout).
  - To fix: read everything first then write everything.
Resources
- CSSTriggers.

Optimize Selectors
- jQuery uses:
  - document.querySelectorAll().
  - document.getElementById() faster.
  - jQuery selector extensions.
- Avoid jQuery selector extensions (:even, :has, :gt, :eq).
- Avoid complex specificity.
- ID-Based Selectors
Add style element for chaning > 20 instead of .css.
Cache Length During Loops.
Avoid inspecting large numbers of nodes
- document.getElementById('id').getElementsByTagName('*') better than document.getElementsByTagName('*').
Cache DOM values in script variables
- var sample = document.getElementById('test')