How browsers work?

Disclaimer

image source: commons.wikimedia.org

 

image source: www.html5rocks.com

Browser components

Parsing

Render tree

Layout

Paint

Basic rendering engine flow

Parsing

Parsing

CSS and Javascript

HTML

Parser

Conventional

Unconventional

Parsing

Parsing - translating a document into a structure that code can use.

image source: commons.wikimedia.org

Parsing

Grammar:

  • vocabulary
  • syntax rules

image source: commons.wikimedia.org

Parsing

  • Lexical analysis
  • Syntax analysis
  • Lexer ( Tokenizer) - create tokens
  • Parser - apply the syntax rules

Lexer

Parser

Request token

Store token

Send token

Use token

Parsing

Ready available parsers:

  • Flex
  • Lex
  • Yacc
  • Bison

Webkit uses Flex (lexer) and Bison (parser)

Parsing

  • HTML not contex free grammar
  • HTML Document Type Definition (DTD) w3c
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <p>
            HELLO WORLD
        </p>
    </div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <p>
            HELLO WORLD
</body>
</html>

Parsing

<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Parsing

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>
    <p>
        HELLO WORLD
    </p>
</div>
</body>
</html>

Text

DOM Tree 

Render tree

Render tree

  • Render tree generated while DOM tree is constructed
  • Visual elements in the order which they are going to be displayed
  • Elements in the render tree are called renderer or render objects
  • Render object is a rectangle

Render tree

Switch case if DOM element needs to be displayed and how:

  • Render none
  • Render inline
  • Render block
  • Render inline-block
  • Render list-item

Layout

Layout

  • calculates position and size 
  • most of the time possible to compute geometry in one pass
  • recursive process begins at the root object (<html>)

Layout

Dirty bit system - a system that makes sure that browsers don't need to do the full layout on every interaction.

Layout

Global and incremental layout

image source: www.html5rocks.com

Global:

  • affects all renders (font size)
  • screen resize

Layout

Gecko reflow

Paint

Paint

Render tree is being traversed and the paint() method is used to display content on the page.

Paint

Global and incremental painting

  • reduce the effort of painting the whole thing
  • dirty bit system

Paint

Painting order:

  1. background color
  2. background image
  3. border
  4. children
  5. outline

I hear and I forget. I see and I remember. I do and I undertand.

Resources

  • https://goo.gl/kGu8j5 (How browsers work)
  • https://goo.gl/73oAPx (Let's build a browser engine!)

THANK YOU

@KKnego

HOW BROWSERS WORK?

By Kruno Knego

HOW BROWSERS WORK?

  • 496
Loading comments...

More from Kruno Knego