SlideShare a Scribd company logo

Happy Browser, Happy User! NY Web Performance Meetup 9/20/19

•
•
K
Katie Sylor-Miller

xPerformance is fundamentally, a UX concern. Sites that are slow to render or janky to interact with are a bad user experience. We strive to write performant code for our users, but users don’t directly interact with our code - it all happens through the medium of the browser. The browser is the middleman between us and our users; therefore to make our users happy, we first have to make the browser happy. But how exactly do we do that? In this talk, we’ll learn how browsers work under the hood: how they request, construct, and render a website. At each step along the way, we’ll cover what we can do as developers to make the browser’s job easier, and why those best practices work. You’ll leave with a solid understanding of how to write code that works *with* the browser, not against it, and ultimately improves your users’ experience.

Engineering
1 of 123
Download to read offline
HAPPY BROWSER, HAPPY USER! Katie Sylor-Miller
Katie Sylor-Miller Staff Software Engineer Etsy Frontend Systems @ksylor ohshitgit.com
 gum.co/oh-shit-git bit.ly/ksm-dsh
@ksylor PERFORMANCE IS UX
@ksylor WE BUILD WEBSITES FOR PEOPLE
@ksylor UX WHAT MAKES USERS HAPPY? ▸ Fast rendering of content
 (e.g. "fast loading") ▸ Instant feedback for clicks/taps/ keyboard interactions ▸ Smooth animations ▸ Don't use up their mobile data!
PERFORMANCE IS UX
@ksylor @ksylor WE BUILD WEBSITES FOR PEOPLE BROWSERS
@ksylor HOW DO WE MAKE BROWSERS HAPPY?
@ksylor WHAT MAKES BROWSERS SAD?
@ksylor PERFORMANCE TWO PROBLEMS: NETWORK LATENCY SINGLE THREAD**mostly
@ksylor HOW DO BROWSERS WORK? BORING COMPUTER STUFF CPU GPU Hardware Network
 Controller Operating
 System Networking Kernel Processes Threads Application
@ksylor HOW DO BROWSERS WORK? 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
@ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
@ksylor GET IT OVER WITH! NAVIGATION GOAL:
@ksylor NAVIGATION the internet ClientHello ServerHello & Certificate Client key FINISHED FINISHED DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK mindblowncat.com
 162.144.26.144 HTTP GET 5. Server stuff 6. Send response ACK 2nd HTTP RESPONSE (29kb) 3rd HTTP RESPONSE (57kb) ACK etc… 1st HTTP RESPONSE (14kb) https://mindblowncat.com 3. SSL handshake 1. DNS lookup 2. TCP handshake 4. Request 7. TTFB 8. Parse
@ksylor NAVIGATION WHAT DO WE CONTROL? ▸ Reduce server response time ▸ Cache cache cache cache cache ▸ Use a CDN ▸ Smaller files = fewer roundtrips ▸ Compression, tree-shaking, code-splitting ▸ First 14kb ▸ Preloading/prefetching, resource hints, HTTP/2
@ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
@ksylor DOM + CSSOM, ASAP PARSING GOAL:
@ksylor PARSING SUPER SIMPLE HTML
@ksylor DOM DOCUMENT OBJECT MODEL
@ksylor PARSING - HTML TO DOM HTML html DOM NETWORK RESPONSE HTML Main Worker Network
 Process <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html>
@ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM HTML html DOM REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG Main Worker Network
 Process
@ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM HTML html DOM head REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG Main Worker Network
 Process
@ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM HTML html DOM head title REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG Main Worker Network
 Process
@ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM HTML html DOM head title REQUEST STYLE.CSS NETWORK link RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG Main Worker Network
 Process
@ksylor PARSING - HTML TO DOM HTML html DOM head link title <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS script REQUEST CAT.JPG Main Worker Network
 Process
@ksylor PARSING - HTML TO DOM HTML html DOM head link title <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS script REQUEST CAT.JPG JAVASCRIPT IS RENDER BLOCKING* *when included without defer or async attributes Main Worker Network
 Process
@ksylor PARSING - HTML TO DOM HTML html DOM head link title <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS script REQUEST CAT.JPG BUT FIRST... CSS BLOCKS JS RESPONSE STYLE.CSS Main Worker Network
 Process
@ksylor CSSOM CSS OBJECT MODEL
@ksylor PARSING- CSS TO CSSOM CSSOMCSS body font-family: sans-serif; body { 
 font-family: sans-serif; 
 }
 h1 { 
 color: magenta; 
 }
 .border { 
 border: 1px solid grey; 
 }
 .border img { 
 display: block; 
 margin: 1em; 
 }
 .title { 
 font-family: serif; 
 } Main Worker Network
 Process
@ksylor PARSING- CSS TO CSSOM CSSOMCSS body font-family: sans-serif; body { 
 font-family: sans-serif; 
 }
 h1 { 
 color: magenta; 
 }
 .border { 
 border: 1px solid grey; 
 }
 .border img { 
 display: block; 
 margin: 1em; 
 }
 .title { 
 font-family: serif; 
 } h1 color: magenta; Main Worker Network
 Process
@ksylor PARSING- CSS TO CSSOM CSSOMCSS body font-family: sans-serif; .border border: 1px solid gray; body { 
 font-family: sans-serif; 
 }
 h1 { 
 color: magenta; 
 }
 .border { 
 border: 1px solid grey; 
 }
 .border img { 
 display: block; 
 margin: 1em; 
 }
 .title { 
 font-family: serif; 
 } h1 color: magenta; Main Worker Network
 Process
@ksylor PARSING- CSS TO CSSOM CSSOMCSS body font-family: sans-serif; img display:block; margin: 1em; .border border: 1px solid gray; body { 
 font-family: sans-serif; 
 }
 h1 { 
 color: magenta; 
 }
 .border { 
 border: 1px solid grey; 
 }
 .border img { 
 display: block; 
 margin: 1em; 
 }
 .title { 
 font-family: serif; 
 } h1 color: magenta; Main Worker Network
 Process
@ksylor PARSING- CSS TO CSSOM CSSOMCSS body font-family: sans-serif; img display:block; margin: 1em; .title font-family: serif; .border border: 1px solid gray; body { 
 font-family: sans-serif; 
 }
 h1 { 
 color: magenta; 
 }
 .border { 
 border: 1px solid grey; 
 }
 .border img { 
 display: block; 
 margin: 1em; 
 }
 .title { 
 font-family: serif; 
 } h1 color: magenta; Main Worker Network
 Process
@ksylor DOM BACK TO THE
@ksylor PARSING - HTML TO DOM HTML html DOM head link title <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS script REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
@ksylor AST ABSTRACT SYNTAX TREE
@ksylor PARSING- JAVASCRIPT AST JS ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Program body: Main Worker Network
 Process
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program body: FunctionDeclaration id: body:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "badIdea" id: body: body:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "badIdea" id: body: BlockStatement body:
@ksylor VariableDeclaration body: id: init: PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "badIdea" id: body: BlockStatement body:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration VariableDeclaration Identifier name: "badIdea" id: id: body: Identifier name: "cat" BlockStatement body: body: init:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" id: init: id: body: BlockStatement body: body: CallExpression callee: arguments:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" CallExpression id: init: id: body: BlockStatement body: body: callee: arguments: MemberExpression object: property:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" CallExpression id: init: id: body: BlockStatement body: body: MemberExpressioncallee: object: Identifier name: "document" property: arguments:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" CallExpression id: init: id: body: BlockStatement body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" arguments:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "document" Identifier name: "badIdea" MemberExpression CallExpression id: init: callee: object: Identifier name: "getElementById" id: body: BlockStatement Literal value:"cat" arguments: body: body: property:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" CallExpression id: init: id: body: BlockStatement body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: ExpressionStatement AssignmentExpression operator: "=" left: right: expression:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" left: id: body: BlockStatement MemberExpression object: property: body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: right: expression:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" MemberExpressionleft: object: property: id: body: BlockStatement Identifier name: "cat" body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: right: expression:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" MemberExpressionleft: Identifier name: "cat" object: property: id: body: BlockStatement Identifier name: "src" body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: right: expression:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" MemberExpressionleft: Identifier name: "document" Identifier name: "getElementById" object: property: right: id: body: BlockStatement Literal value:"another-cat.gif" body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: expression:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" MemberExpressionleft: Identifier name: "document" Identifier name: "getElementById" object: property: right: Literal value:"another-cat.gif" id: body: BlockStatement body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: expression: ExpressionStatement CallExpressionexpression: callee:
@ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" MemberExpressionleft: Identifier name: "document" Identifier name: "getElementById" object: property: right: Literal value:"another-cat.gif" ExpressionStatement CallExpression callee: id: body: BlockStatement Identifier name: "badIdea" body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: expression:
@ksylor ASTEXPLORER.NET TRY IT YOURSELF!
@ksylor PARSING - JAVASCRIPT INTERPRETATION & COMPILATION (VERY) SIMPLIFIED INTERPRETATION & COMPILATION PROCESS INTERPRETER OPTIMIZING COMPILER(S) BYTECODE OPTIMIZED CODE slower execution faster execution AST Main Worker Network
 Process
@ksylor JAVASCRIPT EXECUTION JS html head link title script DOM ! Uncaught TypeError: 
 Cannot set property 'src' of null
 at badIdea (script.js:5)
@ksylor DOM II BACK TO THE
@ksylor PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS script REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
@ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
@ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK body script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
@ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK body h1 class:“title” Hi! script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
@ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK paragraph Here is a cat. body h1 class:“title” Hi! script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
@ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK paragraph Here is a cat. div class:”border” body h1 class:“title” Hi! script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
@ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK paragraph div class:”border” Here is a cat. body h1 class:“title” Hi! script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS image id="cat" Main Worker Network
 Process
@ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK paragraph div class:”border” Here is a cat. body h1 class:“title” Hi! script image id="cat" REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
Validate your HTML. We didn't when we published an article yesterday... A mis- nested <span><del>
 </span></del> caused this on iPhone's Reader app. Not every renderer of HTML is as forgiving as browsers. Bruce Lawson @brucel PARSING - A CAUTIONARY TALE
@ksylor HOW CAN WE MAKE THAT BETTER?
@ksylor DOM + CSSOM, ASAP PARSING GOAL:
@ksylor request html PARSING PARSING TIMELINE Main Worker Network
 Process parse html request css parse css parse html DomContentLoaded <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css" rel="stylesheet"/>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat" 
 alt="Cat!"/>
 </div>
 </body>
 </html> request js request image parse & execute js DomInteractive & preload scanner NavigationStart TTFB
@ksylor PARSING - TIMELINE IMPROVEMENTS MOVE STYLES INLINE parse html parse css parse html <html>
 <head>
 <title>Cats are fun!</title>
 <style>...</style>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat" 
 alt="Cat!"/>
 </div>
 </body>
 </html> request image parse & execute js request js preload scanner DomContentLoaded DomInteractive & request html Main Worker Network
 Process NavigationStart TTFB
@ksylor PARSING - TIMELINE IMPROVEMENTS MOVE SCRIPTS INLINE & TO THE BOTTOM parse html parse css parse html DomContentLoaded <html>
 <head>
 <title>Cats are fun!</title>
 <style>...</style>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat" 
 alt="Cat!"/>
 </div>
 <script>...</script>
 </body>
 </html> request image parse & execute js preload scanner DomInteractive request html Main Worker Network
 Process NavigationStart TTFB
@ksylor parse & execute js PARSING - TIMELINE IMPROVEMENTS ASYNC EXTERNAL JS parse html parse css DomContentLoaded <html>
 <head>
 <title>Cats are fun!</title>
 <style>...</style>
 <script async src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat" 
 alt="Cat!"/>
 </div>
 </body>
 </html> request image request js html html DomInteractive & preload scanner request html Main Worker Network
 Process NavigationStart TTFB
@ksylor parse & execute js PARSING - TIMELINE IMPROVEMENTS ASYNC EXTERNAL JS (BIGGER FILE/SLOWER NETWORK) parse html parse css DomContentLoaded <html>
 <head>
 <title>Cats are fun!</title>
 <style>...</style>
 <script async src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat" 
 alt="Cat!"/>
 </div>
 </body>
 </html> request image request js parse html DomInteractive & preload scanner request html Main Worker Network
 Process NavigationStart TTFB
@ksylor parse & execute js PARSING - TIMELINE IMPROVEMENTS DEFER EXTERNAL JS parse html parse css DomContentLoaded <html>
 <head>
 <title>Cats are fun!</title>
 <style>...</style>
 <script defer src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat" 
 alt="Cat!"/>
 </div>
 </body>
 </html> request image request js parse html DomInteractive preload scanner request html Main Worker Network
 Process NavigationStart TTFB
@ksylor THE TROUBLE WITH BROWSERS THE MAIN THREAD DOES IT ALL ▸ Parsing HTML into DOM ▸ Parsing CSS into CSSOM ▸ JS into JS AST ▸ JS Execution
@ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
@ksylor DO LESS WORK RENDERING GOAL:
@ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
@ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
@ksylor + BROWSER DEFAULT STYLES + USER-PROVIDED STYLESHEETS RENDERING - STYLE CALCULATION html DOM head link title body h1 class:“title” paragraph image div class:”border” Hi! Here is a cat. CSSOM body font-family: sans-serif; .border border: 1px solid gray; img display:block; margin: 1em; .title font-family: serif; COMPUTED STYLE root <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. h1 color: magenta; script Main Raster/
 Compositor Network
 Process
@ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
@ksylor RENDERING - LAYOUT https://mindblowncat.comroot/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. html/viewporthtml/viewport COMPUTED STYLE Main Raster/
 Compositor Network
 Process
@ksylor root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE RENDERING - LAYOUT html/viewport body COMPUTED STYLE Main Raster/
 Compositor Network
 Process
@ksylor RENDERING - LAYOUT html/viewport body h1 root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE Main Raster/
 Compositor Network
 Process
@ksylor root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE RENDERING - LAYOUT html/viewport body h1 Hi! Main Raster/
 Compositor Network
 Process
@ksylor root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE RENDERING - LAYOUT html/viewport body h1 Hi! p Main Raster/
 Compositor Network
 Process
@ksylor RENDERING - LAYOUT html/viewport body h1 Hi! Here is a cat. p root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE Main Raster/
 Compositor Network
 Process
@ksylor root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE RENDERING - LAYOUT html/viewport body h1 Hi! Here is a cat. p div Main Raster/
 Compositor Network
 Process
@ksylor RENDERING - LAYOUT html/viewport body h1 Hi! Here is a cat. div p img root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE Main Raster/
 Compositor Network
 Process
@ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
@ksylor [ 
 [r, g, b, a],
 [r, g, b, a],
 [r, g, b, a], 
 ...
 ] RENDERING - PAINT FRAME BUFFER
@ksylor RENDERING - PAINT FRAME BUFFER [ 
 [r, g, b, a],
 [r, g, b, a],
 [r, g, b, a], 
 ...
 ] } 2.7Mpixels - iPhone X
@ksylor RENDERING - PAINT PIXELS ARE PAINTED ON LAYERS RASTERIZE Main Raster/
 Compositor Network
 Process *layers pictured are imaginary for 
 demonstration purposes only ▸ 3D transforms ▸ CSS animation using opacity or transform ▸ will-change ▸ "accelerated" CSS filters ▸ <video> or <canvas> ▸ z-index above another layer CREATE A NEW LAYER
@ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
@ksylor THE GPU OUR NEW COMPOSITING BFF
@ksylor Network
 Process RENDERING - COMPOSITE FLATTEN THE LAYERS (WITH MATH) Main Raster/
 Compositor background_layer = [
 [ 244, 0, 32, 1 ],
 [ 248, 10, 50, .5 ],
 ...
 ]; 
 layer_1 = [
 [ 33, 12, 42, 1 ],
 [ 0, 0, 15, 1 ],
 ...
 ]; applyCSSTransforms();
 applyCSSFilters(); return blendMode(
 background_layer,
 layer_1
 ) GPU frame_buffer = [
 [ 33, 12, 42, 1 ],
 [ 0, 0, 50, .5 ],
 ...
 ];
@ksylor Network
 Process RENDERING - COMPOSITE FINALLY! SOMETHING ON THE SCREEN! https://mindblowncat.com Hi! Here is a cat. Main Raster/
 Compositor
@ksylor RENDERING TIMELINE CHECK FirstPaint style paint composite layoutparse html parse css parse html DomContentLoaded request image parse & execute js preload scanner DomInteractive request html Main Worker Network
 Process NavigationStart TTFB
@ksylor REFLOW :(
@ksylor STYLE LAYOUT PAINT COMPOSITE LET'S DO THAT AGAIN
@ksylor RENDERING - REFLOW RE-LAYOUT Hi! Here is a cat. Hi! Here is a cat. img Main
@ksylor RENDERING - REFLOW RE-PAINT Hi! Here is a cat. Raster/
 Compositor RASTERIZE
@ksylor RENDERING - REFLOW RE-COMPOSITE Raster/
 Compositor MATH! https://mindblowncat.com Hi! Here is a cat.
@ksylor RENDERING - REFLOW REFLOW ON THE MAIN THREAD FirstPaint style paint composite layoutparse html parse css parse html DomContentLoaded request image parse & execute js preload scanner DomInteractive request html Main Worker Network
 Process NavigationStart TTFB paint composite layout Load (PageLoad)
@ksylor RENDERING - SLIGHTLY LESS REFLOW IMAGE DIMENSIONS <img src="cat.gif" id="cat" alt="Cat!" height="442" width="500"/>
 STYLE LAYOUT PAINT COMPOSITE
@ksylor RENDERING THE MAIN THREAD DOES IT ALL ▸ Parsing HTML into DOM ▸ Parsing CSS into CSSOM ▸ JS into JS AST ▸ JS Execution ▸ Style Calculation (and re-style) ▸ Layout (and re-layout) ▸ Paint (and re-paint)
@ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction Hi! Here is a cat.
@ksylor INTERACTION THE MAIN THREAD DOES IT ALL ▸ Parsing HTML into DOM ▸ Parsing CSS into CSSOM ▸ JS into JS AST ▸ JS Execution ▸ Style Calculation (and re-style) ▸ Layout (and re-layout) ▸ Paint (and re-paint) ▸ User interaction
@ksylor IMMEDIATE & JANK FREE INTERACTION GOAL:
@ksylor INPUT DELAY DROPPED FRAMES
@ksylor INTERACTION INPUT DELAY parse & execute js async request js FirstPaint style paint composite layoutparse html parse css parse html preload scanner DomInteractive &
 DomContentLoaded request html Main Worker Network
 Process NavigationStart TTFB User taps
 button First Input Delay
@ksylor INTERACTION - INPUT DELAY UNBLOCK THE MAIN THREAD ▸ Ship less Javascript ▸ Code-splitting - load what you need to render, then lazy load the rest ▸ Break up execution into smaller, async tasks (requestIdleCallback) ▸ Measure first input delay and total blocking time ▸ Audit frameworks & third party scripts
ANIMATION
@ksylor INTERACTION - ANIMATION FRAME BUFFER [ 
 [r, g, b, a],
 [r, g, b, a],
 [r, g, b, a], 
 ...
 ] } 2.7Mpixels - iPhone X 60 fps FRAME RATE 16.67msto draw each frame}
@ksylor INTERACTION - ANIMATION HTML CSS JS
@ksylor INTERACTION - JANK "DROPPING" FRAMES FROM THE MAIN THREAD 16.67ms frame! frame! re-style re-layoutjs event handler button click opens
 an overlay dialog frame! frame! frame! <div>'s style changes
 from display: none;
 to display: block; re-paint jank :( jank :( jank :( jank :( re-composite
 on the GPU
@ksylor RENDERING - LAYERS LAYERS ARE AWESOME Main Raster/
 Compositor Network
 Process ▸ Repaint only the layer that changed, all other layers stay the same ▸ Easier to move/animate layers without repainting the whole page. ▸ But layers are expensive in memory! ▸ Don't create layers that don't change how the page is rendered.
@ksylor INTERACTION - BETTER ANIMATION HTML CSS JS
@ksylor INTERACTION - LESS JANK! DROP FEWER FRAMES! 16.67ms frame! frame! stylejs event handler button click opens
 an overlay dialog frame! frame! frame! <div>'s style changes
 from visibility: hidden;
 to visibility: visible;
 and uses css animations jank :( jank :( re-composite
 on the GPU frame! frame!frame!
@ksylor HOW DO WE MAKE BROWSERS HAPPY? https://mindblowncat.com 4 PHASES ▸ Navigation GET IT OVER WITH! ▸ Parsing DOM + CSSOM, ASAP ▸ Rendering DO LESS WORK (ON THE CPU) ▸ Interaction IMMEDIATE & JANK FREE Hi! Here is a cat.
bit.ly/ksm-hbhu @ksylor THANK YOU!

Recommended

Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller
 
Performance.now() fast but not furious
Performance.now() fast but not furiousPerformance.now() fast but not furious
Performance.now() fast but not furiousAnna Migas
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Katie Sylor-Miller
 
Its timetostopstalling limerick
Its timetostopstalling limerickIts timetostopstalling limerick
Its timetostopstalling limerickDoug Sillars
 
Mobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOTMobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOTDoug Sillars
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile WebJames D Bloom
 
10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016Chris Love
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile WebJames D Bloom
 

Recommended

Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller
 
Performance.now() fast but not furious
Performance.now() fast but not furiousPerformance.now() fast but not furious
Performance.now() fast but not furiousAnna Migas
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Katie Sylor-Miller
 
Its timetostopstalling limerick
Its timetostopstalling limerickIts timetostopstalling limerick
Its timetostopstalling limerickDoug Sillars
 
Mobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOTMobile App Performance, Dublin MOT
Mobile App Performance, Dublin MOTDoug Sillars
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile WebJames D Bloom
 
10 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 201610 things you can do to speed up your web app today 2016
10 things you can do to speed up your web app today 2016Chris Love
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile WebJames D Bloom
 
Snowcamp fastandbeautiful
Snowcamp fastandbeautifulSnowcamp fastandbeautiful
Snowcamp fastandbeautifulDoug Sillars
 
WPO Israel Meetup - Mobile Web Performance slides by Steve Souders
WPO Israel Meetup - Mobile Web Performance slides by Steve SoudersWPO Israel Meetup - Mobile Web Performance slides by Steve Souders
WPO Israel Meetup - Mobile Web Performance slides by Steve SoudersGil Givati
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best PracticesJames D Bloom
 
Html5 Fit: Get Rid of Love Handles
Html5 Fit: Get Rid of Love HandlesHtml5 Fit: Get Rid of Love Handles
Html5 Fit: Get Rid of Love HandlesChris Love
 
Service workers your applications never felt so good
Service workers your applications never felt so goodService workers your applications never felt so good
Service workers your applications never felt so goodChris Love
 
Edi react fastandbeautiful
Edi react fastandbeautifulEdi react fastandbeautiful
Edi react fastandbeautifulDoug Sillars
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018Anton Shulke
 
Mobius keynote
Mobius keynoteMobius keynote
Mobius keynoteDoug Sillars
 
Nantes when its just too slow
Nantes when its just too slowNantes when its just too slow
Nantes when its just too slowDoug Sillars
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoMaximiliano Firtman
 
How I learned to stop worrying and love UX metrics
How I learned to stop worrying and love UX metricsHow I learned to stop worrying and love UX metrics
How I learned to stop worrying and love UX metricsTammy Everts
 
Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsChris Love
 
Going Fast on the Mobile Web
Going Fast on the Mobile WebGoing Fast on the Mobile Web
Going Fast on the Mobile WebJason Grigsby
 
Fastandbeautiful gdgtallinn
Fastandbeautiful gdgtallinnFastandbeautiful gdgtallinn
Fastandbeautiful gdgtallinnDoug Sillars
 
Fastandbeautiful full stackporto
Fastandbeautiful full stackportoFastandbeautiful full stackporto
Fastandbeautiful full stackportoDoug Sillars
 
Fastandbeautiful full stacklondon
Fastandbeautiful full stacklondonFastandbeautiful full stacklondon
Fastandbeautiful full stacklondonDoug Sillars
 
Fastandbeautiful oredev
Fastandbeautiful oredevFastandbeautiful oredev
Fastandbeautiful oredevDoug Sillars
 
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks Holger Bartel
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App ChallengesJason Grigsby
 
Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019Katie Sylor-Miller
 
Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 2019Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 2019Katie Sylor-Miller
 

More Related Content

What's hot

Snowcamp fastandbeautiful
Snowcamp fastandbeautifulSnowcamp fastandbeautiful
Snowcamp fastandbeautifulDoug Sillars
 
WPO Israel Meetup - Mobile Web Performance slides by Steve Souders
WPO Israel Meetup - Mobile Web Performance slides by Steve SoudersWPO Israel Meetup - Mobile Web Performance slides by Steve Souders
WPO Israel Meetup - Mobile Web Performance slides by Steve SoudersGil Givati
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best PracticesJames D Bloom
 
Html5 Fit: Get Rid of Love Handles
Html5 Fit: Get Rid of Love HandlesHtml5 Fit: Get Rid of Love Handles
Html5 Fit: Get Rid of Love HandlesChris Love
 
Service workers your applications never felt so good
Service workers your applications never felt so goodService workers your applications never felt so good
Service workers your applications never felt so goodChris Love
 
Edi react fastandbeautiful
Edi react fastandbeautifulEdi react fastandbeautiful
Edi react fastandbeautifulDoug Sillars
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018Anton Shulke
 
Nantes when its just too slow
Nantes when its just too slowNantes when its just too slow
Nantes when its just too slowDoug Sillars
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoMaximiliano Firtman
 
How I learned to stop worrying and love UX metrics
How I learned to stop worrying and love UX metricsHow I learned to stop worrying and love UX metrics
How I learned to stop worrying and love UX metricsTammy Everts
 
Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsChris Love
 
Going Fast on the Mobile Web
Going Fast on the Mobile WebGoing Fast on the Mobile Web
Going Fast on the Mobile WebJason Grigsby
 
Fastandbeautiful gdgtallinn
Fastandbeautiful gdgtallinnFastandbeautiful gdgtallinn
Fastandbeautiful gdgtallinnDoug Sillars
 
Fastandbeautiful full stackporto
Fastandbeautiful full stackportoFastandbeautiful full stackporto
Fastandbeautiful full stackportoDoug Sillars
 
Fastandbeautiful full stacklondon
Fastandbeautiful full stacklondonFastandbeautiful full stacklondon
Fastandbeautiful full stacklondonDoug Sillars
 
Fastandbeautiful oredev
Fastandbeautiful oredevFastandbeautiful oredev
Fastandbeautiful oredevDoug Sillars
 
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks Holger Bartel
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App ChallengesJason Grigsby
 

What's hot (20)

Snowcamp fastandbeautiful
Snowcamp fastandbeautifulSnowcamp fastandbeautiful
Snowcamp fastandbeautiful
 
WPO Israel Meetup - Mobile Web Performance slides by Steve Souders
WPO Israel Meetup - Mobile Web Performance slides by Steve SoudersWPO Israel Meetup - Mobile Web Performance slides by Steve Souders
WPO Israel Meetup - Mobile Web Performance slides by Steve Souders
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best Practices
 
Html5 Fit: Get Rid of Love Handles
Html5 Fit: Get Rid of Love HandlesHtml5 Fit: Get Rid of Love Handles
Html5 Fit: Get Rid of Love Handles
 
Service workers your applications never felt so good
Service workers your applications never felt so goodService workers your applications never felt so good
Service workers your applications never felt so good
 
Edi react fastandbeautiful
Edi react fastandbeautifulEdi react fastandbeautiful
Edi react fastandbeautiful
 
The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018The latest in site speed: advanced #webperf 2018
The latest in site speed: advanced #webperf 2018
 
Mobius keynote
Mobius keynoteMobius keynote
Mobius keynote
 
Nantes when its just too slow
Nantes when its just too slowNantes when its just too slow
Nantes when its just too slow
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto
 
How I learned to stop worrying and love UX metrics
How I learned to stop worrying and love UX metricsHow I learned to stop worrying and love UX metrics
How I learned to stop worrying and love UX metrics
 
Advanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms toolsAdvanced front end debugging with ms edge and ms tools
Advanced front end debugging with ms edge and ms tools
 
Going Fast on the Mobile Web
Going Fast on the Mobile WebGoing Fast on the Mobile Web
Going Fast on the Mobile Web
 
Fastandbeautiful gdgtallinn
Fastandbeautiful gdgtallinnFastandbeautiful gdgtallinn
Fastandbeautiful gdgtallinn
 
Fastandbeautiful full stackporto
Fastandbeautiful full stackportoFastandbeautiful full stackporto
Fastandbeautiful full stackporto
 
Fastandbeautiful full stacklondon
Fastandbeautiful full stacklondonFastandbeautiful full stacklondon
Fastandbeautiful full stacklondon
 
Fastandbeautiful oredev
Fastandbeautiful oredevFastandbeautiful oredev
Fastandbeautiful oredev
 
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
 

Similar to Happy Browser, Happy User! NY Web Performance Meetup 9/20/19

Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019Katie Sylor-Miller
 
Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 2019Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 2019Katie Sylor-Miller
 
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptHTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptraghavanp4
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering PathRaphael Amorim
 
Responsive content
Responsive contentResponsive content
Responsive contenthonzie
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and RenderingStoyan Stefanov
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Aaron Gustafson
 
Minimalism in Web Development
Minimalism in Web DevelopmentMinimalism in Web Development
Minimalism in Web DevelopmentJamie Matthews
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopShoshi Roberts
 
SINATRA + HAML + TWITTER
SINATRA + HAML + TWITTERSINATRA + HAML + TWITTER
SINATRA + HAML + TWITTERElber Ribeiro
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersTsungWei Hu
 
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)Eran Zinman
 
BOOM Performance
BOOM PerformanceBOOM Performance
BOOM Performancedapulse
 

Similar to Happy Browser, Happy User! NY Web Performance Meetup 9/20/19 (20)

Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019Happy Browser, Happy User! - PerfMatters Conference 2019
Happy Browser, Happy User! - PerfMatters Conference 2019
 
Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 2019Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 2019
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
 
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptHTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover
 
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering Path
 
Responsive content
Responsive contentResponsive content
Responsive content
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
Minimalism in Web Development
Minimalism in Web DevelopmentMinimalism in Web Development
Minimalism in Web Development
 
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 WorkshopImplementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
 
SINATRA + HAML + TWITTER
SINATRA + HAML + TWITTERSINATRA + HAML + TWITTER
SINATRA + HAML + TWITTER
 
Diazo: Bridging Designers and Programmers
Diazo: Bridging Designers and ProgrammersDiazo: Bridging Designers and Programmers
Diazo: Bridging Designers and Programmers
 
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
YGLF 2015 - Boom Performance | Eran Zinman (daPulse)
 
BOOM Performance
BOOM PerformanceBOOM Performance
BOOM Performance
 

More from Katie Sylor-Miller

Design Systems + Git = Success - Clarity Conference 2018
Design Systems + Git = Success - Clarity Conference 2018Design Systems + Git = Success - Clarity Conference 2018
Design Systems + Git = Success - Clarity Conference 2018Katie Sylor-Miller
 
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018Katie Sylor-Miller
 
Images for Everyone - ImageCon 2018
Images for Everyone - ImageCon 2018Images for Everyone - ImageCon 2018
Images for Everyone - ImageCon 2018Katie Sylor-Miller
 
Git-ing out of your git messes - Fluent Conf 2017
Git-ing out of your git messes - Fluent Conf 2017Git-ing out of your git messes - Fluent Conf 2017
Git-ing out of your git messes - Fluent Conf 2017Katie Sylor-Miller
 
Git-ing out of your git messes
Git-ing out of your git messesGit-ing out of your git messes
Git-ing out of your git messesKatie Sylor-Miller
 

More from Katie Sylor-Miller (6)

Design Systems + Git = Success - Clarity Conference 2018
Design Systems + Git = Success - Clarity Conference 2018Design Systems + Git = Success - Clarity Conference 2018
Design Systems + Git = Success - Clarity Conference 2018
 
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018
Raiders of the Fast Start: Frontend Performance Achaeology - Fluent 2018
 
Images for Everyone - ImageCon 2018
Images for Everyone - ImageCon 2018Images for Everyone - ImageCon 2018
Images for Everyone - ImageCon 2018
 
Git-ing out of your git messes - Fluent Conf 2017
Git-ing out of your git messes - Fluent Conf 2017Git-ing out of your git messes - Fluent Conf 2017
Git-ing out of your git messes - Fluent Conf 2017
 
Git-ing out of your git messes
Git-ing out of your git messesGit-ing out of your git messes
Git-ing out of your git messes
 
Putting the t in team
Putting the t in teamPutting the t in team
Putting the t in team
 

Recently uploaded

Energy Awareness training ppt for manufacturing process.pptx
Energy Awareness training ppt for manufacturing process.pptxEnergy Awareness training ppt for manufacturing process.pptx
Energy Awareness training ppt for manufacturing process.pptxsiddharthjain2303
 
Mine Environment II Lab_MI10448MI__________.pptx
Mine Environment II Lab_MI10448MI__________.pptxMine Environment II Lab_MI10448MI__________.pptx
Mine Environment II Lab_MI10448MI__________.pptxRomil Mishra
 
Input Output Management in Operating System
Input Output Management in Operating SystemInput Output Management in Operating System
Input Output Management in Operating SystemRashmi Bhat
 
70 POWER PLANT IAE V2500 technical training
70 POWER PLANT IAE V2500 technical training70 POWER PLANT IAE V2500 technical training
70 POWER PLANT IAE V2500 technical trainingGladiatorsKasper
 
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.pptROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.pptJohnWilliam111370
 
Gravity concentration_MI20612MI_________
Gravity concentration_MI20612MI_________Gravity concentration_MI20612MI_________
Gravity concentration_MI20612MI_________Romil Mishra
 
SOFTWARE ESTIMATION COCOMO AND FP CALCULATION
SOFTWARE ESTIMATION COCOMO AND FP CALCULATIONSOFTWARE ESTIMATION COCOMO AND FP CALCULATION
SOFTWARE ESTIMATION COCOMO AND FP CALCULATIONSneha Padhiar
 
Module-1-(Building Acoustics) Noise Control (Unit-3). pdf
Module-1-(Building Acoustics) Noise Control (Unit-3). pdfModule-1-(Building Acoustics) Noise Control (Unit-3). pdf
Module-1-(Building Acoustics) Noise Control (Unit-3). pdfManish Kumar
 
TEST CASE GENERATION GENERATION BLOCK BOX APPROACH
TEST CASE GENERATION GENERATION BLOCK BOX APPROACHTEST CASE GENERATION GENERATION BLOCK BOX APPROACH
TEST CASE GENERATION GENERATION BLOCK BOX APPROACHSneha Padhiar
 
11. Properties of Liquid Fuels in Energy Engineering.pdf
11. Properties of Liquid Fuels in Energy Engineering.pdf11. Properties of Liquid Fuels in Energy Engineering.pdf
11. Properties of Liquid Fuels in Energy Engineering.pdfHafizMudaserAhmad
 
Novel 3D-Printed Soft Linear and Bending Actuators
Novel 3D-Printed Soft Linear and Bending ActuatorsNovel 3D-Printed Soft Linear and Bending Actuators
Novel 3D-Printed Soft Linear and Bending ActuatorsResearcher Researcher
 
List of Accredited Concrete Batching Plant.pdf
List of Accredited Concrete Batching Plant.pdfList of Accredited Concrete Batching Plant.pdf
List of Accredited Concrete Batching Plant.pdfisabel213075
 
Artificial Intelligence in Power System overview
Artificial Intelligence in Power System overviewArtificial Intelligence in Power System overview
Artificial Intelligence in Power System overviewsandhya757531
 
High Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMS
High Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMSHigh Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMS
High Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMSsandhya757531
 
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...Erbil Polytechnic University
 
『澳洲文凭』买麦考瑞大学毕业证书成绩单办理澳洲Macquarie文凭学位证书
『澳洲文凭』买麦考瑞大学毕业证书成绩单办理澳洲Macquarie文凭学位证书『澳洲文凭』买麦考瑞大学毕业证书成绩单办理澳洲Macquarie文凭学位证书
『澳洲文凭』买麦考瑞大学毕业证书成绩单办理澳洲Macquarie文凭学位证书rnrncn29
 
KCD Costa Rica 2024 - Nephio para parvulitos
KCD Costa Rica 2024 - Nephio para parvulitosKCD Costa Rica 2024 - Nephio para parvulitos
KCD Costa Rica 2024 - Nephio para parvulitosVictor Morales
 
Computer Graphics Introduction, Open GL, Line and Circle drawing algorithm
Computer Graphics Introduction, Open GL, Line and Circle drawing algorithmComputer Graphics Introduction, Open GL, Line and Circle drawing algorithm
Computer Graphics Introduction, Open GL, Line and Circle drawing algorithmDeepika Walanjkar
 
Main Memory Management in Operating System
Main Memory Management in Operating SystemMain Memory Management in Operating System
Main Memory Management in Operating SystemRashmi Bhat
 
Theory of Machine Notes / Lecture Material .pdf
Theory of Machine Notes / Lecture Material .pdfTheory of Machine Notes / Lecture Material .pdf
Theory of Machine Notes / Lecture Material .pdfShreyas Pandit
 

Recently uploaded (20)

Energy Awareness training ppt for manufacturing process.pptx
Energy Awareness training ppt for manufacturing process.pptxEnergy Awareness training ppt for manufacturing process.pptx
Energy Awareness training ppt for manufacturing process.pptx
 
Mine Environment II Lab_MI10448MI__________.pptx
Mine Environment II Lab_MI10448MI__________.pptxMine Environment II Lab_MI10448MI__________.pptx
Mine Environment II Lab_MI10448MI__________.pptx
 
Input Output Management in Operating System
Input Output Management in Operating SystemInput Output Management in Operating System
Input Output Management in Operating System
 
70 POWER PLANT IAE V2500 technical training
70 POWER PLANT IAE V2500 technical training70 POWER PLANT IAE V2500 technical training
70 POWER PLANT IAE V2500 technical training
 
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.pptROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
ROBOETHICS-CCS345 ETHICS AND ARTIFICIAL INTELLIGENCE.ppt
 
Gravity concentration_MI20612MI_________
Gravity concentration_MI20612MI_________Gravity concentration_MI20612MI_________
Gravity concentration_MI20612MI_________
 
SOFTWARE ESTIMATION COCOMO AND FP CALCULATION
SOFTWARE ESTIMATION COCOMO AND FP CALCULATIONSOFTWARE ESTIMATION COCOMO AND FP CALCULATION
SOFTWARE ESTIMATION COCOMO AND FP CALCULATION
 
Module-1-(Building Acoustics) Noise Control (Unit-3). pdf
Module-1-(Building Acoustics) Noise Control (Unit-3). pdfModule-1-(Building Acoustics) Noise Control (Unit-3). pdf
Module-1-(Building Acoustics) Noise Control (Unit-3). pdf
 
TEST CASE GENERATION GENERATION BLOCK BOX APPROACH
TEST CASE GENERATION GENERATION BLOCK BOX APPROACHTEST CASE GENERATION GENERATION BLOCK BOX APPROACH
TEST CASE GENERATION GENERATION BLOCK BOX APPROACH
 
11. Properties of Liquid Fuels in Energy Engineering.pdf
11. Properties of Liquid Fuels in Energy Engineering.pdf11. Properties of Liquid Fuels in Energy Engineering.pdf
11. Properties of Liquid Fuels in Energy Engineering.pdf
 
Novel 3D-Printed Soft Linear and Bending Actuators
Novel 3D-Printed Soft Linear and Bending ActuatorsNovel 3D-Printed Soft Linear and Bending Actuators
Novel 3D-Printed Soft Linear and Bending Actuators
 
List of Accredited Concrete Batching Plant.pdf
List of Accredited Concrete Batching Plant.pdfList of Accredited Concrete Batching Plant.pdf
List of Accredited Concrete Batching Plant.pdf
 
Artificial Intelligence in Power System overview
Artificial Intelligence in Power System overviewArtificial Intelligence in Power System overview
Artificial Intelligence in Power System overview
 
High Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMS
High Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMSHigh Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMS
High Voltage Engineering- OVER VOLTAGES IN ELECTRICAL POWER SYSTEMS
 
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
 
『澳洲文凭』买麦考瑞大学毕业证书成绩单办理澳洲Macquarie文凭学位证书
『澳洲文凭』买麦考瑞大学毕业证书成绩单办理澳洲Macquarie文凭学位证书『澳洲文凭』买麦考瑞大学毕业证书成绩单办理澳洲Macquarie文凭学位证书
『澳洲文凭』买麦考瑞大学毕业证书成绩单办理澳洲Macquarie文凭学位证书
 
KCD Costa Rica 2024 - Nephio para parvulitos
KCD Costa Rica 2024 - Nephio para parvulitosKCD Costa Rica 2024 - Nephio para parvulitos
KCD Costa Rica 2024 - Nephio para parvulitos
 
Computer Graphics Introduction, Open GL, Line and Circle drawing algorithm
Computer Graphics Introduction, Open GL, Line and Circle drawing algorithmComputer Graphics Introduction, Open GL, Line and Circle drawing algorithm
Computer Graphics Introduction, Open GL, Line and Circle drawing algorithm
 
Main Memory Management in Operating System
Main Memory Management in Operating SystemMain Memory Management in Operating System
Main Memory Management in Operating System
 
Theory of Machine Notes / Lecture Material .pdf
Theory of Machine Notes / Lecture Material .pdfTheory of Machine Notes / Lecture Material .pdf
Theory of Machine Notes / Lecture Material .pdf
 

Happy Browser, Happy User! NY Web Performance Meetup 9/20/19

  • 1. HAPPY BROWSER, HAPPY USER! Katie Sylor-Miller
  • 2. Katie Sylor-Miller Staff Software Engineer Etsy Frontend Systems @ksylor ohshitgit.com
 gum.co/oh-shit-git bit.ly/ksm-dsh
  • 5. @ksylor UX WHAT MAKES USERS HAPPY? ▸ Fast rendering of content
 (e.g. "fast loading") ▸ Instant feedback for clicks/taps/ keyboard interactions ▸ Smooth animations ▸ Don't use up their mobile data!
  • 7. @ksylor @ksylor WE BUILD WEBSITES FOR PEOPLE BROWSERS
  • 8. @ksylor HOW DO WE MAKE BROWSERS HAPPY?
  • 11. @ksylor HOW DO BROWSERS WORK? BORING COMPUTER STUFF CPU GPU Hardware Network
 Controller Operating
 System Networking Kernel Processes Threads Application
  • 12. @ksylor HOW DO BROWSERS WORK? 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
  • 13. @ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
  • 14. @ksylor GET IT OVER WITH! NAVIGATION GOAL:
  • 15. @ksylor NAVIGATION the internet ClientHello ServerHello & Certificate Client key FINISHED FINISHED DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK mindblowncat.com
 162.144.26.144 HTTP GET 5. Server stuff 6. Send response ACK 2nd HTTP RESPONSE (29kb) 3rd HTTP RESPONSE (57kb) ACK etc… 1st HTTP RESPONSE (14kb) https://mindblowncat.com 3. SSL handshake 1. DNS lookup 2. TCP handshake 4. Request 7. TTFB 8. Parse
  • 16. @ksylor NAVIGATION WHAT DO WE CONTROL? ▸ Reduce server response time ▸ Cache cache cache cache cache ▸ Use a CDN ▸ Smaller files = fewer roundtrips ▸ Compression, tree-shaking, code-splitting ▸ First 14kb ▸ Preloading/prefetching, resource hints, HTTP/2
  • 17. @ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
  • 18. @ksylor DOM + CSSOM, ASAP PARSING GOAL:
  • 21. @ksylor PARSING - HTML TO DOM HTML html DOM NETWORK RESPONSE HTML Main Worker Network
 Process <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html>
  • 22. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM HTML html DOM REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG Main Worker Network
 Process
  • 23. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM HTML html DOM head REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG Main Worker Network
 Process
  • 24. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM HTML html DOM head title REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG Main Worker Network
 Process
  • 25. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM HTML html DOM head title REQUEST STYLE.CSS NETWORK link RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG Main Worker Network
 Process
  • 26. @ksylor PARSING - HTML TO DOM HTML html DOM head link title <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS script REQUEST CAT.JPG Main Worker Network
 Process
  • 27. @ksylor PARSING - HTML TO DOM HTML html DOM head link title <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS script REQUEST CAT.JPG JAVASCRIPT IS RENDER BLOCKING* *when included without defer or async attributes Main Worker Network
 Process
  • 28. @ksylor PARSING - HTML TO DOM HTML html DOM head link title <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS script REQUEST CAT.JPG BUT FIRST... CSS BLOCKS JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 30. @ksylor PARSING- CSS TO CSSOM CSSOMCSS body font-family: sans-serif; body { 
 font-family: sans-serif; 
 }
 h1 { 
 color: magenta; 
 }
 .border { 
 border: 1px solid grey; 
 }
 .border img { 
 display: block; 
 margin: 1em; 
 }
 .title { 
 font-family: serif; 
 } Main Worker Network
 Process
  • 31. @ksylor PARSING- CSS TO CSSOM CSSOMCSS body font-family: sans-serif; body { 
 font-family: sans-serif; 
 }
 h1 { 
 color: magenta; 
 }
 .border { 
 border: 1px solid grey; 
 }
 .border img { 
 display: block; 
 margin: 1em; 
 }
 .title { 
 font-family: serif; 
 } h1 color: magenta; Main Worker Network
 Process
  • 32. @ksylor PARSING- CSS TO CSSOM CSSOMCSS body font-family: sans-serif; .border border: 1px solid gray; body { 
 font-family: sans-serif; 
 }
 h1 { 
 color: magenta; 
 }
 .border { 
 border: 1px solid grey; 
 }
 .border img { 
 display: block; 
 margin: 1em; 
 }
 .title { 
 font-family: serif; 
 } h1 color: magenta; Main Worker Network
 Process
  • 33. @ksylor PARSING- CSS TO CSSOM CSSOMCSS body font-family: sans-serif; img display:block; margin: 1em; .border border: 1px solid gray; body { 
 font-family: sans-serif; 
 }
 h1 { 
 color: magenta; 
 }
 .border { 
 border: 1px solid grey; 
 }
 .border img { 
 display: block; 
 margin: 1em; 
 }
 .title { 
 font-family: serif; 
 } h1 color: magenta; Main Worker Network
 Process
  • 34. @ksylor PARSING- CSS TO CSSOM CSSOMCSS body font-family: sans-serif; img display:block; margin: 1em; .title font-family: serif; .border border: 1px solid gray; body { 
 font-family: sans-serif; 
 }
 h1 { 
 color: magenta; 
 }
 .border { 
 border: 1px solid grey; 
 }
 .border img { 
 display: block; 
 margin: 1em; 
 }
 .title { 
 font-family: serif; 
 } h1 color: magenta; Main Worker Network
 Process
  • 36. @ksylor PARSING - HTML TO DOM HTML html DOM head link title <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS script REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 38. @ksylor PARSING- JAVASCRIPT AST JS ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Program body: Main Worker Network
 Process
  • 39. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program body: FunctionDeclaration id: body:
  • 40. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "badIdea" id: body: body:
  • 41. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "badIdea" id: body: BlockStatement body:
  • 42. @ksylor VariableDeclaration body: id: init: PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "badIdea" id: body: BlockStatement body:
  • 43. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration VariableDeclaration Identifier name: "badIdea" id: id: body: Identifier name: "cat" BlockStatement body: body: init:
  • 44. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" id: init: id: body: BlockStatement body: body: CallExpression callee: arguments:
  • 45. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" CallExpression id: init: id: body: BlockStatement body: body: callee: arguments: MemberExpression object: property:
  • 46. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" CallExpression id: init: id: body: BlockStatement body: body: MemberExpressioncallee: object: Identifier name: "document" property: arguments:
  • 47. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" CallExpression id: init: id: body: BlockStatement body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" arguments:
  • 48. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "document" Identifier name: "badIdea" MemberExpression CallExpression id: init: callee: object: Identifier name: "getElementById" id: body: BlockStatement Literal value:"cat" arguments: body: body: property:
  • 49. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" CallExpression id: init: id: body: BlockStatement body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: ExpressionStatement AssignmentExpression operator: "=" left: right: expression:
  • 50. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" left: id: body: BlockStatement MemberExpression object: property: body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: right: expression:
  • 51. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" MemberExpressionleft: object: property: id: body: BlockStatement Identifier name: "cat" body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: right: expression:
  • 52. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" MemberExpressionleft: Identifier name: "cat" object: property: id: body: BlockStatement Identifier name: "src" body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: right: expression:
  • 53. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" MemberExpressionleft: Identifier name: "document" Identifier name: "getElementById" object: property: right: id: body: BlockStatement Literal value:"another-cat.gif" body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: expression:
  • 54. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" MemberExpressionleft: Identifier name: "document" Identifier name: "getElementById" object: property: right: Literal value:"another-cat.gif" id: body: BlockStatement body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: expression: ExpressionStatement CallExpressionexpression: callee:
  • 55. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" MemberExpressionleft: Identifier name: "document" Identifier name: "getElementById" object: property: right: Literal value:"another-cat.gif" ExpressionStatement CallExpression callee: id: body: BlockStatement Identifier name: "badIdea" body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: expression:
  • 57. @ksylor PARSING - JAVASCRIPT INTERPRETATION & COMPILATION (VERY) SIMPLIFIED INTERPRETATION & COMPILATION PROCESS INTERPRETER OPTIMIZING COMPILER(S) BYTECODE OPTIMIZED CODE slower execution faster execution AST Main Worker Network
 Process
  • 58. @ksylor JAVASCRIPT EXECUTION JS html head link title script DOM ! Uncaught TypeError: 
 Cannot set property 'src' of null
 at badIdea (script.js:5)
  • 60. @ksylor PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS script REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 61. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 62. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK body script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 63. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK body h1 class:“title” Hi! script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 64. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK paragraph Here is a cat. body h1 class:“title” Hi! script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 65. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK paragraph Here is a cat. div class:”border” body h1 class:“title” Hi! script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 66. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK paragraph div class:”border” Here is a cat. body h1 class:“title” Hi! script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS image id="cat" Main Worker Network
 Process
  • 67. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK paragraph div class:”border” Here is a cat. body h1 class:“title” Hi! script image id="cat" REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 68. Validate your HTML. We didn't when we published an article yesterday... A mis- nested <span><del>
 </span></del> caused this on iPhone's Reader app. Not every renderer of HTML is as forgiving as browsers. Bruce Lawson @brucel PARSING - A CAUTIONARY TALE
  • 69. @ksylor HOW CAN WE MAKE THAT BETTER?
  • 70. @ksylor DOM + CSSOM, ASAP PARSING GOAL:
  • 71. @ksylor request html PARSING PARSING TIMELINE Main Worker Network
 Process parse html request css parse css parse html DomContentLoaded <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css" rel="stylesheet"/>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat" 
 alt="Cat!"/>
 </div>
 </body>
 </html> request js request image parse & execute js DomInteractive & preload scanner NavigationStart TTFB
  • 72. @ksylor PARSING - TIMELINE IMPROVEMENTS MOVE STYLES INLINE parse html parse css parse html <html>
 <head>
 <title>Cats are fun!</title>
 <style>...</style>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat" 
 alt="Cat!"/>
 </div>
 </body>
 </html> request image parse & execute js request js preload scanner DomContentLoaded DomInteractive & request html Main Worker Network
 Process NavigationStart TTFB
  • 73. @ksylor PARSING - TIMELINE IMPROVEMENTS MOVE SCRIPTS INLINE & TO THE BOTTOM parse html parse css parse html DomContentLoaded <html>
 <head>
 <title>Cats are fun!</title>
 <style>...</style>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat" 
 alt="Cat!"/>
 </div>
 <script>...</script>
 </body>
 </html> request image parse & execute js preload scanner DomInteractive request html Main Worker Network
 Process NavigationStart TTFB
  • 74. @ksylor parse & execute js PARSING - TIMELINE IMPROVEMENTS ASYNC EXTERNAL JS parse html parse css DomContentLoaded <html>
 <head>
 <title>Cats are fun!</title>
 <style>...</style>
 <script async src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat" 
 alt="Cat!"/>
 </div>
 </body>
 </html> request image request js html html DomInteractive & preload scanner request html Main Worker Network
 Process NavigationStart TTFB
  • 75. @ksylor parse & execute js PARSING - TIMELINE IMPROVEMENTS ASYNC EXTERNAL JS (BIGGER FILE/SLOWER NETWORK) parse html parse css DomContentLoaded <html>
 <head>
 <title>Cats are fun!</title>
 <style>...</style>
 <script async src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat" 
 alt="Cat!"/>
 </div>
 </body>
 </html> request image request js parse html DomInteractive & preload scanner request html Main Worker Network
 Process NavigationStart TTFB
  • 76. @ksylor parse & execute js PARSING - TIMELINE IMPROVEMENTS DEFER EXTERNAL JS parse html parse css DomContentLoaded <html>
 <head>
 <title>Cats are fun!</title>
 <style>...</style>
 <script defer src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat" 
 alt="Cat!"/>
 </div>
 </body>
 </html> request image request js parse html DomInteractive preload scanner request html Main Worker Network
 Process NavigationStart TTFB
  • 77. @ksylor THE TROUBLE WITH BROWSERS THE MAIN THREAD DOES IT ALL ▸ Parsing HTML into DOM ▸ Parsing CSS into CSSOM ▸ JS into JS AST ▸ JS Execution
  • 78. @ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
  • 80. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 81. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 82. @ksylor + BROWSER DEFAULT STYLES + USER-PROVIDED STYLESHEETS RENDERING - STYLE CALCULATION html DOM head link title body h1 class:“title” paragraph image div class:”border” Hi! Here is a cat. CSSOM body font-family: sans-serif; .border border: 1px solid gray; img display:block; margin: 1em; .title font-family: serif; COMPUTED STYLE root <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. h1 color: magenta; script Main Raster/
 Compositor Network
 Process
  • 83. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 84. @ksylor RENDERING - LAYOUT https://mindblowncat.comroot/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. html/viewporthtml/viewport COMPUTED STYLE Main Raster/
 Compositor Network
 Process
  • 85. @ksylor root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE RENDERING - LAYOUT html/viewport body COMPUTED STYLE Main Raster/
 Compositor Network
 Process
  • 86. @ksylor RENDERING - LAYOUT html/viewport body h1 root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE Main Raster/
 Compositor Network
 Process
  • 87. @ksylor root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE RENDERING - LAYOUT html/viewport body h1 Hi! Main Raster/
 Compositor Network
 Process
  • 88. @ksylor root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE RENDERING - LAYOUT html/viewport body h1 Hi! p Main Raster/
 Compositor Network
 Process
  • 89. @ksylor RENDERING - LAYOUT html/viewport body h1 Hi! Here is a cat. p root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE Main Raster/
 Compositor Network
 Process
  • 90. @ksylor root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE RENDERING - LAYOUT html/viewport body h1 Hi! Here is a cat. p div Main Raster/
 Compositor Network
 Process
  • 91. @ksylor RENDERING - LAYOUT html/viewport body h1 Hi! Here is a cat. div p img root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE Main Raster/
 Compositor Network
 Process
  • 92. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 93. @ksylor [ 
 [r, g, b, a],
 [r, g, b, a],
 [r, g, b, a], 
 ...
 ] RENDERING - PAINT FRAME BUFFER
  • 94. @ksylor RENDERING - PAINT FRAME BUFFER [ 
 [r, g, b, a],
 [r, g, b, a],
 [r, g, b, a], 
 ...
 ] } 2.7Mpixels - iPhone X
  • 95. @ksylor RENDERING - PAINT PIXELS ARE PAINTED ON LAYERS RASTERIZE Main Raster/
 Compositor Network
 Process *layers pictured are imaginary for 
 demonstration purposes only ▸ 3D transforms ▸ CSS animation using opacity or transform ▸ will-change ▸ "accelerated" CSS filters ▸ <video> or <canvas> ▸ z-index above another layer CREATE A NEW LAYER
  • 96. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 97. @ksylor THE GPU OUR NEW COMPOSITING BFF
  • 98. @ksylor Network
 Process RENDERING - COMPOSITE FLATTEN THE LAYERS (WITH MATH) Main Raster/
 Compositor background_layer = [
 [ 244, 0, 32, 1 ],
 [ 248, 10, 50, .5 ],
 ...
 ]; 
 layer_1 = [
 [ 33, 12, 42, 1 ],
 [ 0, 0, 15, 1 ],
 ...
 ]; applyCSSTransforms();
 applyCSSFilters(); return blendMode(
 background_layer,
 layer_1
 ) GPU frame_buffer = [
 [ 33, 12, 42, 1 ],
 [ 0, 0, 50, .5 ],
 ...
 ];
  • 99. @ksylor Network
 Process RENDERING - COMPOSITE FINALLY! SOMETHING ON THE SCREEN! https://mindblowncat.com Hi! Here is a cat. Main Raster/
 Compositor
  • 100. @ksylor RENDERING TIMELINE CHECK FirstPaint style paint composite layoutparse html parse css parse html DomContentLoaded request image parse & execute js preload scanner DomInteractive request html Main Worker Network
 Process NavigationStart TTFB
  • 102. @ksylor STYLE LAYOUT PAINT COMPOSITE LET'S DO THAT AGAIN
  • 103. @ksylor RENDERING - REFLOW RE-LAYOUT Hi! Here is a cat. Hi! Here is a cat. img Main
  • 104. @ksylor RENDERING - REFLOW RE-PAINT Hi! Here is a cat. Raster/
 Compositor RASTERIZE
  • 106. @ksylor RENDERING - REFLOW REFLOW ON THE MAIN THREAD FirstPaint style paint composite layoutparse html parse css parse html DomContentLoaded request image parse & execute js preload scanner DomInteractive request html Main Worker Network
 Process NavigationStart TTFB paint composite layout Load (PageLoad)
  • 107. @ksylor RENDERING - SLIGHTLY LESS REFLOW IMAGE DIMENSIONS <img src="cat.gif" id="cat" alt="Cat!" height="442" width="500"/>
 STYLE LAYOUT PAINT COMPOSITE
  • 108. @ksylor RENDERING THE MAIN THREAD DOES IT ALL ▸ Parsing HTML into DOM ▸ Parsing CSS into CSSOM ▸ JS into JS AST ▸ JS Execution ▸ Style Calculation (and re-style) ▸ Layout (and re-layout) ▸ Paint (and re-paint)
  • 109. @ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction Hi! Here is a cat.
  • 110. @ksylor INTERACTION THE MAIN THREAD DOES IT ALL ▸ Parsing HTML into DOM ▸ Parsing CSS into CSSOM ▸ JS into JS AST ▸ JS Execution ▸ Style Calculation (and re-style) ▸ Layout (and re-layout) ▸ Paint (and re-paint) ▸ User interaction
  • 111. @ksylor IMMEDIATE & JANK FREE INTERACTION GOAL:
  • 113. @ksylor INTERACTION INPUT DELAY parse & execute js async request js FirstPaint style paint composite layoutparse html parse css parse html preload scanner DomInteractive &
 DomContentLoaded request html Main Worker Network
 Process NavigationStart TTFB User taps
 button First Input Delay
  • 114. @ksylor INTERACTION - INPUT DELAY UNBLOCK THE MAIN THREAD ▸ Ship less Javascript ▸ Code-splitting - load what you need to render, then lazy load the rest ▸ Break up execution into smaller, async tasks (requestIdleCallback) ▸ Measure first input delay and total blocking time ▸ Audit frameworks & third party scripts
  • 116. @ksylor INTERACTION - ANIMATION FRAME BUFFER [ 
 [r, g, b, a],
 [r, g, b, a],
 [r, g, b, a], 
 ...
 ] } 2.7Mpixels - iPhone X 60 fps FRAME RATE 16.67msto draw each frame}
  • 118. @ksylor INTERACTION - JANK "DROPPING" FRAMES FROM THE MAIN THREAD 16.67ms frame! frame! re-style re-layoutjs event handler button click opens
 an overlay dialog frame! frame! frame! <div>'s style changes
 from display: none;
 to display: block; re-paint jank :( jank :( jank :( jank :( re-composite
 on the GPU
  • 119. @ksylor RENDERING - LAYERS LAYERS ARE AWESOME Main Raster/
 Compositor Network
 Process ▸ Repaint only the layer that changed, all other layers stay the same ▸ Easier to move/animate layers without repainting the whole page. ▸ But layers are expensive in memory! ▸ Don't create layers that don't change how the page is rendered.
  • 120. @ksylor INTERACTION - BETTER ANIMATION HTML CSS JS
  • 121. @ksylor INTERACTION - LESS JANK! DROP FEWER FRAMES! 16.67ms frame! frame! stylejs event handler button click opens
 an overlay dialog frame! frame! frame! <div>'s style changes
 from visibility: hidden;
 to visibility: visible;
 and uses css animations jank :( jank :( re-composite
 on the GPU frame! frame!frame!
  • 122. @ksylor HOW DO WE MAKE BROWSERS HAPPY? https://mindblowncat.com 4 PHASES ▸ Navigation GET IT OVER WITH! ▸ Parsing DOM + CSSOM, ASAP ▸ Rendering DO LESS WORK (ON THE CPU) ▸ Interaction IMMEDIATE & JANK FREE Hi! Here is a cat.