Understanding rendering in the browser: How is the DOM generated?
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1662
14
1419
52
1312
25
1262
29
1235
24
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
The Evolution of JavaScript: Current Trends and Future Prospects
Apr 10, 2025 am 09:33 AM
The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.
JavaScript Engines: Comparing Implementations
Apr 13, 2025 am 12:05 AM
Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.
JavaScript: Exploring the Versatility of a Web Language
Apr 11, 2025 am 12:01 AM
JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.
Python vs. JavaScript: The Learning Curve and Ease of Use
Apr 16, 2025 am 12:12 AM
Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.
How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)
Apr 11, 2025 am 08:22 AM
This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base
From C/C to JavaScript: How It All Works
Apr 14, 2025 am 12:05 AM
The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.
Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)
Apr 11, 2025 am 08:23 AM
I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing
