A browser story

๐ŸŽฅ

๐Ÿบ

๐Ÿ“

๐ŸŽ

๐Ÿข

๐ŸŽจ

#1/ HTML

Did you know HTML is progressive?

ย 

Meaning browsers can use it as it comes off the network, on the go?

Progressive HTML

$ npm install
$ npm start

The script will execute only after the image loads!

<h1>Ha ha!</h1>
<img src="bob.png">
<script src="script.js"></script>

TRUE! ๐Ÿ‘

๐Ÿ‘Ž FALSE!

FALSE

The script will execute only after the CSS loads!

<h1>Ha ha!</h1>
<img src="bob.png">
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>

TRUE! ๐Ÿ‘

๐Ÿ‘Ž FALSE!

TRUE

Blocking Scripts

$ npm install
$ npm start

For every part:

โœ… tokenization

โœ… DOM creation

โœ… preload scanner

Tokenization
<img src="avatar.png">

<p> Bob </p>

StartTag: {

ย ย  name: "img",

ย ย  attributes: [{

ย  ย  ย  name: "src",

ย  ย  ย  value: "avatar.png"

ย ย  }]

}

StartTag: {

ย ย  name: "p",

ย ย  attributes: []

}

Text: "Bob"

EndTag:ย  {

ย ย  name: "p",

}

Preload scanner

It's job is to also keep the network busy, while the main thread is executing!!!

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
  <h1> A browser story</h1>
  <h2> Yep, here in Iasi!</h2>
    
  <script src="app.js"></script>
    
  <h3> Hold on, here come some resources</h3>
    
  <img src="bob.png"/>

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

  <img src="alice.png"/>
</body>
</html>

Preload Scanner

$ npm install
$ npm start
DOM
#2/ CSS

Inline Styles

External

Styles

Browser Styles

}

CSSOM

CSSOM
body
font-size: 16px;
display: block;
...
h1
font-size: 48px;
color: red;
...
#logo
position: fixed;
background: red;
...

...

...

DOM
CSSOM

Yellow, duh?!

Render tree!!!

and

Render Tree

DOM & CSSOM of the elements to be rendered

ย 

(aka: everything except `display: none`)

position: absolute;

Layout
.getBoundingClientRect()
Paint
Compositor

CSS

$ npm install
$ npm start
#3/ Fonts

There are a couple of easy things in life

ย  ย  ย  ย  ย ย  ...neither of which is called "font-loading".

The browser wants to help us...

Of course it does!!!!!!! ๐Ÿ‘ฟ

So it doesn't paint text until the fonts arrived!

Fonts Demo

$ npm install
$ npm start
#4/ Events
DOMContentLoaded
The HTML completely loaded and parsed!
load
All resources have finished loading!

What if not all the HTML has arrivedโ“โ“โ“

but now what...?

#1 Act cool AF! ๐Ÿ˜Ž

How about you explain to me how the page is being styled!?

When someone in an interview asks you about centering things in CSS...

you respond

Oh yeah! Let's see who knows more about resource loading!

Or if someone asks about the cute little semantic HTML...

you respond

#2 CSS Animations

Animate just transform and opacity property!

#3 Fonts

Make use of the font-display property!

block
Gives the font face a short block period and an infinite swap period.
swap
Gives the font face an extremely small block period and an infinite swap period.
fallback
Gives the font face an extremely small block period and a short swap period.

#4 Optimizations

Understand the performance tab...

ย 

And maybe even optimize for critical rendering path???

#7/ Bonus!

๐ŸŽ

Q&A?! ๐Ÿค”