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
$ git clone https://github.com/iampava/code-for-talks-or-articles.git
$ cd a-browser-story
$ npm install && npm start
$ navigate to http://localhost:8080/progressive-html
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
$ git clone https://github.com/iampava/code-for-talks-or-articles.git
$ cd a-browser-story
$ npm install && npm start
$ navigate to http://localhost:8080/blocking-scripts
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
$ git clone https://github.com/iampava/code-for-talks-or-articles.git
$ cd a-browser-story
$ npm install && npm start
$ navigate to http://localhost:8080/preload-scanner
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
.
Paint
Compositor
CSS
$ git clone https://github.com/iampava/code-for-talks-or-articles.git
$ cd a-browser-story
$ npm install && npm start
$ navigate to http://localhost:8080/css
#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
$ git clone https://github.com/iampava/code-for-talks-or-articles.git
$ cd a-browser-story
$ npm install && npm start
$ navigate to http://localhost:8080/fonts
#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!