# 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](https://csstriggers.com/).

# jQuery Performance

* 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')`