Home >Web Front-end >JS Tutorial >Understanding rendering in the browser: How is the DOM generated?
Understanding rendering in the browser: How is the DOM generated?
- Linda HamiltonOriginal
- 2024-11-11 20:14:03851browse
In previous articles we learned about DOM and CSSOM, if you still have doubts about these two words I recommend reading the two posts below:
- Understanding rendering in the browser: DOM
- Understanding rendering in the browser: CSSOM
To recap, the DOM is a structure that the browser uses to render our page. However, internet data is not transmitted in the form of a DOM, so there needs to be a process before the DOM is ready for the browser to consume.
At this point you may be wondering how data travels on the internet?
Whenever we access a website, an exchange takes place in a pattern that we call client x server.
In this exchange, the client (your browser) asks the server to access the website www.cristiano.dev, which responds with all the content of the requested website, but this content comes in the form of bytes and in a way that is distant from the html/css/js we know.
What the browser will receive from the server is a sequence of bytes.
For this small snippet of html provided by the server:
<!doctype html>
<html>
<head>
<title>Um título</title>
</head>
<body>
<a href="#">Um link</a>
<h1>Um cabeçalho</h1>
</body>
</html>
The browser would receive in bytes something like this:
3C21646F63747970652068746D6C3E0A3C68746D6C3E0A20203C686561643E0A202020203C7469746C653E556D2074C3AD74756C6F3C2F7469746C653E0A20203C2F686561643E0A20203C626F64793E0A202020203C6120687265663D2223223E556D206C696E6B3C2F613E0A202020203C68313E556D2063616265C3A7616C686F3C2F68313E0A20203C2F626F64793E0A3C2F68746D6C3E
However, the browser cannot render a page with just this information. For our layout to be assembled, the browser will perform a few steps before having the DOM.
These steps are:
- Conversion
- Tokenization
- Lexing
Conversion: Bytes to characters
In this step the browser reads the raw data from the network or a disk and converts it to characters based on the encoding specified in the file, for example, UTF-8.
Basically it is the step in which the browser transforms bytes into the code in the format that we write in our daily lives.
Tokenization: Characters for tokens
At this stage, the browser converts character strings into small units called tokens. Every beginning, end of tag and content are counted, in addition, each token has a specific set of rules.
For example, the tag has different attributes than the
tagWithout this step we will just have a bunch of text with no meaning for the browser and at the end of this process our base html would be tokenized like this:
- ➔ Token: DOCTYPE, Value: html
- ➔ Token: StartTag, Name: html
- ➔ Token: StartTag, Name: head
-
➔ <strong>Token</strong>: StartTag, <strong>Name</strong>: title </li> <li> Title example ➔ <strong>Token</strong>: Character, <strong>Data</strong>: Title example </li> <li> ➔ Token: EndTag, Name: title -
➔ Token: StartTag, Name: p
- Hello World! ➔ Token: Character, Data: Hello world!
- ➔ Token: EndTag, Name: p
A token is an individual word or symbol in a text. "Tokenization" is the process of breaking text into smaller words, phrases, or symbols.
Lexing: Tokens for nodes
The lexing step (lexical analysis) is responsible for converting tokens into objects, but this is not the DOM yet. At this moment, the browser is generating isolated parts of the DOM, where each tag will be transformed into an object with attributes that bring information related to attributes, parent tags, child tags, etc.
The result after lexing our tag
it would be something like this:
<!doctype html>
<html>
<head>
<title>Um título</title>
</head>
<body>
<a href="#">Um link</a>
<h1>Um cabeçalho</h1>
</body>
</html>
DOM Construction: Nodes for DOM
We have finally reached the DOM construction stage!
At this point, the browser will consider the relationships between the html tags and will join the nodes into a tree data structure that represents these relationships in a hierarchical way. For example: the html object is the parent of the body object, the body is the parent of the paragraph object, until the entire representation of the document is created.
At the end of construction, our example html becomes a tree of objects like this:
3C21646F63747970652068746D6C3E0A3C68746D6C3E0A20203C686561643E0A202020203C7469746C653E556D2074C3AD74756C6F3C2F7469746C653E0A20203C2F686561643E0A20203C626F64793E0A202020203C6120687265663D2223223E556D206C696E6B3C2F613E0A202020203C68313E556D2063616265C3A7616C686F3C2F68313E0A20203C2F626F64793E0A3C2F68746D6C3E
Recap
The process for building the DOM is complex and takes place in the following steps:
- Conversion: HTML is received by the browser and converted from bytes to characters.
- Tokenization: Characters are transformed into tokens that represent parts of the html (tags, attributes, texts).
- Lexing: Tokens are organized into object nodes
- DOM: Objects are organized in a tree-like data structure in a hierarchical manner.
A similar process also takes place for CSSOM, consisting of conversion, tokenization and lexing.
Conclusion
You must be wondering where you are going to apply this knowledge throughout your day to day development...
It is true that this type of information will not be requested frequently, but it is important to understand how browsers, the main frontend work tool, work in essence.
This knowledge will also be very valuable for understanding the next topics we will cover here: Paint, repaint, flow and reflow.
Thank you very much!!
Thank you for getting here!
I hope you learned something new throughout this reading.
See you next time!
References
Constructing the Object Model
Deconstructing the Web: Page Rendering
The above is the detailed content of Understanding rendering in the browser: How is the DOM generated?. For more information, please follow other related articles on the PHP Chinese website!
Related articles
See more- An in-depth analysis of the Bootstrap list group component
- Detailed explanation of JavaScript function currying
- Complete example of JS password generation and strength detection (with demo source code download)
- Angularjs integrates WeChat UI (weui)
- How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills