js lab`16. Владимир Воевидка: "Как работает браузер"
TRANSCRIPT
HowBrowser Works?by Volodymyr Voyevidka, FrontEnd Developer
eleks.com
Performance
Quality
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
4BROWSER
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
BROWSER UI
BROWSER UI
User Interface
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
7BROWSER BROWSER ENGINE
Browser Engine
BrowserEngine
BROWSER BROWSER ENGINE
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
9BROWSER UI BACKEND
UI Backend
BROWSER UI BACKEND
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
11BROWSER DATA PERSISTENCE
Data Persistence
• Local Storage• Cookies• IndexedDB
BROWSER DATA PERSISTENCE
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
13BROWSER NETWORKING
Networking
14BROWSER NETWORKING
Concurrent Requests
15BROWSER CONCURRENT REQUESTSNETWORKING
DNS Lookup
http://gov.ug http://www.president-office.gov.mm
BROWSER DNS LOOKUPNETWORKING
17
Resource Timing API
BROWSER RESOURCE TIMING APINETWORKING
Latency matters
20
amazon100ms = 1% of sales
1% = $889 900 000
21
google500ms = 20% audience
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
22BROWSER JS INTERPRETER
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
23BROWSER WEB APIs
WEB APIs
Web SocketsMessagingWebRTC
CanvasSVGWebGL
File APIFile System APIIndexed DB
DOM
Drag and DropFullscreen
AnimationTimingMedia
Pointer LockWeb Audio
BrowserShadow DOMTyped ArraysWeb Workers
CSS Object ModelSelectors
BROWSER WEB APIs
Event Loop / Task Queue
Philip Robertshttp://latentflip.com/loupe
Eventloop
Call stack
BROWSER WEB APIs EVENT LOOP
macro
micro
micro
micro
task queue
26
console.log('script start');
setTimeout(function() { console.log('setTimeout');}, 0);
Promise.resolve().then(function() { console.log('promise1');}).then(function() { console.log('promise2');});
console.log('script end');
Event Loop / Task Queue Example
BROWSER WEB APIs EVENT LOOP
"script start""script end""promise1""promise2""setTimeout"
Event Loop / Task Queue Example
BROWSER WEB APIs EVENT LOOP
var outer = document.querySelector('.outer');var inner = document.querySelector('.inner');
new MutationObserver(function() { console.log('mutate');}).observe(outer, { attributes: true});
function onClick() { console.log('click');
setTimeout(function() { console.log('timeout'); }, 0);
Promise.resolve().then(function() { console.log('promise'); });
outer.setAttribute('data-random', Math.random());}inner.addEventListener('click', onClick);outer.addEventListener('click', onClick);
clickpromisemutateclickpromisemutatetimeouttimeout
clickmutateclickmutatetimeoutpromisepromisetimeout
clickmutateclickmutatepromisepromisetimeouttimeout
clickclickmutatetimeoutpromisetimeoutpromise
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
28BROWSER RENDERING ENGINE
Main Flow
RESPONSE HTML HTML PARSEREQUEST URL
LAYOUT/REFLOW PAINT
RENDER TREE DOM TREE
BROWSER MAIN FLOWRENDERING ENGINE
WebKit
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKitRENDERING ENGINE
GECKO vs WebKit
BROWSER GECKO vs WebKitRENDERING ENGINE
WebKit
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER HTML PARSERWebKitRENDERING ENGINE
HTML ParserTokeniser
Lexical Analyzer(Flex => Bison)
Tree constructionSyntax analyser
DOM
ScriptExecution
document.write();document.appendChild();element.innerHTML
BROWSER HTML PARSERWebKitRENDERING ENGINE
TokeniserLexical Analyzer(Flex => Bison)
Tree constructionSyntax analyser
<p> I <span
>ma i n p
I ma i n s p a
</span> </p>
DOM
html
head body
p
span
I am in span
n
linkmeta
I am in p
div
img
<p> I am in p <span> I am in span </span></p>
BROWSER HTML PARSERWebKit EXAMPLERENDERING ENGINE
Dealing with Resources
• Render blocking• Parser blocking• Non blocking
BROWSER HTML PARSERWebKit DEALING WITH RESOURCESRENDERING ENGINE
No Resource<html> <head> <title>Critical Path: No Style</title> </head> <body> <p>Hello World</p> </body></html>
BROWSER HTML PARSERWebKit DEALING WITH RESOURCES NO RESOURCESRENDERING ENGINE
Render Blocking Resource<html> <head> <link href="style.css" rel="stylesheet"> </head> <body> <p>Hello World</p> </body></html>
BROWSER HTML PARSERWebKit DEALING WITH RESOURCES RENDER BLOCKIGNRENDERING ENGINE
Render and Parser Blocking Resource
<html> <head> <link href="style.css" rel="stylesheet"> </head> <body> <p>Hello World</p> <script src="app.js"></script> </body></html>
BROWSER HTML PARSERWebKit DEALING WITH RESOURCES RENDER AND PARSER BLOCKIGNRENDERING ENGINE
Non Blocking Resource<html> <head> <link href="style.css" rel="stylesheet" media="print"> </head> <body> <p>Hello World</p> <script src="app.js" async></script> </body></html>
BROWSER HTML PARSERWebKit DEALING WITH RESOURCES NON BLOCKIGNRENDERING ENGINE
WebKit
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKit DOMRENDERING ENGINE
WebKit
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKit CSS PARSERRENDERING ENGINE
CSS Selectors Prioritydiv { background-color: pink; height: 100px; }
body.home > section.wrapper > div.container { background-color: red; height: 100px; }
#container { background-color: blue; height: 100px; }
.container { background-color: yellow; height: 100px; }<!DOCTYPE html><html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body class="home"> <section class=“wrapper"> <div class="container" id=“container"></div> </section> </body></html>
BROWSER WebKit CSS PRIORITY EXAMPLERENDERING ENGINE
CSS Selectors Prioritya b c d
inline 1 0 0 0#id 0 1 0 0
.class, *, attrs 0 0 1 0tags, pseudo-* 0 0 0 1
(a, b, c, d)a - inlineb - #idc - .classd - tag
highest priority
lowest priority
…
div { /* ... */ }/* a=0, b=0, c=0, d=1 */
body.home > section.wrapper > div.container { /* ... */ } /* a=0, b=0, c=3, d=3 */
#container { /*...*/ } /* a=0, b=1, c=0, d=0 */
.container { /* ... */ } /* a=0, b=0, c=1, d=0 */
#top-navigation 0 1 0 0
body.home > section.top-navifation > div.container
0 0 3 3
.container 0 0 1 0
div 0 0 0 1
BROWSER WebKit CSS PRIORITYRENDERING ENGINE
#main-navigation { } /* ID (Fastest) */ body.home #wrapper { } /* ID */
.main-navigation { } /* Class */ul li a.current { } /* Class */
ul { } /* Tag */ul li a { } /* Tag */
* { } /* Universal (Slowest) */#content [title='home'] /* Universal */
ID selectors
main-navigation { }
wrapper { }Class selectors
main-navigation { }
current { }Tag selectors
ul { }
a { }Universal selectors
* { }
[title='home'] { }
BROWSER WebKit CSS PERFORMANCE
CSS Selectors Performance
RENDERING ENGINE
Chrome Firefox 29 Opera 19 IE9 Android 4
Data attribute 56.8 125.4 63.6 152.6 1455.2
Data attribute (qualified) 55.4 128.4 61.4 141 1404.6
Data attribute (unqualified but with value) 55 125.6 61.8 152.4 1363.4
Data attribute (qualified with value) 54.8 129 63.2 147.4 1421.2
Multiple data attributes (qualified with values) 55.4 124.4 63.2 147.4 1411.2
Solo pseudo selector (e.g. :after) 60.6 138 58.4 162 1500.4
Combined classes (e.g. class1.class2) 51.2 126.6 56.8 147.8 1453.8
Multiple classes 48.8 127.4 56.2 150.2 1398.8
Multiple classes with child selector 48.8 127.4 55.8 154.6 1348.4
Partial attribute matching (e.g. [class^=“wrap”]) 52.2 129.4 58 172 1420.2
nth-child selector 49 127.4 56.6 148.4 1352
nth-child selector followed by another nth-child selector 50.6 127.2 58.4 146.2 1377.6
Insanity selection (all selections qualified, every class used) 64.6 129.2 72.4 152.8 1461.2
Slight insanity selection (e.g. .tagLi .tagB a.TagA.link) 50.2 129.8 54.8 154.6 1381.2
Universal selector 50 126.2 56.8 154.8 1351.6
Element single 49.2 127.6 56 149.2 1379.2
Element double 50.4 132.4 55 157.6 1386
Element treble 49.2 128.8 58.6 154.2 1380.6
Element treble with pseudo 48.6 132.4 54.8 148.4 1349.6
Single class 50.4 128 55 149.8 1393.8
Biggest Diff 16 13.6 17.6 31 152
Biggest Diff 13 6 13 10 6
body
p imgspan
span
body { font-size: 16px; }p { font-weight: bold; }span { color: red; }p span { display: none; }img { float: right; }
font-size: 16px;
font-size: 16px;float: right;
font-size: 16px;font-weight: bold;
font-size: 16px;font-weight: bold;
display: none;
font-size: 16px;color: red;
BROWSER WebKit CSS OBJECT MODEL
CSS Object Model
RENDERING ENGINE
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKit STYLE RULES
WebKit
RENDERING ENGINE
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER RENDERING ENGIN WebKit ATTACHMENT
WebKit
RENDERING ENGINE
AttachmentCSSOMDOM
BODY
p
I am in p
div
img
font-size: 16px;
font-size: 16px;float: right;
font-size: 16px;font-weight: bold;
BROWSER WebKit ATTACHMENTRENDERING ENGINE
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKit RENDER TREE
WebKit
RENDERING ENGINE
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKit RENDER TREE LAYOUT / REFLOW & PAINTING
WebKit
RENDERING ENGINE
Layout / Reflowcalculating position and size of
renderers
Painting
BROWSER WebKit RENDER TREE LAYOUT / REFLOW & PAINTINGRENDERING ENGINE
var textlist = [1,2,3,4,5,6,7,8,9], elem;
for(var i = 0; i < textlist.length; i++) { elem = document.getElementById('item-'+ textlist[i]); elem.style.background = '#333'; elem.style.color = '#fff'; elem.style.border = '1px solid #00f'; elem.style.width = '300px';}
Layout / Reflow & Repaint optimization
var toChange = document.getElementById('mainelement');toChange.style.background = '#333';toChange.style.color = '#fff';toChange.style.border = '1px solid #00f';toChange.style.width = '300px';
BROWSER WebKit RENDER TREE LAYOUT / REFLOW & PAINTING OPTIMIZATION
<style> div { /* … */ } div.highlight { /* … */ }</style><script> document.getElementById('mainelement').classList.add('highlight');</script>
var textlist = [1,2,3,4,5,6,7,8,9], docFragm, elem, contents;
docFragm = document.createDocumentFragment();
for(var i = 0; i < textlist.length; i++) { elem = document.createElement('p'); contents = document.createTextNode(textlist[i]); elem.appendChild(contents); docFragm.appendChild(elem);}
document.body.appendChild(docFragm);
RENDERING ENGINE
elem = document.getElementById('content');
elem.offsetWidth;elem.clientTop;elem.getClientRects();elem.focus();
window.getComputedStyle();window.scrollX
BROWSER WebKit RENDER TREE LAYOUT / REFLOW TRIGGER
Layout / Reflow Trigger
RENDERING ENGINE
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKit DISPLAY
WebKit
RENDERING ENGINE
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTANCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
56BROWSER RENDERING ENGINE
57
Summary● Latency matters● Browser is not so simple● CSS selectors can be a tricky place● Resources amount matters● Every millisecond means a lot
58
Questions & Answers
Inspired by Technology.Driven by Value.
Find us at eleks.com
Have a question? Write to [email protected]