SlideShare une entreprise Scribd logo

Happy Browser, Happy User! WordSesh 2019

•
•
K
Katie Sylor-Miller

Performance 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.

Ingénierie
1  sur  126
Télécharger pour lire hors ligne
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? 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 - CONNECTION https://mindblowncat.com the internet 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144
@ksylor NAVIGATION - CONNECTION https://mindblowncat.com the internet 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK 2. TCP handshake mindblowncat.com
 162.144.26.144
@ksylor NAVIGATION - CONNECTION https://mindblowncat.com the internet 3. SSL handshake ClientHello ServerHello & Certificate Client key FINISHED FINISHED 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK 2. TCP handshake mindblowncat.com
 162.144.26.144
@ksylor NAVIGATION - CONNECTION https://mindblowncat.com the internet 3. SSL handshake ClientHello ServerHello & Certificate Client key FINISHED FINISHED 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK 2. TCP handshake 4. Request mindblowncat.com
 162.144.26.144 HTTP GET
@ksylor NAVIGATION - CONNECTION https://mindblowncat.com the internet 3. SSL handshake ClientHello ServerHello & Certificate Client key FINISHED FINISHED 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK 2. TCP handshake 4. Request mindblowncat.com
 162.144.26.144 HTTP GET 5. SERVER STUFF 6. SEND RESPONSE
@ksylor NAVIGATION - CONNECTION https://mindblowncat.com the internet 3. SSL handshake ClientHello ServerHello & Certificate Client key FINISHED FINISHED 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK 2. TCP handshake 4. Request 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) 7. TTFB
@ksylor NAVIGATION - CONNECTION https://mindblowncat.com the internet 3. SSL handshake ClientHello ServerHello & Certificate Client key FINISHED FINISHED 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK 2. TCP handshake 4. Request 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) 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 go to: https://astexplorer.net
@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
@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 THE TROUBLE WITH BROWSERS 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 INTERACTION - RESPOND TO INPUT 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 - RESPOND TO INPUT 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 long tasks ▸ Audit frameworks, third party scripts, ads, and trackers
@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 - JANK "DROPPING" FRAMES FROM THE MAIN THREAD 16.67ms frame! frame! re-style re-layoutjs event handler button tap 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 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! "DROPPING" FRAMES FROM THE MAIN THREAD 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!

Recommandé

Level Up: 5 Expert Tips for Optimizing WordPress Performance
Level Up: 5 Expert Tips for Optimizing WordPress PerformanceLevel Up: 5 Expert Tips for Optimizing WordPress Performance
Level Up: 5 Expert Tips for Optimizing WordPress PerformancePantheon
 
Containers > VMs
Containers > VMsContainers > VMs
Containers > VMsDavid Timothy Strauss
 
Wordpress optimization
Wordpress optimizationWordpress optimization
Wordpress optimizationAlmog Baku
 
WordPress + NGINX Best Practices with EasyEngine
WordPress + NGINX Best Practices with EasyEngineWordPress + NGINX Best Practices with EasyEngine
WordPress + NGINX Best Practices with EasyEngineNGINX, Inc.
 
NGINX High-performance Caching
NGINX High-performance CachingNGINX High-performance Caching
NGINX High-performance CachingNGINX, Inc.
 
[KGC 2012] Online Game Server Architecture Case Study Performance and Security
[KGC 2012] Online Game Server Architecture Case Study Performance and Security[KGC 2012] Online Game Server Architecture Case Study Performance and Security
[KGC 2012] Online Game Server Architecture Case Study Performance and SecuritySeungmin Shin
 
Nginx: Accelerate Rails, HTTP Tricks
Nginx: Accelerate Rails, HTTP TricksNginx: Accelerate Rails, HTTP Tricks
Nginx: Accelerate Rails, HTTP TricksAdam Wiggins
 
Scaling MongoDB in the cloud with Microsoft Azure
Scaling MongoDB in the cloud with Microsoft AzureScaling MongoDB in the cloud with Microsoft Azure
Scaling MongoDB in the cloud with Microsoft AzureIvan Fioravanti
 

Recommandé

Level Up: 5 Expert Tips for Optimizing WordPress Performance
Level Up: 5 Expert Tips for Optimizing WordPress PerformanceLevel Up: 5 Expert Tips for Optimizing WordPress Performance
Level Up: 5 Expert Tips for Optimizing WordPress PerformancePantheon
 
Containers > VMs
Containers > VMsContainers > VMs
Containers > VMsDavid Timothy Strauss
 
Wordpress optimization
Wordpress optimizationWordpress optimization
Wordpress optimizationAlmog Baku
 
WordPress + NGINX Best Practices with EasyEngine
WordPress + NGINX Best Practices with EasyEngineWordPress + NGINX Best Practices with EasyEngine
WordPress + NGINX Best Practices with EasyEngineNGINX, Inc.
 
NGINX High-performance Caching
NGINX High-performance CachingNGINX High-performance Caching
NGINX High-performance CachingNGINX, Inc.
 
[KGC 2012] Online Game Server Architecture Case Study Performance and Security
[KGC 2012] Online Game Server Architecture Case Study Performance and Security[KGC 2012] Online Game Server Architecture Case Study Performance and Security
[KGC 2012] Online Game Server Architecture Case Study Performance and SecuritySeungmin Shin
 
Nginx: Accelerate Rails, HTTP Tricks
Nginx: Accelerate Rails, HTTP TricksNginx: Accelerate Rails, HTTP Tricks
Nginx: Accelerate Rails, HTTP TricksAdam Wiggins
 
Scaling MongoDB in the cloud with Microsoft Azure
Scaling MongoDB in the cloud with Microsoft AzureScaling MongoDB in the cloud with Microsoft Azure
Scaling MongoDB in the cloud with Microsoft AzureIvan Fioravanti
 
Reverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and VarnishReverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and VarnishEl Mahdi Benzekri
 
MongoDB World 2016: From the Polls to the Trolls: Seeing What the World Think...
MongoDB World 2016: From the Polls to the Trolls: Seeing What the World Think...MongoDB World 2016: From the Polls to the Trolls: Seeing What the World Think...
MongoDB World 2016: From the Polls to the Trolls: Seeing What the World Think...MongoDB
 
MySQL NDB 8.0 clusters in your laptop with dbdeployer
MySQL NDB 8.0 clusters in your laptop with dbdeployerMySQL NDB 8.0 clusters in your laptop with dbdeployer
MySQL NDB 8.0 clusters in your laptop with dbdeployerGiuseppe Maxia
 
Ansible
AnsibleAnsible
AnsibleVladimír Smitka
 
Integrated Cache on Netscaler
Integrated Cache on NetscalerIntegrated Cache on Netscaler
Integrated Cache on NetscalerMark Hillick
 
Speed Matters
Speed MattersSpeed Matters
Speed MattersMark Stanton
 
Test like a_boss
Test like a_bossTest like a_boss
Test like a_bossGiuseppe Maxia
 
Dbdeployer, the universal installer
Dbdeployer, the universal installerDbdeployer, the universal installer
Dbdeployer, the universal installerGiuseppe Maxia
 
Composer Tools & Frameworks for Drupal
Composer Tools & Frameworks for DrupalComposer Tools & Frameworks for Drupal
Composer Tools & Frameworks for DrupalPantheon
 
Highly available Drupal on a Raspberry Pi cluster
Highly available Drupal on a Raspberry Pi clusterHighly available Drupal on a Raspberry Pi cluster
Highly available Drupal on a Raspberry Pi clusterJeff Geerling
 
cache concepts and varnish-cache
cache concepts and varnish-cachecache concepts and varnish-cache
cache concepts and varnish-cacheMarc Cortinas Val
 
Scaling WordPress On A Small Budget
Scaling WordPress On A Small BudgetScaling WordPress On A Small Budget
Scaling WordPress On A Small BudgetBrecht Ryckaert
 
Test complex database systems in your laptop with dbdeployer
Test complex database systems in your laptop with dbdeployerTest complex database systems in your laptop with dbdeployer
Test complex database systems in your laptop with dbdeployerGiuseppe Maxia
 
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...Tom Croucher
 
Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2SergeyChernyshev
 
Usenix LISA 2012 - Choosing a Proxy
Usenix LISA 2012 - Choosing a ProxyUsenix LISA 2012 - Choosing a Proxy
Usenix LISA 2012 - Choosing a ProxyLeif Hedstrom
 
Cassandra as Memcache
Cassandra as MemcacheCassandra as Memcache
Cassandra as MemcacheEdward Capriolo
 
Oracle Java Cloud Service JCS (and WebLogic 12c) - What you Should Know
Oracle Java Cloud Service JCS (and WebLogic 12c) - What you Should KnowOracle Java Cloud Service JCS (and WebLogic 12c) - What you Should Know
Oracle Java Cloud Service JCS (and WebLogic 12c) - What you Should KnowFrank Munz
 
Apache Cassandra and Go
Apache Cassandra and GoApache Cassandra and Go
Apache Cassandra and GoDataStax Academy
 
What I learned from FluentConf and then some
What I learned from FluentConf and then someWhat I learned from FluentConf and then some
What I learned from FluentConf and then someOhad Kravchick
 
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! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Katie Sylor-Miller
 

Contenu connexe

Tendances

Reverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and VarnishReverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and VarnishEl Mahdi Benzekri
 
MongoDB World 2016: From the Polls to the Trolls: Seeing What the World Think...
MongoDB World 2016: From the Polls to the Trolls: Seeing What the World Think...MongoDB World 2016: From the Polls to the Trolls: Seeing What the World Think...
MongoDB World 2016: From the Polls to the Trolls: Seeing What the World Think...MongoDB
 
MySQL NDB 8.0 clusters in your laptop with dbdeployer
MySQL NDB 8.0 clusters in your laptop with dbdeployerMySQL NDB 8.0 clusters in your laptop with dbdeployer
MySQL NDB 8.0 clusters in your laptop with dbdeployerGiuseppe Maxia
 
Integrated Cache on Netscaler
Integrated Cache on NetscalerIntegrated Cache on Netscaler
Integrated Cache on NetscalerMark Hillick
 
Dbdeployer, the universal installer
Dbdeployer, the universal installerDbdeployer, the universal installer
Dbdeployer, the universal installerGiuseppe Maxia
 
Composer Tools & Frameworks for Drupal
Composer Tools & Frameworks for DrupalComposer Tools & Frameworks for Drupal
Composer Tools & Frameworks for DrupalPantheon
 
Highly available Drupal on a Raspberry Pi cluster
Highly available Drupal on a Raspberry Pi clusterHighly available Drupal on a Raspberry Pi cluster
Highly available Drupal on a Raspberry Pi clusterJeff Geerling
 
cache concepts and varnish-cache
cache concepts and varnish-cachecache concepts and varnish-cache
cache concepts and varnish-cacheMarc Cortinas Val
 
Scaling WordPress On A Small Budget
Scaling WordPress On A Small BudgetScaling WordPress On A Small Budget
Scaling WordPress On A Small BudgetBrecht Ryckaert
 
Test complex database systems in your laptop with dbdeployer
Test complex database systems in your laptop with dbdeployerTest complex database systems in your laptop with dbdeployer
Test complex database systems in your laptop with dbdeployerGiuseppe Maxia
 
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...Tom Croucher
 
Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2SergeyChernyshev
 
Usenix LISA 2012 - Choosing a Proxy
Usenix LISA 2012 - Choosing a ProxyUsenix LISA 2012 - Choosing a Proxy
Usenix LISA 2012 - Choosing a ProxyLeif Hedstrom
 
Oracle Java Cloud Service JCS (and WebLogic 12c) - What you Should Know
Oracle Java Cloud Service JCS (and WebLogic 12c) - What you Should KnowOracle Java Cloud Service JCS (and WebLogic 12c) - What you Should Know
Oracle Java Cloud Service JCS (and WebLogic 12c) - What you Should KnowFrank Munz
 
What I learned from FluentConf and then some
What I learned from FluentConf and then someWhat I learned from FluentConf and then some
What I learned from FluentConf and then someOhad Kravchick
 

Tendances (20)

Reverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and VarnishReverse proxy & web cache with NGINX, HAProxy and Varnish
Reverse proxy & web cache with NGINX, HAProxy and Varnish
 
MongoDB World 2016: From the Polls to the Trolls: Seeing What the World Think...
MongoDB World 2016: From the Polls to the Trolls: Seeing What the World Think...MongoDB World 2016: From the Polls to the Trolls: Seeing What the World Think...
MongoDB World 2016: From the Polls to the Trolls: Seeing What the World Think...
 
MySQL NDB 8.0 clusters in your laptop with dbdeployer
MySQL NDB 8.0 clusters in your laptop with dbdeployerMySQL NDB 8.0 clusters in your laptop with dbdeployer
MySQL NDB 8.0 clusters in your laptop with dbdeployer
 
Ansible
AnsibleAnsible
Ansible
 
Integrated Cache on Netscaler
Integrated Cache on NetscalerIntegrated Cache on Netscaler
Integrated Cache on Netscaler
 
Speed Matters
Speed MattersSpeed Matters
Speed Matters
 
Test like a_boss
Test like a_bossTest like a_boss
Test like a_boss
 
Dbdeployer, the universal installer
Dbdeployer, the universal installerDbdeployer, the universal installer
Dbdeployer, the universal installer
 
Composer Tools & Frameworks for Drupal
Composer Tools & Frameworks for DrupalComposer Tools & Frameworks for Drupal
Composer Tools & Frameworks for Drupal
 
Highly available Drupal on a Raspberry Pi cluster
Highly available Drupal on a Raspberry Pi clusterHighly available Drupal on a Raspberry Pi cluster
Highly available Drupal on a Raspberry Pi cluster
 
cache concepts and varnish-cache
cache concepts and varnish-cachecache concepts and varnish-cache
cache concepts and varnish-cache
 
Scaling WordPress On A Small Budget
Scaling WordPress On A Small BudgetScaling WordPress On A Small Budget
Scaling WordPress On A Small Budget
 
Test complex database systems in your laptop with dbdeployer
Test complex database systems in your laptop with dbdeployerTest complex database systems in your laptop with dbdeployer
Test complex database systems in your laptop with dbdeployer
 
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
JavaScript is the new black - Why Node.js is going to rock your world - Web 2...
 
Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2Building your own CDN using Amazon EC2
Building your own CDN using Amazon EC2
 
Usenix LISA 2012 - Choosing a Proxy
Usenix LISA 2012 - Choosing a ProxyUsenix LISA 2012 - Choosing a Proxy
Usenix LISA 2012 - Choosing a Proxy
 
Cassandra as Memcache
Cassandra as MemcacheCassandra as Memcache
Cassandra as Memcache
 
Oracle Java Cloud Service JCS (and WebLogic 12c) - What you Should Know
Oracle Java Cloud Service JCS (and WebLogic 12c) - What you Should KnowOracle Java Cloud Service JCS (and WebLogic 12c) - What you Should Know
Oracle Java Cloud Service JCS (and WebLogic 12c) - What you Should Know
 
Apache Cassandra and Go
Apache Cassandra and GoApache Cassandra and Go
Apache Cassandra and Go
 
What I learned from FluentConf and then some
What I learned from FluentConf and then someWhat I learned from FluentConf and then some
What I learned from FluentConf and then some
 

Similaire à Happy Browser, Happy User! WordSesh 2019

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! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Katie Sylor-Miller
 
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
 
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
 
Responsive content
Responsive contentResponsive content
Responsive contenthonzie
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ XeroCraig Walker
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and RenderingStoyan Stefanov
 
Building Faster Websites
Building Faster WebsitesBuilding Faster Websites
Building Faster WebsitesCraig Walker
 
Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracketjnewmanux
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012Bastian Grimm
 
Performance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best PracticesPerformance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best PracticesDoris Chen
 
Catalyst - refactor large apps with it and have fun!
Catalyst - refactor large apps with it and have fun!Catalyst - refactor large apps with it and have fun!
Catalyst - refactor large apps with it and have fun!mold
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013Bastian Grimm
 

Similaire à Happy Browser, Happy User! WordSesh 2019 (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! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
 
Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]Performance as User Experience [AEADC 2018]
Performance as User Experience [AEADC 2018]
 
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
 
Responsive content
Responsive contentResponsive content
Responsive content
 
Client Side Performance @ Xero
Client Side Performance @ XeroClient Side Performance @ Xero
Client Side Performance @ Xero
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsday
 
Building Faster Websites
Building Faster WebsitesBuilding Faster Websites
Building Faster Websites
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
 
Killing the Angle Bracket
Killing the Angle BracketKilling the Angle Bracket
Killing the Angle Bracket
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 Workshop
 
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 201210 Tips to make your Website lightning-fast - SMX Stockholm 2012
10 Tips to make your Website lightning-fast - SMX Stockholm 2012
 
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design
 
Meta Refresh 2014
Meta Refresh 2014Meta Refresh 2014
Meta Refresh 2014
 
Performance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best PracticesPerformance Optimization and JavaScript Best Practices
Performance Optimization and JavaScript Best Practices
 
Catalyst - refactor large apps with it and have fun!
Catalyst - refactor large apps with it and have fun!Catalyst - refactor large apps with it and have fun!
Catalyst - refactor large apps with it and have fun!
 
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover
 
The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013The Need for Speed - SMX Sydney 2013
The Need for Speed - SMX Sydney 2013
 

Plus de 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 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
 
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
 
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
 
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
 

Plus de Katie Sylor-Miller (8)

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 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...
 
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
 
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 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
 

Dernier

VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Bookingdharasingh5698
 
Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...
Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...
Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...soginsider
 
Hostel management system project report..pdf
Hostel management system project report..pdfHostel management system project report..pdf
Hostel management system project report..pdfKamal Acharya
 
Work-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxWork-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxJuliansyahHarahap1
 
Introduction to Serverless with AWS Lambda
Introduction to Serverless with AWS LambdaIntroduction to Serverless with AWS Lambda
Introduction to Serverless with AWS LambdaOmar Fathy
 
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...Arindam Chakraborty, Ph.D., P.E. (CA, TX)
 
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoorTop Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoordharasingh5698
 
DC MACHINE-Motoring and generation, Armature circuit equation
DC MACHINE-Motoring and generation, Armature circuit equationDC MACHINE-Motoring and generation, Armature circuit equation
DC MACHINE-Motoring and generation, Armature circuit equationBhangaleSonal
 
A Study of Urban Area Plan for Pabna Municipality
A Study of Urban Area Plan for Pabna MunicipalityA Study of Urban Area Plan for Pabna Municipality
A Study of Urban Area Plan for Pabna MunicipalityMorshed Ahmed Rahath
 
Thermal Engineering Unit - I & II . ppt
Thermal Engineering Unit - I & II . pptThermal Engineering Unit - I & II . ppt
Thermal Engineering Unit - I & II . pptDineshKumar4165
 
Thermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - VThermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - VDineshKumar4165
 
Employee leave management system project.
Employee leave management system project.Employee leave management system project.
Employee leave management system project.Kamal Acharya
 
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Bookingdharasingh5698
 
Minimum and Maximum Modes of microprocessor 8086
Minimum and Maximum Modes of microprocessor 8086Minimum and Maximum Modes of microprocessor 8086
Minimum and Maximum Modes of microprocessor 8086anil_gaur
 
Thermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.pptThermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.pptDineshKumar4165
 
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfKamal Acharya
 

Dernier (20)

VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Palanpur 7001035870 Whatsapp Number, 24/07 Booking
 
Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...
Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...
Hazard Identification (HAZID) vs. Hazard and Operability (HAZOP): A Comparati...
 
Call Girls in Netaji Nagar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Netaji Nagar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort ServiceCall Girls in Netaji Nagar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Netaji Nagar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
 
Hostel management system project report..pdf
Hostel management system project report..pdfHostel management system project report..pdf
Hostel management system project report..pdf
 
Integrated Test Rig For HTFE-25 - Neometrix
Integrated Test Rig For HTFE-25 - NeometrixIntegrated Test Rig For HTFE-25 - Neometrix
Integrated Test Rig For HTFE-25 - Neometrix
 
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak HamilCara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
 
Work-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptxWork-Permit-Receiver-in-Saudi-Aramco.pptx
Work-Permit-Receiver-in-Saudi-Aramco.pptx
 
Introduction to Serverless with AWS Lambda
Introduction to Serverless with AWS LambdaIntroduction to Serverless with AWS Lambda
Introduction to Serverless with AWS Lambda
 
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
 
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoorTop Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
 
DC MACHINE-Motoring and generation, Armature circuit equation
DC MACHINE-Motoring and generation, Armature circuit equationDC MACHINE-Motoring and generation, Armature circuit equation
DC MACHINE-Motoring and generation, Armature circuit equation
 
A Study of Urban Area Plan for Pabna Municipality
A Study of Urban Area Plan for Pabna MunicipalityA Study of Urban Area Plan for Pabna Municipality
A Study of Urban Area Plan for Pabna Municipality
 
Thermal Engineering Unit - I & II . ppt
Thermal Engineering Unit - I & II . pptThermal Engineering Unit - I & II . ppt
Thermal Engineering Unit - I & II . ppt
 
Thermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - VThermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - V
 
Employee leave management system project.
Employee leave management system project.Employee leave management system project.
Employee leave management system project.
 
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 BookingVIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
 
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort ServiceCall Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
 
Minimum and Maximum Modes of microprocessor 8086
Minimum and Maximum Modes of microprocessor 8086Minimum and Maximum Modes of microprocessor 8086
Minimum and Maximum Modes of microprocessor 8086
 
Thermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.pptThermal Engineering -unit - III & IV.ppt
Thermal Engineering -unit - III & IV.ppt
 
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
 

Happy Browser, Happy User! WordSesh 2019

  • 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? 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
  • 12. @ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
  • 13. @ksylor GET IT OVER WITH! NAVIGATION GOAL:
  • 14. @ksylor NAVIGATION - CONNECTION https://mindblowncat.com the internet 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144
  • 15. @ksylor NAVIGATION - CONNECTION https://mindblowncat.com the internet 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK 2. TCP handshake mindblowncat.com
 162.144.26.144
  • 16. @ksylor NAVIGATION - CONNECTION https://mindblowncat.com the internet 3. SSL handshake ClientHello ServerHello & Certificate Client key FINISHED FINISHED 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK 2. TCP handshake mindblowncat.com
 162.144.26.144
  • 17. @ksylor NAVIGATION - CONNECTION https://mindblowncat.com the internet 3. SSL handshake ClientHello ServerHello & Certificate Client key FINISHED FINISHED 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK 2. TCP handshake 4. Request mindblowncat.com
 162.144.26.144 HTTP GET
  • 18. @ksylor NAVIGATION - CONNECTION https://mindblowncat.com the internet 3. SSL handshake ClientHello ServerHello & Certificate Client key FINISHED FINISHED 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK 2. TCP handshake 4. Request mindblowncat.com
 162.144.26.144 HTTP GET 5. SERVER STUFF 6. SEND RESPONSE
  • 19. @ksylor NAVIGATION - CONNECTION https://mindblowncat.com the internet 3. SSL handshake ClientHello ServerHello & Certificate Client key FINISHED FINISHED 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK 2. TCP handshake 4. Request 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) 7. TTFB
  • 20. @ksylor NAVIGATION - CONNECTION https://mindblowncat.com the internet 3. SSL handshake ClientHello ServerHello & Certificate Client key FINISHED FINISHED 1. DNS lookup DNS server what is the IP address for
 mindblowncat.com? 162.144.26.144 SYN SYN ACK ACK 2. TCP handshake 4. Request 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) 7. TTFB 8. Parse
  • 21. @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
  • 22. @ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
  • 23. @ksylor DOM + CSSOM, ASAP PARSING GOAL:
  • 26. @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>
  • 27. @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
  • 28. @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
  • 29. @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
  • 30. @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
  • 31. @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
  • 32. @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
  • 33. @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
  • 35. @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
  • 36. @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
  • 37. @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
  • 38. @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
  • 39. @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
  • 41. @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
  • 43. @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 go to: https://astexplorer.net
  • 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 body: FunctionDeclaration id: body:
  • 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: "badIdea" id: body: body:
  • 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: "badIdea" id: body: BlockStatement body:
  • 47. @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:
  • 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 VariableDeclaration Identifier name: "badIdea" id: id: body: Identifier name: "cat" BlockStatement body: body: init:
  • 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" id: init: id: body: BlockStatement body: body: CallExpression callee: arguments:
  • 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" CallExpression id: init: id: body: BlockStatement body: body: callee: arguments: MemberExpression object: property:
  • 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" CallExpression id: init: id: body: BlockStatement body: body: MemberExpressioncallee: object: Identifier name: "document" property: arguments:
  • 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" CallExpression id: init: id: body: BlockStatement body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" arguments:
  • 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: "document" Identifier name: "badIdea" MemberExpression CallExpression id: init: callee: object: Identifier name: "getElementById" id: body: BlockStatement Literal value:"cat" arguments: body: body: property:
  • 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" 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:
  • 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: "=" left: id: body: BlockStatement MemberExpression object: property: body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: right: expression:
  • 56. @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:
  • 57. @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:
  • 58. @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:
  • 59. @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:
  • 60. @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:
  • 62. @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
  • 63. @ksylor JAVASCRIPT EXECUTION JS html head link title script DOM ! Uncaught TypeError: 
 Cannot set property 'src' of null
 at badIdea (script.js:5)
  • 65. @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
  • 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 script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS 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 body script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 68. @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
  • 69. @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
  • 70. @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
  • 71. @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
  • 72. @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
  • 73. @ksylor HOW CAN WE MAKE THAT BETTER?
  • 74. @ksylor DOM + CSSOM, ASAP PARSING GOAL:
  • 75. @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
  • 76. @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
  • 77. @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
  • 78. @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
  • 79. @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
  • 80. @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
  • 81. @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
  • 82. @ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
  • 84. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 85. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 86. @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
  • 87. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 88. @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
  • 89. @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
  • 90. @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
  • 91. @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
  • 92. @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
  • 93. @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
  • 94. @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
  • 95. @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
  • 96. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 97. @ksylor [ 
 [r, g, b, a],
 [r, g, b, a],
 [r, g, b, a], 
 ...
 ] RENDERING - PAINT FRAME BUFFER
  • 98. @ksylor RENDERING - PAINT FRAME BUFFER [ 
 [r, g, b, a],
 [r, g, b, a],
 [r, g, b, a], 
 ...
 ] } 2.7Mpixels - iPhone X
  • 99. @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
  • 100. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 101. @ksylor THE GPU OUR NEW COMPOSITING BFF
  • 102. @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 ],
 ...
 ];
  • 103. @ksylor Network
 Process RENDERING - COMPOSITE FINALLY! SOMETHING ON THE SCREEN! https://mindblowncat.com Hi! Here is a cat. Main Raster/
 Compositor
  • 104. @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
  • 106. @ksylor STYLE LAYOUT PAINT COMPOSITE LET'S DO THAT AGAIN
  • 107. @ksylor RENDERING - REFLOW RE-LAYOUT Hi! Here is a cat. Hi! Here is a cat. img Main
  • 108. @ksylor RENDERING - REFLOW RE-PAINT Hi! Here is a cat. Raster/
 Compositor RASTERIZE
  • 110. @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)
  • 111. @ksylor RENDERING - SLIGHTLY LESS REFLOW IMAGE DIMENSIONS <img src="cat.gif" id="cat" alt="Cat!" height="442" width="500"/>
 STYLE LAYOUT PAINT COMPOSITE
  • 112. @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 ▸ Style Calculation (and re-style) ▸ Layout (and re-layout) ▸ Paint (and re-paint)
  • 113. @ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction Hi! Here is a cat.
  • 114. @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
  • 115. @ksylor IMMEDIATE & JANK FREE INTERACTION GOAL:
  • 116. @ksylor INTERACTION - RESPOND TO INPUT 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
  • 117. @ksylor INTERACTION - RESPOND TO INPUT 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 long tasks ▸ Audit frameworks, third party scripts, ads, and trackers
  • 118. @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}
  • 119. @ksylor INTERACTION - JANK "DROPPING" FRAMES FROM THE MAIN THREAD 16.67ms frame! frame! re-style re-layoutjs event handler button tap 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
  • 121. @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
  • 122. @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.
  • 123. @ksylor INTERACTION - BETTER ANIMATION HTML CSS JS
  • 124. @ksylor INTERACTION - LESS JANK! "DROPPING" FRAMES FROM THE MAIN THREAD 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!
  • 125. @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.