# 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/).
  
# Chrome DevTools Performance

Chrome provide a really great tool that helps us to figure out what is going on with our code, how many reflows (layout) and repaint do we have and more details about the memory, events, etc.

Bad code with a `6` costly reflows (layout):

```js
var box1Height = document.getElementById('box1').clientHeight;
document.getElementById('box1').style.height = box1Height + 10 + 'px';

var box2Height = document.getElementById('box2').clientHeight;
document.getElementById('box2').style.height = box2Height + 10 + 'px';

var box3Height = document.getElementById('box3').clientHeight;
document.getElementById('box3').style.height = box3Height + 10 + 'px';

var box4Height = document.getElementById('box4').clientHeight;
document.getElementById('box4').style.height = box4Height + 10 + 'px';

var box5Height = document.getElementById('box5').clientHeight;
document.getElementById('box5').style.height = box5Height + 10 + 'px';

var box6Height = document.getElementById('box6').clientHeight;
document.getElementById('box6').style.height = box6Height + 10 + 'px';
```

Optimized to have `1` reflow:

```js
var box1Height = document.getElementById('box1').clientHeight;
var box2Height = document.getElementById('box2').clientHeight;
var box3Height = document.getElementById('box3').clientHeight;
var box4Height = document.getElementById('box4').clientHeight;
var box5Height = document.getElementById('box5').clientHeight;
var box6Height = document.getElementById('box6').clientHeight;

document.getElementById('box1').style.height = box1Height + 10 + 'px';
document.getElementById('box2').style.height = box2Height + 10 + 'px';
document.getElementById('box3').style.height = box3Height + 10 + 'px';
document.getElementById('box4').style.height = box4Height + 10 + 'px';
document.getElementById('box5').style.height = box5Height + 10 + 'px';
document.getElementById('box6').style.height = box6Height + 10 + 'px';
```

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