Anatomy of
a browser

@ErinJZimmer
  • Mozilla tech speaker
  • Google developer expert
<blink>
<blink>
<blink>
<blink>
<blink>
<blink>
<blink>

<html></html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Autopsy of a browser</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet"> <link rel="stylesheet" href="reveal/reveal.css"> <script src="reveal/reveal.js"></script> <link rel="stylesheet" href="slides2.css"> <link rel="stylesheet" href="zenburn.css"> </head> <body> <div class="reveal">
  • Tokenisation
  • Parsing
  • Layout
  • Painting
  • Composite

HTML Tokenisation

itisatruthuniversallyacknowledged
it is a truth universally acknowledged
start tags
<h1>
<label for="name">
<input id="name" />
end tags
</h1>, </label>
text
Please enter your name
comment
<!-- start of form -->
name=label
for=name
N
a
m
e
name=label
name=input
id=name

HTML parsing

name="html"
name="body"
name="article"
 

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head> 
  <body> 
    <article> 
      <h1>Cats</h1>
      <img src="cat.webp" />
    </article> 
  </body>
</html>
name=label
for=name
  • doctype html
  • html
    • head
      • link
    • body
      • article
        • h1
          • C
          • a
          • t
          • s
        • img

CSS tokenisation
& parsing

  • <link rel="stylesheet" ...>
  • <style></style>
  • <div style="...">
Origin Selector Property Value Specificity Order
User * font-size 32px 0 0 0 0 1 0
Author td .fancy-button background-color rgb(255,255,0) 0 0 0 1 1 3
Author .fancy-button background-color rgb(0,255,0) 0 0 0 1 0 1
Author .fancy-button border-width 3px 0 0 0 1 0 2
User Agent button border-color rgb(0,0,0) 0 0 0 0 1 0
https://alistapart.com/article/braces-to-pixels
  • doctype html
  • html
    • head
      • link
    • body
      • article
        • h1
          • C
          • a
          • t
          • s
        • img
Origin Selector Property Value
Author article.cats background-color aliceblue
Author h1 margin 20px 0
Author article padding 10px
Author img.cats border 3px solid red
User agent head display none
User agent body margin 8px

Layout

Cats

Painting

  • bottom layer up
  • background -> borders -> content

Composite

  • browser chrome
    vs
    browser engine
  • tokenisation & parsing
  • layout, paint, composite
Thanks!
@ErinJZimmer
https://browsers.ez.codes
Tokeniser
Parser
@ErinJZimmer