DEV Community

Cover image for how does browser render webpage?
Rio Rifaldi
Rio Rifaldi

Posted on

how does browser render webpage?

#html #css #javascript #webdev

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.

Github

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

Image

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
 

Image
 

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   🔗

 

Image diagram
 

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

code to transform to binary

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

binary code result on log

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.

dicoding code images

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}`);
    //  }
    // }
}
Enter fullscreen mode Exit fullscreen mode

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 }
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode 

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' }
]
Enter fullscreen mode Exit fullscreen mode

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.

node diagram specific object

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>
Enter fullscreen mode Exit fullscreen mode 
const heading = document.querySelector("#heading-one");
console.dir(heading);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 
// 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";
Enter fullscreen mode Exit fullscreen mode

result on web :

result test inner HTML

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

DOM 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>
Enter fullscreen mode Exit fullscreen mode

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

diagram DOM created

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

Top comments (0)