DEV Community: Rio Rifaldi

how does browser render webpage?

Rio Rifaldi — Sun, 16 Nov 2025 16:15:46 +0000

what is rendering?

"Rendering a webpage is the process of turning HTML, CSS, and JavaScript code into an interactive page that website visitors expect to see when clicking on a link."

Qarea 🔗

"Rendering is the process of generating HTML markup to display web pages in the browser"

Netlfy blog 🔗

basicly rendering is a process generating HTML to display on web browser. so, what kind of "process" is it?
before we deep dive into it, let's understand how browser processing HTML CSS & Javascript and then showing up as beautiful UI for you.

when you click website like Github, what actually happen is you're visiting 140.82.116.4 IP address. This IP is github server website which will directing you to github landing page. This is the actual domain name, but the problem is it's not human readable. Client usually not remember this some of bouch number, this were DNS come in place.

"The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com."

cloudflare

The main goal is making this 140.82.116.4 some short of IP become human readable domain like github used www.github.com.
So where i got this IP? the easies way is visit nslookup.io then type which domain do you want to search

We have done with DNS, let's comeback to scenario. The moment you open github landing page, click right on your mouse / trackpad > click inspect > open Network tab > hit refresh page

This bouch of information was recieved by browser from github server. Notice that on red reactangle there is a text Content-Type: text/html; charset=utf-8, what does mean?
it's mean this selected file that coming from github server was formated as text/Html content with charset of utf-8.
this is true because if you click on Response tab, there is full of HTML code and on previous tab is the preview but no styling yet.
so what is next process?

1. Parsing

"Parsing means analyzing and converting a program into an internal format that a runtime environment can actually run, for example the JavaScript engine inside browsers."

MDN 🔗

"HTML parsing is basically: taking in HTML code and extracting relevant information like the title of the page, paragraphs in the page, headings in the page, links, bold text etc."

stackoverflow 🔗

first of all cloud server (or anything from resources, it can be your local disk when you develop app locally) will send html first as row byte of data

what happened is imagine you have HTML tag on server which <h1 class="username" id="user-name" custome-attribute="hello there">my name is rio rifaldi</h1>.
for delivering purposes, this particular HTML must be encoded into binary data. the result of console.log above will be this

did you see the 0 and 1 number? that is binary code.
this binary will delivering through cloud / network to your computer, in this case can be your favorite browser. When it arrived, the browser will decoded with charset (character of set) utf-8.

finally we got our data, now we will focus on actual topic Parsing. we will use library html-tokenizer to demonstrate the flow. name "tokenizer" because on that library there are 2 main functions; Parser and Tokenizer.

first let's jump into documentation, follow instruction to download and use it in your favorite editor.


import {Tokenizer, Parser} from "html-tokenizer";

// * Html Tag 
const Html = '<h1 class="username" id="user-name" custome-attribute="hello there">my name is rio rifaldi</h1><p>reyy</p>';

// * Parsing Html (you can get this code by copy paste in "html-tokenizer" documentation)

let count = 1;
for (const token of Parser.parse(Html)) {
    console.log();
    console.log(`execution ${count++} : `);
    console.log(token);
    // switch (token.type) {
    //  case "open": {
    //      console.log(`Opening tag: ${token.name}`);
    //      console.log("Attributes:", token.attributes);
    //  }
    //  case "text": {
    //      console.log(`Text node: ${token.text}`);
    //  }
    //  case "close": {
    //      console.log(`Closing tag: ${token.name}`);
    //  }
    //  case "comment": {
    //      console.log(`Comment: ${token.text}`);
    //  }
    // }
}

for demonstration purposes, i will comment switch block and add some console.log() so we can see how it works. what happened on code above is importing Parser function and looping through Html string from left to right. Parser function will indentify which string is open tag of close tag


Log Result : 

execution 1 : 
{
  type: 'open',
  name: 'h1',
  attributes: {
    class: 'username',
    id: 'user-name',
    'custome-attribute': 'hello there'
  },
  selfClosing: false
}

execution 2 : 
{ type: 'text', text: 'my name is rio rifaldi' }

execution 3 : 
{ type: 'close', name: 'h1', selfClosing: false }

execution 4 : 
{ type: 'open', name: 'p', attributes: {}, selfClosing: false }

execution 5 : 
{ type: 'text', text: 'reyy' }

execution 6 : 
{ type: 'close', name: 'p', selfClosing: false }

as you can see from code above we can explain that:

the execution is true start from left to right. it's identify step by step every line of code
identifier started by reading first opened tag (<), name tag (h1) and all of attribute added (class="username" id="user-name" custome-attribute="hello there"). text and closing tag does but on different execution and object
if you confusing what does mean selfClosing mean, <input/> <hr/> <br/> <img/> these an example of selfClosing. basicly selfClosing is a kind of HTML tag that does not need to be closed manually by its closing tag.

the whole process we have been through is Parsing, excacly like the definition said :

"Parsing means to make something understandable (by analysing its parts)."

Quora

from the binary data we decode it using utf-8 become string, then Parse it using library html-tokenizer, as the result is bouch of object with identifier. these object is understandable by browser engine so we can move to next process.

2. Tokenization


import {Tokenizer, Parser} from "html-tokenizer";


// * Html Tag 
const Html = '<h1 class="username" id="user-name" custome-attribute="hello there">my name is rio rifaldi</h1><p>reyy</p>';

const tokens = [...Tokenizer.tokenize(Html)];
console.log(tokens);


log result: 

[
  { type: 'start' },
  { type: 'opening-tag', name: 'h1' },
  { type: 'attribute', name: 'class', value: 'username' },
  { type: 'attribute', name: 'id', value: 'user-name' },
  {
    type: 'attribute',
    name: 'custome-attribute',
    value: 'hello there'
  },
  { type: 'opening-tag-end', name: 'h1', token: '>' },
  { type: 'text', text: 'my name is rio rifaldi' },
  { type: 'closing-tag', name: 'h1' },
  { type: 'opening-tag', name: 'p' },
  { type: 'opening-tag-end', name: 'p', token: '>' },
  { type: 'text', text: 'reyy' },
  { type: 'closing-tag', name: 'p' },
  { type: 'done' }
]

basicly Tokenization has relation with parsing. Tokenization broken down string of HTML tag into small indetifier be more specific and then convert it to array of object. you can see code above there is object { type: 'start' } { type: 'done' }, the more HTML code there are, the more object { type: 'closing-tag }' type: '{ closing-tag } is in the middle

3. Create Node

after object created and idetified, browser will convert it to node.

if you familiar with HTML tag, node is HTML tag but in this case with javascript object. the object itself came when you console.dir() element using javascript

<body>
     <h1 class="username" id="heading-one">my name is rio rifaldi</h1>
    <script src="script.js"></script>
</body>

const heading = document.querySelector("#heading-one");
console.dir(heading);

inside of object there are many of instance properties, instace methods or event. simple example, you can insert text on HTML hardcodedly right? like <p> _you text in here_ </p>. but what if we want change innner text P tag using javascript? this where instance properties coming.

<body>
    <p id="text-para">hi there,</p>   
        <script src="script.js"></script>
</body>

// select P tag with id text-para
const paragraph = document.querySelector("#text-para");

// override inner P tag using 'innerHTML' properties
paragraph.innerHTML = "hi there! my name is rio rifaldi";

result on web :

4. Creating DOM

"The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web"

MDN

in simple way, DOM makes every single your node (html tag like <p> tag) connected with some short of line become hierarchy

why should hierarchy?
diagram of hierarchy above if we convert to real HTML code become like this


<body>
    <div>
       <h1>{any text}</h1>
    </div>
    <div>
      <p>
         <span>{any text}</span>
      </p>
    </div>
</body>

the idea of hierarchy is the syntax HTML itself like hierarchy (has children element). with DOM you can manipulate HTML page or even CSS using logical javascript file. for example creating element, update inner text html like we did before, create eventlistener etc.

if we wrap it up become like this

that was HTML file, we move to CSS file. same process with HTML, CSS will sent by server as binary -> Parsing -> Tokenization -> Node and instead of DOM like html, CSS turn into CSSOM

now we have DOM and CSSOM, these two things is independent. DOM for content and CSSOM for styling content. if we combine DOM and CSSOM, it will become Render three
render tree will display on page browser base on height and width your screen.

resources

Dual Boot Linux Zorin And Windows

Rio Rifaldi — Sun, 16 Nov 2025 16:14:34 +0000

Reader Context

This article is something like my daily info that I got from Gemini AI or Internet and try to implement it in real life. All the explanation below is like personal info for me, not for real explanation to make people understand.

If you find yourself a curious after reading my article and want deep detail about it, please comment below. I will answer and explain as much as possible 🤗

Background Story

3 Months ago I initiative to dual boot with windows and archlinux. I choose archlinux because most people on internet said that this is the minimalist Linux and the one of lightweight Linux.

"Yes. Minimalist and lightweight but came with setting manual price. At that time I don't understand that concept"

I downloaded ISO file, create bootable with Rufus on my USB stick.
Plug in go to BIOS, setup partition Manually
Installing Grub for dual boot, setup manually

"I Know takes an hours only for dealing with CLI command tasks like creating partitions and connecting to Wifi"

And then the result? FAILED!!

Windows boot configuration not found...
Grub configuration broken ( version incompatible if I not mistaken) ...

So much manual setup and somehow make me traumatized installing
Operating system via Terminal

Times goes on, I try to encourage myself installing Linux dual boot again but with less manual. One candidate shown on my mind is Ubuntu, but unfortunately Ubuntu is not the one of lightweight Linux gnome.

Many people suggested on Reddit to find Linux based on XFCE desktop environment

Note:
XFCE is Graphical User Interface for Linux. Basically User Interface which control file management, windows manager, setting manager etc.
XFCE count as the one of lightweight because able to run comfortably in with 500Mb to 1Gb of RAM
Another example of heavier than XFCE are

GNOME (GNU Network Object Model Environment) : Ubuntu, Fedora, zorin OS Core. Has minimum requirement 2Gb of RAM

KDE Plasma

After an hours of reset, I decided to install Zorin Lite

Some of you might be wondering

"why did you choose Zorin lite? Zorin lite will be sunset in a few years ahead"

Yes that is true, but I have a few consideration here :

I need to install lightweight Linux for my limited laptop spec
Zorin OS is very beginner friendly for person who first ever try Linux
Even on same laptop, there is windows 10 that already end support. But somehow with limited spec I can't upgrade to windows 10
Just do for fun and simple project

For this dual boot, Zorin OS managed it automatically without any single manual setup and works perfectly

Understanding How does Computer Process Before OS Booted

When first computer powered by electricity ( powered on ), on motherboard there is software build in called firmware

Firmware is basically build in motherboard's software to perform initial run for component like HDD, CPU, USB, RAM so user able to get into BIOS setting.

In my Dell latitude laptop, my fan's connector on motherboard somehow detected fan but does not send electricity. So I bypassed it into another connector that has 5V.
As the result, every time I turn on my laptop there is warning "Your fan is malfunction". This is where firmware do the Job

After firmware checking all the component, we go into bootable section. I have mentioned before about Grub boot-loader, basically every operating system has their own bootable.

On windows, we have windows boot manager

But if you have multiple operating system store on your hard drive, your PC must choose which OS will control my hardware. To perform these action, this is where we need boot-loader

With boot-loader if you have multiple Operating system, you can easily

Choose operating system by selecting via keyboard arrow
Control Default operating system every PC boot ( auto select OS )
Customize advance configuration

One of easy use boot-loader is GRUB
After OS selected, this is what you see on screen ( Windows, Mac, Linux )

I hope this post useful for whoever people reading this.
Thank you✨