How Browser works

How Browser Works

Codepen Meetup, Hyderabad

September, 2015

Me!

@arvindr21

Author: Learning Ionic

Blog: The Jackal of Javascript

Browsers?

Heads Up

Compiling what I learnt so far.

Written by a lot of awesome people.

only Sharing the knowledge.

http://www.google.com

Resolve DNS
Request Page
Tokenize the response
Parse HTML
Build DOM tree
Build Render tree
Layout the Render tree
Painting

DNS Lookup

Request a Page

Parse, Render, Layout & Paint

Turn HTML text

to

Document Object Model

<html>
  <body>
    
      Hello World
    
    <img src="example.png"/>
  </body>
</html>

Process Start Tag For InBody
Close The Cell

DOM Tree + CSS == Render Tree

CSS Box Model

Only visual elements are in the render tree

Not part of render tree

`Head`
`display:none`
`position:absolute`
`position:relative`

switch (style.get().display()) {
    case NONE:
        style.dropRef();
        return nullptr;
    case INLINE:
        return createRenderer<RenderInline>(element, WTF::move(style));
    case BLOCK:
    case INLINE_BLOCK:
    case COMPACT:
        return createRenderer<RenderBlockFlow>(element, WTF::move(style));
    case LIST_ITEM:
        return createRenderer<RenderListItem>(element, WTF::move(style));
    case TABLE:
    case INLINE_TABLE:
        return createRenderer<RenderTable>(element, WTF::move(style));

Source

Resolve Styles - CSS Specificity

User Styles
Inline Styles
Browser Styles

Calculate the position - Size

Why this is important?

Element

clientHeight, clientLeft, clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth

Frame, Image

height, width

Window

getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode()

TRIGGER HW ACCEL

translateZ(0) or translate3d(0,0,0)

Animate with Top/Left

VS.