1.
How
Browser Works?
by Volodymyr Voyevidka, FrontEnd Developer
eleks.com

2.
Performance

3.
Quality

4.
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JavaScript
INTERPRETER
UI BACKEND
DATAPERSISTENCE
V8, SpiderMonkey
WebKit, Gecko,
Blink, Trident
WEB APIs
4
BROWSER

5.
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JavaScript
INTERPRETER
UI BACKEND
DATAPERSISTENCE
V8, SpiderMonkey
WebKit, Gecko,
Blink, Trident
WEB APIs
BROWSER UI

6.
BROWSER UI
User Interface

7.
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JavaScript
INTERPRETER
UI BACKEND
DATAPERSISTENCE
V8, SpiderMonkey
WebKit, Gecko,
Blink, Trident
WEB APIs
7
BROWSER BROWSER ENGINE

8.
Browser Engine
Browser
Engine
BROWSER BROWSER ENGINE

9.
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JavaScript
INTERPRETER
UI BACKEND
DATAPERSISTENCE
V8, SpiderMonkey
WebKit, Gecko,
Blink, Trident
WEB APIs
9
BROWSER UI BACKEND

10.
UI Backend
BROWSER UI BACKEND

11.
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JavaScript
INTERPRETER
UI BACKEND
DATAPERSISTENCE
V8, SpiderMonkey
WebKit, Gecko,
Blink, Trident
WEB APIs
11
BROWSER DATA PERSISTENCE

12.
Data Persistence
• Local Storage
• Cookies
• IndexedDB
BROWSER DATA PERSISTENCE

13.
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JavaScript
INTERPRETER
UI BACKEND
DATAPERSISTENCE
V8, SpiderMonkey
WebKit, Gecko,
Blink, Trident
WEB APIs
13
BROWSER NETWORKING

14.
Networking
14BROWSER NETWORKING

15.
Concurrent Requests
15BROWSER CONCURRENT REQUESTSNETWORKING

16.
DNS Lookup
http://gov.ug http://www.president-office.gov.mm
BROWSER DNS LOOKUPNETWORKING

17.
17

18.
Resource Timing API
BROWSER RESOURCE TIMING APINETWORKING

19.
Latency matters

20.
100ms = 1% of sales
1% = $889 900 000
20
amazon

21.
100ms = 1% of sales
1% = $889 900 000
21

22.
22
google

23.
500ms = 20% audience
23

24.
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JavaScript
INTERPRETER
UI BACKEND
DATAPERSISTENCE
V8, SpiderMonkey
WebKit, Gecko,
Blink, Trident
WEB APIs
24
BROWSER JS INTERPRETER

25.
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JavaScript
INTERPRETER
UI BACKEND
DATAPERSISTENCE
V8, SpiderMonkey
WebKit, Gecko,
Blink, Trident
WEB APIs
25
BROWSER WEB APIs

26.
WEB APIs
Web Sockets
Messaging
WebRTC
Canvas
SVG
WebGL
File API
File System API
Indexed DB
DOM
Drag and Drop
Fullscreen
Animation
Timing
Media
Pointer Lock
Web Audio
Browser
Shadow DOM
Typed Arrays
Web Workers
CSS Object Model
Selectors
BROWSER WEB APIs

27.
Event Loop / Task Queue
Philip Roberts
http://latentflip.com/loupe
Event
loop
Call stack
BROWSER WEB APIs EVENT LOOP
macro
micro
micro
micro
task queue

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

29.
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);
click
promise
mutate
click
promise
mutate
timeout
timeout
click
mutate
click
mutate
timeout
promise
promise
timeout
click
mutate
click
mutate
promise
promise
timeout
timeout
click
click
mutate
timeout
promise
timeout
promise

30.
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JavaScript
INTERPRETER
UI BACKEND
DATAPERSISTENCE
V8, SpiderMonkey
WebKit, Gecko,
Blink, Trident
WEB APIs
30
BROWSER RENDERING ENGINE

31.
Main Flow
RESPONSE HTML HTML PARSEREQUEST URL
LAYOUT/REFLOW PAINT
RENDER TREE DOM TREE
BROWSER MAIN FLOWRENDERING ENGINE

32.
WebKit
DOM
BROWSER WebKitRENDERING ENGINE

33.
GECKO vs WebKit
BROWSER GECKO vs WebKitRENDERING ENGINE

34.
WebKit
DOM
BROWSER HTML PARSERWebKitRENDERING ENGINE

35.
HTML Parser
Tokeniser
Lexical Analyzer
(Flex => Bison)
Tree construction
Syntax analyser
DOM
Script
Execution
document.write();
document.appendChild();
element.innerHTML
BROWSER HTML PARSERWebKitRENDERING ENGINE

36.
Tokeniser
Lexical Analyzer
(Flex => Bison)
Tree construction
Syntax 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

37.
Dealing with Resources
• Render blocking
• Parser blocking
• Non blocking
BROWSER HTML PARSERWebKit DEALING WITH RESOURCESRENDERING ENGINE

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

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

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

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

42.
WebKit
DOM
BROWSER WebKit DOMRENDERING ENGINE

43.
WebKit
DOM
BROWSER WebKit CSS PARSERRENDERING ENGINE

44.
CSS Selectors Priority
div { 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

45.
CSS Selectors Priority
a b c d
inline 1 0 0 0
#id 0 1 0 0
.class, *, attrs 0 0 1 0
tags, pseudo-* 0 0 0 1
(a, b, c, d)
a - inline
b - #id
c - .class
d - 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

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

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

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

49.
DOM
BROWSER WebKit STYLE RULES
WebKit
RENDERING ENGINE

50.
DOM
BROWSER RENDERING ENGIN WebKit ATTACHMENT
WebKit
RENDERING ENGINE

51.
Attachment
CSSOMDOM
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

52.
DOM
BROWSER WebKit RENDER TREE
WebKit
RENDERING ENGINE

53.
DOM
BROWSER WebKit RENDER TREE LAYOUT / REFLOW & PAINTING
WebKit
RENDERING ENGINE

54.
Layout / Reflow
calculating position and size of renderers
Painting
BROWSER WebKit RENDER TREE LAYOUT / REFLOW & PAINTINGRENDERING ENGINE

55.
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 OPTIMIZATIONRENDERING ENGINE

56.
Layout / Reflow & Repaint optimization
BROWSER WebKit RENDER TREE LAYOUT / REFLOW & PAINTING OPTIMIZATION
<style>
div { /* … */ }
div.highlight { /* … */ }
</style>
<script>
document.getElementById('mainelement').classList.add('highlight');
</script>
RENDERING ENGINE

57.
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);
Layout / Reflow & Repaint optimization
BROWSER WebKit RENDER TREE LAYOUT / REFLOW & PAINTING OPTIMIZATIONRENDERING ENGINE

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

59.
DOM
BROWSER WebKit DISPLAY
WebKit
RENDERING ENGINE

60.
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING
JavaScript
INTERPRETER
UI BACKEND
DATAPERSISTANCE
V8, SpiderMonkey
WebKit, Gecko,
Blink, Trident
WEB APIs
60
BROWSER RENDERING ENGINE

61.
61
Summary
● Latency matters
● Browser is not so simple
● CSS selectors can be a tricky place
● Resources amount matters
● Every millisecond means a lot

62.
62
Questions & Answers

63.
Inspired by Technology.
Driven by Value.
Find us at eleks.com Have a question? Write to eleksinfo@eleks.com