Browser == ## Glossary - **BOM** - The Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser. The `window` object is one of them. - **CSSOM** - CSS Object Model. - **DOM** - The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. - **Reflow** - When the changes affect document contents or structure, or element position, a reflow (or relayout) happens. - **Repaint** - When changing element styles which don't affect the element's position on a page (such as `background-color`, `border-color`, `visibility`), the browser just repaints the element again with the new styles applied (that means a "repaint" or "restyle" is happening). - **Composite** - TODO ## Rendering High level flow of how browsers render a webpage: 1. DOM - The DOM (Document Object Model) is formed from the HTML that is received from a server. - Characters -> Tokens -> Nodes -> DOM. - DOM construction is incremental. - CSS and JS are requested as the respective `<link>` and `<script>` tags are encountered. 1. CSSOM - Styles are loaded and parsed, forming the CSSOM (CSS Object Model). - Characters -> Tokens -> Nodes -> CSSOM. - CSSOM construction is not incremental. - Browser blocks page rendering until it receives and processes all the CSS. - CSS is render blocking. 1. Render Tree - On top of DOM and CSSOM, a render tree is created, which is a set of objects to be rendered. Render tree reflects the DOM structure except for invisible elements (like the <head> tag or elements that have `display: none`; set). Each text string is represented in the rendering tree as a separate renderer. Each of the rendering objects contains its corresponding DOM object (or a text block) plus the calculated styles. In other words, the render tree describes the visual representation of a DOM. 1. Layout - For each render tree element, its coordinates are calculated, which is called "layout". Browsers use a flow method which only required one pass to layout all the elements (tables require more than one pass). 1. Painting - Finally, this gets actually displayed in a browser window, a process called "painting". ###### References - http://taligarsiel.com/Projects/howbrowserswork1.htm - https://medium.freecodecamp.org/its-not-dark-magic-pulling-back-the-curtains-from-your-stylesheets-c8d677fa21b2 ## Repaint When changing element styles which don't affect the element's position on a page (such as `background-color`, `border-color`, `visibility`), the browser just repaints the element again with the new styles applied (that means a "repaint" or "restyle" is happening). ## Reflow When the changes affect document contents or structure, or element position, a reflow (or relayout) happens. These changes are usually triggered by: - DOM manipulation (element addition, deletion, altering, or changing element order) - Contents changes, including text changes in form fields - Calculation or altering of CSS properties - Adding or removing style sheets - Changing the "class" attribute - Browser window manipulation (resizing, scrolling); Pseudo-class activation (`:hover`) #### References - [How Browsers Work](http://taligarsiel.com/Projects/howbrowserswork1.htm) - [What Every Frontend Developer Should Know About Webpage Rendering](http://frontendbabel.info/articles/webpage-rendering-101/) - [Rendering: repaint, reflow/relayout, restyle](http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/) - [Building the DOM faster: speculative parsing, async, defer and preload](https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/)