The magic behind the browser

Alex Grigoruta

MAGIC

The Popular Guy

The Underdog

Their Environment

Rendering Engine

JavaScript Engine

Networking Component

UI Interface

Platform Specific Bindings

The magical JavaScript Engine

V8

Chakra

SpiderMonkey

Heap

Stack

foo()

bar()

baz()

{

}

Memory

Allocation

Execution

Contexts

Heap

Stack

baz()

foo()

bar()

setTimeout

XHR

DOM

Web APIs

Callback Queue

Render Queue

Event Loop

The call stack

Single Thread => One thing at a time

Call Stack

function foo() {
    console.log('wow');
}

function bar() {
    foo();
}

function baz() {
    bar();
}

baz();

main()

baz()

bar()

foo()

console.log('wow')

Call Stack

function foo() {
    console.log('wow');
}

function bar() {
    foo();
}

function baz() {
    bar();
}

baz();

main()

baz()

bar()

foo()

console.log('wow')

Call Stack

function foo() {
    return foo();
}

foo();

main()

foo()

Blocking

A.K.A. why are things executing so slow?

var foo = $ajaxSynchGET('/resource1');
var bar = $ajaxSynchGET('/resource2');
var baz = $ajaxSynchGET('/resource3');

console.log(foo);
console.log(bar);
console.log(baz);

Call Stack

main()

$ajaxSynchGET('/res1')

$ajaxSynchGET('/res2')

$ajaxSynchGET('/res3')

console.log(foo)

console.log(bar)

console.log(baz)

Blocking

Why are things not rendering?

Asynchronous Callbacks to the rescue

console.log('I');

setTimeout(function() {
    console.log('talk');
}, 5000);

console.log('alot');

Console

> I

> alot

> talk

console.log('I');

setTimeout(function() {
    console.log('talk');
}, 5000);

console.log('alot');

Call Stack

main()

console.log('I')

setTimeout(cb, 5000)

console.log('alot')

console.log('I');

setTimeout(function() {
    console.log('talk');
}, 5000);

console.log('alot');

Call Stack

main()

console.log('alot')

console.log('talk')

Heap

Stack

baz()

foo()

bar()

setTimeout

XHR

DOM

Web APIs

Callback Queue

Render Queue

Event Loop

The Event Loop

Not all heroes wear capes

The almighty Render Engine

High-level view

Parse HTML +

Parse CSS

Paint

Layout

Render Tree

Parsing

Parsing HTML

Forgive me HTML, for I have sinned

<body><p class=hopa>Look mom, no quotes</p>
<div><span>How is this happening

The Browser has forgiven your sins.

Go in peace

<html>
    <head></head>
    <body>
        <p class="hopa"> 
            Look mom, no quotes 
        </p>
        <div>
            <span>
                How is this happening
            </span>
        </div>
    </body>
</html>

Parsing Flow

Script Execution

DOM

Tree Construction

Tokenizer

document.write()

Tokenizer

div

<

>

</

div

>

Start Tag

End Tag

Tag Open

Tag Name

Tag Close

Tag Name

Close Tag Open

Parse Tree

html

head

body

p.hopa

#text

div

span

#text

DOM Tree

HTMLHtmlElement

HTMLHeadElement

HTMLBodyElement

HTMLParagraphElement

Text

HTMLDivElement

HTMLSpanElement

Text

Speculative Parsing

<script src="smth.js" />
//......


<img src="nyan_cat.jpg">
<link href="cats.css" />

CSS Parser

CSSOM

p.div {
    width: 28rem;
}

.container {
    color: black;
}

CSSStyleSheet

CSSRule

Selectors

Declaration

Selectors

Declaration

div

width

28rem

.container

color

black

Render Tree

Everything is visual

1. RenderObjects

2. RenderStyles

3. RenderLayers

4. Line Boxes

Everything is visual

DOM Node

display: none

float: right

font-size: 16px

Everything is visual

RenderObject

float: right

RenderObject

font-size: 16px

Everything is visual

RenderLayer