Forked from faressoft/dom_performance_reflow_repaint.md
Created
August 14, 2023 04:08
-
-
Save SimoneCheng/5d1219c9cd68bca2fd1df66f36c07b46 to your computer and use it in GitHub Desktop.
DOM Performance (Reflow & Repaint) (Summary)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 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')` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment