SlideShare una empresa de Scribd logo

Happy Browser, Happy User! - PerfMatters Conference 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.

Ingeniería
1 de 117
Descargar para leer sin conexión
HAPPY BROWSER, HAPPY USER! Katie Sylor-Miller
Katie Sylor-Miller Staff Software Engineer Etsy Frontend Systems @ksylor ohshitgit.com
 gum.co/oh-shit-git
 @ohshitgit bit.ly/ksm-dsh
@ksylor PERFORMANCE IS UX
PERFORMANCE IS UX
@ksylor HOW DO WE MAKE THE BROWSER HAPPY?
@ksylor THE TROUBLE WITH BROWSERS 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 HOW CAN WE CUT DOWN NAVIGATION TIME? ▸ HTTP/2 push ▸ Preloading & resource hints ▸ Reduce server response time ▸ Use a CDN ▸ Smaller files = fewer roundtrips ▸ First 14kb
@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 <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>
@ksylor DOM DOCUMENT OBJECT MODEL
@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 NETWORK RESPONSE HTML 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 - PRELOAD SCANNER 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 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 function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); html head link title script DOM ! Uncaught TypeError: 
 Cannot set property 'src' of null
 at badIdea (script.js:5) Main Worker Network
 Process
@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 PARSING - TIMELINE CHECK HTML 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 &wait at <script> for
 CSSOM preload scanner
@ksylor PARSING - TIMELINE IMPROVEMENTS MOVE STYLES INLINE Main Worker Network
 Process parse html parse css parse html DomContentLoaded <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 DomInteractive & preload scanner
@ksylor PARSING - TIMELINE IMPROVEMENTS MOVE SCRIPTS INLINE & TO THE BOTTOM Main Worker Network
 Process 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
@ksylor parse & execute js PARSING - TIMELINE IMPROVEMENTS ASYNC EXTERNAL JS Main Worker Network
 Process 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
@ksylor parse & execute js PARSING - TIMELINE IMPROVEMENTS ASYNC EXTERNAL JS (BIGGER FILE/SLOWER NETWORK) Main Worker Network
 Process 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
@ksylor parse & execute js PARSING - TIMELINE IMPROVEMENTS DEFER EXTERNAL JS Main Worker Network
 Process 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
@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 - PIXELS FRAME BUFFER
@ksylor RENDERING - PIXELS FRAME BUFFER [ 
 [r, g, b, a],
 [r, g, b, a],
 [r, g, b, a], 
 ...
 ] } 2.7Mpixels - iPhone X
@ksylor RENDERING - LAYERS 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 background_layer = [
 [ 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 HTML Main Worker/GPU/
 Compositor Network
 Process parse html request css parse css parse html <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 preload scanner DCL FirstMeaningfulPaint style paint composite layout
@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 - 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 BE JANK FREE INTERACTION GOAL:
@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 INTERACTION - ANIMATION FRAME BUFFER [ 
 [r, g, b, a],
 [r, g, b, a],
 [r, g, b, a], 
 ...
 ] } 2.7Mpixels - iPhone X 60 fps FRAME RATE 16.67msto draw each frame}
@ksylor INTERACTION - ANIMATION HTML <button id="my-button"
 aria-controls="awesomeness">
 Click me!
 </button> <div class="dialog" 
 id="awesomeness"
 role="dialog"
 aria-hidden="true"
 aria-modal="false"
 aria-label="Awesomeness selector">
 <h1>Can you handle the awesome?</h1>
 <button>Yes</button> 
 <button>no</button>
 </div> .dialog[aria-hidden="true"] {
 display: none;
 } .dialog[aria-hidden="false"] {
 display: block;
 } CSS JS document.getElementById("my-button")
 .addEventListener("click",
 showDialog); function showDialog() {
 // ...get the dialog
 dialog.setAttribute("aria-hidden",
 "false");
 }
@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 <button id="my-button"
 aria-controls="awesomeness">
 Click me!
 </button> <div class="dialog" 
 id="awesomeness"
 role="dialog"
 aria-hidden="true"
 aria-modal="false"
 aria-label="Awesomeness selector">
 <h1>Can you handle the awesome?</h1>
 <button>Yes</button> 
 <button>no</button>
 </div> .dialog {
 transition: visibility 0ms linear 300ms;
 } .dialog[aria-hidden="true"] {
 visibility: hidden;
 } .dialog[aria-hidden="false"] {
 visibility: visible;
 } CSS JS document.getElementById("my-button")
 .addEventListener("click",
 showDialog); function showDialog() {
 // ...get the dialog
 dialog.setAttribute("aria-hidden",
 "false");
 }
@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 BE JANK FREE Hi! Here is a cat.
@ksylor THANK YOU!https://github.com/ksylor/happy-browser-happy-user

Recomendados

Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsdayFrancesco Fullone
 
Building Faster Websites
Building Faster WebsitesBuilding Faster Websites
Building Faster WebsitesCraig Walker
 
Basic HTML CSS Slides
Basic HTML CSS Slides Basic HTML CSS Slides
Basic HTML CSS Slides Allyson Wehrs
 
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 MakeoverChristopher Schmitt
 
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 DesignChristopher Schmitt
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Deepak Sharma
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5osa_ora
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 WorkshopChristopher Schmitt
 

Recomendados

Please dont touch-3.6-jsday
Please dont touch-3.6-jsdayPlease dont touch-3.6-jsday
Please dont touch-3.6-jsdayFrancesco Fullone
 
Building Faster Websites
Building Faster WebsitesBuilding Faster Websites
Building Faster WebsitesCraig Walker
 
Basic HTML CSS Slides
Basic HTML CSS Slides Basic HTML CSS Slides
Basic HTML CSS Slides Allyson Wehrs
 
[heweb11] HTML5 Makeover
[heweb11] HTML5 Makeover[heweb11] HTML5 Makeover
[heweb11] HTML5 MakeoverChristopher Schmitt
 
[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 Design[PSU Web 2011] HTML5 Design
[PSU Web 2011] HTML5 DesignChristopher Schmitt
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Deepak Sharma
 
Game Development Using HTML 5
Game Development Using HTML 5Game Development Using HTML 5
Game Development Using HTML 5osa_ora
 
[edUi] HTML5 Workshop
[edUi] HTML5 Workshop[edUi] HTML5 Workshop
[edUi] HTML5 WorkshopChristopher Schmitt
 
Intro to Web Development
Intro to Web DevelopmentIntro to Web Development
Intro to Web DevelopmentFrank Wu
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. The University of Akron
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12ucbdrupal
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyDenise Jacobs
 
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009Ralph Whitbeck
 
Wcphx 2012-workshop
Wcphx 2012-workshopWcphx 2012-workshop
Wcphx 2012-workshopPtah Dunbar
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 
Jquery News Packages
Jquery News PackagesJquery News Packages
Jquery News PackagesUC Berkeley Graduate School of Journalism
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
DevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukamaDevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukamaEmily Karungi
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
 
Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Ontico
 
HTML5 & CSS3 Flag
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 FlagChristopher Schmitt
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
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
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimizationStoyan Stefanov
 
Advanced Thesis Techniques and Tricks
Advanced Thesis Techniques and TricksAdvanced Thesis Techniques and Tricks
Advanced Thesis Techniques and TricksBrad Williams
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)Christopher Schmitt
 
Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 2019Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 2019Katie Sylor-Miller
 
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
 

Más contenido relacionado

La actualidad más candente

Intro to Web Development
Intro to Web DevelopmentIntro to Web Development
Intro to Web DevelopmentFrank Wu
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. The University of Akron
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12ucbdrupal
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5Kevin DeRudder
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyDenise Jacobs
 
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009Ralph Whitbeck
 
Wcphx 2012-workshop
Wcphx 2012-workshopWcphx 2012-workshop
Wcphx 2012-workshopPtah Dunbar
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
DevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukamaDevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukamaEmily Karungi
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJLeonardo Balter
 
Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Ontico
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
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
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimizationStoyan Stefanov
 
Advanced Thesis Techniques and Tricks
Advanced Thesis Techniques and TricksAdvanced Thesis Techniques and Tricks
Advanced Thesis Techniques and TricksBrad Williams
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)Christopher Schmitt
 

La actualidad más candente (20)

Intro to Web Development
Intro to Web DevelopmentIntro to Web Development
Intro to Web Development
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
 
What you need to know bout html5
What you need to know bout html5What you need to know bout html5
What you need to know bout html5
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Advanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & EfficiencyAdvanced CSS Troubleshooting & Efficiency
Advanced CSS Troubleshooting & Efficiency
 
jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009jQuery For Beginners - jQuery Conference 2009
jQuery For Beginners - jQuery Conference 2009
 
Wcphx 2012-workshop
Wcphx 2012-workshopWcphx 2012-workshop
Wcphx 2012-workshop
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
 
Jquery News Packages
Jquery News PackagesJquery News Packages
Jquery News Packages
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
DevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukamaDevFest Makerere html5 presentation by caesar mukama
DevFest Makerere html5 presentation by caesar mukama
 
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJRealize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
Realize mais com HTML 5 e CSS 3 - 16 EDTED - RJ
 
Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)Progressive downloads and rendering (Stoyan Stefanov)
Progressive downloads and rendering (Stoyan Stefanov)
 
HTML5 & CSS3 Flag
HTML5 & CSS3 FlagHTML5 & CSS3 Flag
HTML5 & CSS3 Flag
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
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
 
CSS and image optimization
CSS and image optimizationCSS and image optimization
CSS and image optimization
 
Advanced Thesis Techniques and Tricks
Advanced Thesis Techniques and TricksAdvanced Thesis Techniques and Tricks
Advanced Thesis Techniques and Tricks
 
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)
 

Similar a Happy Browser, Happy User! - PerfMatters Conference 2019

Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 2019Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 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
 
Responsive content
Responsive contentResponsive content
Responsive contenthonzie
 
Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?glen_a_smith
 
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptHTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptraghavanp4
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Aaron Gustafson
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and RenderingStoyan Stefanov
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tipsChris Love
 
SINATRA + HAML + TWITTER
SINATRA + HAML + TWITTERSINATRA + HAML + TWITTER
SINATRA + HAML + TWITTERElber Ribeiro
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
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
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayTodd Anglin
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't CodeChristopher Schmitt
 

Similar a Happy Browser, Happy User! - PerfMatters Conference 2019 (20)

Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 2019Happy Browser, Happy User! WordSesh 2019
Happy Browser, Happy User! WordSesh 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]
 
Responsive content
Responsive contentResponsive content
Responsive content
 
[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design[O'Reilly] HTML5 Design
[O'Reilly] HTML5 Design
 
Does my DIV look big in this?
Does my DIV look big in this?Does my DIV look big in this?
Does my DIV look big in this?
 
HTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.pptHTML Web Devlopment presentation css.ppt
HTML Web Devlopment presentation css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
css.ppt
css.pptcss.ppt
css.ppt
 
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]Better Performance === Greater Accessibility [Inclusive Design 24 2018]
Better Performance === Greater Accessibility [Inclusive Design 24 2018]
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
 
SINATRA + HAML + TWITTER
SINATRA + HAML + TWITTERSINATRA + HAML + TWITTER
SINATRA + HAML + TWITTER
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
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
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
 
JavaScript For People Who Don't Code
JavaScript For People Who Don't CodeJavaScript For People Who Don't Code
JavaScript For People Who Don't Code
 
Css
CssCss
Css
 

Más 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
 

Más 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
 

Último

Call Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile serviceCall Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile servicerehmti665
 
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptxDecoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptxJoão Esperancinha
 
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETEINFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETEroselinkalist12
 
Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)
Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)
Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)dollysharma2066
 
Arduino_CSE ece ppt for working and principal of arduino.ppt
Arduino_CSE ece ppt for working and principal of arduino.pptArduino_CSE ece ppt for working and principal of arduino.ppt
Arduino_CSE ece ppt for working and principal of arduino.pptSAURABHKUMAR892774
 
Churning of Butter, Factors affecting .
Churning of Butter, Factors affecting .Churning of Butter, Factors affecting .
Churning of Butter, Factors affecting .Satyam Kumar
 
Call Girls Narol 7397865700 Independent Call Girls
Call Girls Narol 7397865700 Independent Call GirlsCall Girls Narol 7397865700 Independent Call Girls
Call Girls Narol 7397865700 Independent Call Girlsssuser7cb4ff
 
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...srsj9000
 
Oxy acetylene welding presentation note.
Oxy acetylene welding presentation note.Oxy acetylene welding presentation note.
Oxy acetylene welding presentation note.eptoze12
 
Application of Residue Theorem to evaluate real integrations.pptx
Application of Residue Theorem to evaluate real integrations.pptxApplication of Residue Theorem to evaluate real integrations.pptx
Application of Residue Theorem to evaluate real integrations.pptx959SahilShah
 
Work Experience-Dalton Park.pptxfvvvvvvv
Work Experience-Dalton Park.pptxfvvvvvvvWork Experience-Dalton Park.pptxfvvvvvvv
Work Experience-Dalton Park.pptxfvvvvvvvLewisJB
 
Concrete Mix Design - IS 10262-2019 - .pptx
Concrete Mix Design - IS 10262-2019 - .pptxConcrete Mix Design - IS 10262-2019 - .pptx
Concrete Mix Design - IS 10262-2019 - .pptxKartikeyaDwivedi3
 
IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024Mark Billinghurst
 
Past, Present and Future of Generative AI
Past, Present and Future of Generative AIPast, Present and Future of Generative AI
Past, Present and Future of Generative AIabhishek36461
 
computer application and construction management
computer application and construction managementcomputer application and construction management
computer application and construction managementMariconPadriquez1
 
An experimental study in using natural admixture as an alternative for chemic...
An experimental study in using natural admixture as an alternative for chemic...An experimental study in using natural admixture as an alternative for chemic...
An experimental study in using natural admixture as an alternative for chemic...Chandu841456
 
Why does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsync
Why does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsyncWhy does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsync
Why does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsyncssuser2ae721
 
Biology for Computer Engineers Course Handout.pptx
Biology for Computer Engineers Course Handout.pptxBiology for Computer Engineers Course Handout.pptx
Biology for Computer Engineers Course Handout.pptxDeepakSakkari2
 

Último (20)

Call Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile serviceCall Girls Delhi {Jodhpur} 9711199012 high profile service
Call Girls Delhi {Jodhpur} 9711199012 high profile service
 
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptxDecoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
Decoding Kotlin - Your guide to solving the mysterious in Kotlin.pptx
 
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETEINFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
INFLUENCE OF NANOSILICA ON THE PROPERTIES OF CONCRETE
 
Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)
Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)
Call Us ≽ 8377877756 ≼ Call Girls In Shastri Nagar (Delhi)
 
Arduino_CSE ece ppt for working and principal of arduino.ppt
Arduino_CSE ece ppt for working and principal of arduino.pptArduino_CSE ece ppt for working and principal of arduino.ppt
Arduino_CSE ece ppt for working and principal of arduino.ppt
 
Churning of Butter, Factors affecting .
Churning of Butter, Factors affecting .Churning of Butter, Factors affecting .
Churning of Butter, Factors affecting .
 
Call Girls Narol 7397865700 Independent Call Girls
Call Girls Narol 7397865700 Independent Call GirlsCall Girls Narol 7397865700 Independent Call Girls
Call Girls Narol 7397865700 Independent Call Girls
 
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
Gfe Mayur Vihar Call Girls Service WhatsApp -> 9999965857 Available 24x7 ^ De...
 
Oxy acetylene welding presentation note.
Oxy acetylene welding presentation note.Oxy acetylene welding presentation note.
Oxy acetylene welding presentation note.
 
Application of Residue Theorem to evaluate real integrations.pptx
Application of Residue Theorem to evaluate real integrations.pptxApplication of Residue Theorem to evaluate real integrations.pptx
Application of Residue Theorem to evaluate real integrations.pptx
 
Work Experience-Dalton Park.pptxfvvvvvvv
Work Experience-Dalton Park.pptxfvvvvvvvWork Experience-Dalton Park.pptxfvvvvvvv
Work Experience-Dalton Park.pptxfvvvvvvv
 
Concrete Mix Design - IS 10262-2019 - .pptx
Concrete Mix Design - IS 10262-2019 - .pptxConcrete Mix Design - IS 10262-2019 - .pptx
Concrete Mix Design - IS 10262-2019 - .pptx
 
IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024
 
Past, Present and Future of Generative AI
Past, Present and Future of Generative AIPast, Present and Future of Generative AI
Past, Present and Future of Generative AI
 
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptxExploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
Exploring_Network_Security_with_JA3_by_Rakesh Seal.pptx
 
computer application and construction management
computer application and construction managementcomputer application and construction management
computer application and construction management
 
An experimental study in using natural admixture as an alternative for chemic...
An experimental study in using natural admixture as an alternative for chemic...An experimental study in using natural admixture as an alternative for chemic...
An experimental study in using natural admixture as an alternative for chemic...
 
🔝9953056974🔝!!-YOUNG call girls in Rajendra Nagar Escort rvice Shot 2000 nigh...
🔝9953056974🔝!!-YOUNG call girls in Rajendra Nagar Escort rvice Shot 2000 nigh...🔝9953056974🔝!!-YOUNG call girls in Rajendra Nagar Escort rvice Shot 2000 nigh...
🔝9953056974🔝!!-YOUNG call girls in Rajendra Nagar Escort rvice Shot 2000 nigh...
 
Why does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsync
Why does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsyncWhy does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsync
Why does (not) Kafka need fsync: Eliminating tail latency spikes caused by fsync
 
Biology for Computer Engineers Course Handout.pptx
Biology for Computer Engineers Course Handout.pptxBiology for Computer Engineers Course Handout.pptx
Biology for Computer Engineers Course Handout.pptx
 

Happy Browser, Happy User! - PerfMatters Conference 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
 @ohshitgit bit.ly/ksm-dsh
  • 5. @ksylor HOW DO WE MAKE THE BROWSER HAPPY?
  • 6. @ksylor THE TROUBLE WITH BROWSERS TWO PROBLEMS: NETWORK LATENCY SINGLE THREAD**mostly
  • 7. @ksylor HOW DO BROWSERS WORK? 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
  • 8. @ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
  • 9. @ksylor GET IT OVER WITH! NAVIGATION GOAL:
  • 10. @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
  • 11. @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
  • 12. @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
  • 13. @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
  • 14. @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
  • 15. @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
  • 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 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
  • 17. @ksylor NAVIGATION HOW CAN WE CUT DOWN NAVIGATION TIME? ▸ HTTP/2 push ▸ Preloading & resource hints ▸ Reduce server response time ▸ Use a CDN ▸ Smaller files = fewer roundtrips ▸ First 14kb
  • 18. @ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
  • 19. @ksylor DOM + CSSOM, ASAP PARSING GOAL:
  • 20. @ksylor PARSING SUPER SIMPLE HTML <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>
  • 22. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM HTML html DOM NETWORK RESPONSE HTML Main Worker Network
 Process
  • 23. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - PRELOAD SCANNER HTML html DOM REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG Main Worker Network
 Process
  • 24. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM HTML html DOM head REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG Main Worker Network
 Process
  • 25. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM HTML html DOM head title REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG Main Worker Network
 Process
  • 26. @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
  • 27. @ksylor PARSING - HTML TO DOM HTML html DOM head link title <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS script REQUEST CAT.JPG Main Worker Network
 Process
  • 28. @ksylor PARSING - HTML TO DOM HTML html DOM head link title <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS script REQUEST CAT.JPG JAVASCRIPT IS RENDER BLOCKING* *when included without defer or async attributes Main Worker Network
 Process
  • 29. @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
  • 31. @ksylor PARSING- CSS TO CSSOM CSSOMCSS body font-family: sans-serif; body { 
 font-family: sans-serif; 
 }
 h1 { 
 color: magenta; 
 }
 .border { 
 border: 1px solid grey; 
 }
 .border img { 
 display: block; 
 margin: 1em; 
 }
 .title { 
 font-family: serif; 
 } Main Worker Network
 Process
  • 32. @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
  • 33. @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
  • 34. @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
  • 35. @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
  • 37. @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
  • 39. @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
  • 40. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program body: FunctionDeclaration id: body:
  • 41. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "badIdea" id: body: body:
  • 42. @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:
  • 43. @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:
  • 44. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration VariableDeclaration Identifier name: "badIdea" id: id: body: Identifier name: "cat" BlockStatement body: body: init:
  • 45. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" id: init: id: body: BlockStatement body: body: CallExpression callee: arguments:
  • 46. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" CallExpression id: init: id: body: BlockStatement body: body: callee: arguments: MemberExpression object: property:
  • 47. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" CallExpression id: init: id: body: BlockStatement body: body: MemberExpressioncallee: object: Identifier name: "document" property: arguments:
  • 48. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" CallExpression id: init: id: body: BlockStatement body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" arguments:
  • 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: "document" Identifier name: "badIdea" MemberExpression CallExpression id: init: callee: object: Identifier name: "getElementById" id: body: BlockStatement Literal value:"cat" arguments: body: body: property:
  • 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: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: ExpressionStatement AssignmentExpression operator: "=" left: right: expression:
  • 51. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" left: id: body: BlockStatement MemberExpression object: property: body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: right: expression:
  • 52. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" MemberExpressionleft: 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:
  • 53. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" MemberExpressionleft: Identifier name: "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:
  • 54. @ksylor PARSING- JAVASCRIPT TO ABSTRACT SYNTAX TREE (AST) ASTJS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); Main Program FunctionDeclaration Identifier name: "cat" VariableDeclaration Identifier name: "badIdea" ExpressionStatement CallExpression id: init: AssignmentExpression operator: "=" MemberExpressionleft: Identifier name: "document" Identifier name: "getElementById" object: property: right: id: body: BlockStatement Literal value:"another-cat.gif" body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: 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: "=" 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:
  • 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: Identifier name: "document" Identifier name: "getElementById" object: property: right: Literal value:"another-cat.gif" ExpressionStatement CallExpression callee: id: body: BlockStatement Identifier name: "badIdea" body: body: Identifier name: "document" MemberExpressioncallee: object: property: Identifier name: "getElementById" Literal value:"cat" arguments: expression:
  • 57. @ksylor PARSING - JAVASCRIPT INTERPRETATION & COMPILATION (VERY) SIMPLIFIED INTERPRETATION & COMPILATION PROCESS INTERPRETER OPTIMIZING COMPILER(S) BYTECODE OPTIMIZED CODE slower execution faster execution AST Main Worker Network
 Process
  • 58. @ksylor JAVASCRIPT EXECUTION JS function badIdea() {
 var cat =
 document.getElementById("cat");
 
 cat.src = "another-cat.gif";
 }
 
 badIdea(); html head link title script DOM ! Uncaught TypeError: 
 Cannot set property 'src' of null
 at badIdea (script.js:5) Main Worker Network
 Process
  • 60. @ksylor PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> REQUEST STYLE.CSS NETWORK RESPONSE HTML REQUEST SCRIPT.JS script REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 61. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 62. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK body script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 63. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK body h1 class:“title” Hi! script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 64. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK paragraph Here is a cat. body h1 class:“title” Hi! script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 65. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK paragraph Here is a cat. div class:”border” body h1 class:“title” Hi! script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 66. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK paragraph div class:”border” Here is a cat. body h1 class:“title” Hi! script REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS image id="cat" Main Worker Network
 Process
  • 67. @ksylor <html>
 <head>
 <title>Cats are fun!</title>
 <link href="style.css".../>
 <script src="script.js"></script>
 </head>
 <body>
 <h1 class="title">Hi!</h1>
 <p>Here is a cat.
 <div class="border">
 <img src="cat.gif" id="cat"
 alt="Cat!"/>
 </div>
 </body>
 </html> PARSING - HTML TO DOM (AGAIN) HTML html DOM head link title NETWORK paragraph div class:”border” Here is a cat. body h1 class:“title” Hi! script image id="cat" REQUEST STYLE.CSS RESPONSE HTML REQUEST SCRIPT.JS REQUEST CAT.JPG RESPONSE SCRIPT.JS RESPONSE STYLE.CSS Main Worker Network
 Process
  • 68. @ksylor HOW CAN WE MAKE THAT BETTER?
  • 69. @ksylor DOM + CSSOM, ASAP PARSING GOAL:
  • 70. @ksylor PARSING - TIMELINE CHECK HTML 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 &wait at <script> for
 CSSOM preload scanner
  • 71. @ksylor PARSING - TIMELINE IMPROVEMENTS MOVE STYLES INLINE Main Worker Network
 Process parse html parse css parse html DomContentLoaded <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 DomInteractive & preload scanner
  • 72. @ksylor PARSING - TIMELINE IMPROVEMENTS MOVE SCRIPTS INLINE & TO THE BOTTOM Main Worker Network
 Process 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
  • 73. @ksylor parse & execute js PARSING - TIMELINE IMPROVEMENTS ASYNC EXTERNAL JS Main Worker Network
 Process 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
  • 74. @ksylor parse & execute js PARSING - TIMELINE IMPROVEMENTS ASYNC EXTERNAL JS (BIGGER FILE/SLOWER NETWORK) Main Worker Network
 Process 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
  • 75. @ksylor parse & execute js PARSING - TIMELINE IMPROVEMENTS DEFER EXTERNAL JS Main Worker Network
 Process 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
  • 76. @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
  • 77. @ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction
  • 79. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 80. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 81. @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
  • 82. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 83. @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
  • 84. @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
  • 85. @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
  • 86. @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
  • 87. @ksylor root/html <body> font-family: sans-serif; <h1> color: magenta;
 font-family: serif; Hi! <p> font-family: sans-serif; <div> border: 1px solid gray; font-family: sans-serif; <img> display:block; margin: 1em; Here is a cat. COMPUTED STYLE RENDERING - LAYOUT html/viewport body h1 Hi! p Main Raster/
 Compositor Network
 Process
  • 88. @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
  • 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 h1 Hi! Here is a cat. p div Main Raster/
 Compositor Network
 Process
  • 90. @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
  • 91. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 92. @ksylor [ 
 [r, g, b, a],
 [r, g, b, a],
 [r, g, b, a], 
 ...
 ] RENDERING - PIXELS FRAME BUFFER
  • 93. @ksylor RENDERING - PIXELS FRAME BUFFER [ 
 [r, g, b, a],
 [r, g, b, a],
 [r, g, b, a], 
 ...
 ] } 2.7Mpixels - iPhone X
  • 94. @ksylor RENDERING - LAYERS 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
  • 95. @ksylor STYLE LAYOUT PAINT COMPOSITE THE RENDER PIPELINE
  • 96. @ksylor THE GPU OUR NEW COMPOSITING BFF
  • 97. @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 background_layer = [
 [ 33, 12, 42, 1 ],
 [ 0, 0, 50, .5 ],
 ...
 ];
  • 98. @ksylor Network
 Process RENDERING - COMPOSITE FINALLY! SOMETHING ON THE SCREEN! https://mindblowncat.com Hi! Here is a cat. Main Raster/
 Compositor
  • 99. @ksylor RENDERING - TIMELINE CHECK HTML Main Worker/GPU/
 Compositor Network
 Process parse html request css parse css parse html <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 preload scanner DCL FirstMeaningfulPaint style paint composite layout
  • 101. @ksylor STYLE LAYOUT PAINT COMPOSITE LET'S DO THAT AGAIN
  • 102. @ksylor RENDERING - REFLOW RE-LAYOUT Hi! Here is a cat. Hi! Here is a cat. img Main
  • 103. @ksylor RENDERING - REFLOW RE-PAINT Hi! Here is a cat. Raster/
 Compositor RASTERIZE
  • 105. @ksylor RENDERING - SLIGHTLY LESS REFLOW IMAGE DIMENSIONS <img src="cat.gif" id="cat" alt="Cat!" height="442" width="500"/>
 STYLE LAYOUT PAINT COMPOSITE
  • 106. @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)
  • 107. @ksylor HOW DO BROWSERS WORK? https://mindblowncat.com 4 PHASES ▸ Navigation ▸ Parsing ▸ Rendering ▸ Interaction Hi! Here is a cat.
  • 109. @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
  • 110. @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}
  • 111. @ksylor INTERACTION - ANIMATION HTML <button id="my-button"
 aria-controls="awesomeness">
 Click me!
 </button> <div class="dialog" 
 id="awesomeness"
 role="dialog"
 aria-hidden="true"
 aria-modal="false"
 aria-label="Awesomeness selector">
 <h1>Can you handle the awesome?</h1>
 <button>Yes</button> 
 <button>no</button>
 </div> .dialog[aria-hidden="true"] {
 display: none;
 } .dialog[aria-hidden="false"] {
 display: block;
 } CSS JS document.getElementById("my-button")
 .addEventListener("click",
 showDialog); function showDialog() {
 // ...get the dialog
 dialog.setAttribute("aria-hidden",
 "false");
 }
  • 112. @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
  • 113. @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.
  • 114. @ksylor INTERACTION - BETTER ANIMATION HTML <button id="my-button"
 aria-controls="awesomeness">
 Click me!
 </button> <div class="dialog" 
 id="awesomeness"
 role="dialog"
 aria-hidden="true"
 aria-modal="false"
 aria-label="Awesomeness selector">
 <h1>Can you handle the awesome?</h1>
 <button>Yes</button> 
 <button>no</button>
 </div> .dialog {
 transition: visibility 0ms linear 300ms;
 } .dialog[aria-hidden="true"] {
 visibility: hidden;
 } .dialog[aria-hidden="false"] {
 visibility: visible;
 } CSS JS document.getElementById("my-button")
 .addEventListener("click",
 showDialog); function showDialog() {
 // ...get the dialog
 dialog.setAttribute("aria-hidden",
 "false");
 }
  • 115. @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!
  • 116. @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 BE JANK FREE Hi! Here is a cat.