What is it?
- Always measure first! and Optimize it!
Converting HTML To The DOM
- Make a request to Server with HTML -> The HTML will be converted to DOM (The browser will be processing the HTML and building the DOM)
- The specific rules
- Every time the browser meets a tag bracket, it automatically emits a token.
- This entire process is done by the tokenizer.
- While it’s being processed, another process is happening which is consuming the token to create nodes.
- DOM : a tree structure that captures the content and properties of the HTML and all the relationships between the nodes.
- How Google does optimize it? :
- [Incremental HTML Delivery] Think about the Google Search Engine. The header renders first and the rest of the HTML based on your search query will be shown to the user. (Returning the partial HTML could be a really nice performance optimization)
- StackTrace in Timeline :
- The browser blocks page rendering til it receives and processes all of the CSS. CSS is render blocking
- It’s really important to use media queries on css stylesheets. like this one.
- Worth to Know : The more specific CSS rule is more expensive cuz it has to traverse more nodes in the DOM tree. Why do browsers match CSS selectors from right to left?
- Combine above those two DOM tree and CSSOM into the render tree.
- Render tree only captures visible contents
- How does it work?
- To know where and how all the elements are positioned on the page
- “ setting the width as your device width. e.g)
- Request HTML Resources
- Receive Data
- Parse HTML (Converting the received Bytes to DOM tree)
- Contruct CSS Object Model
- Recalculate Style (Layout : Build Render Tree (Computing all the styles for the visible contents)
- Layout (Compute the location and the size of the render tree elements)
- Paint (Render the page on screen)