How Browser Works?

HowBrowser Works?by Volodymyr Voyevidka, FrontEnd Developer

eleks.com

Denys Skrypnyk

Додай ще місц для підпису Презентера.

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


DATA PERSISTENCE

V8, SpiderMonkey


WEB APIs

BROWSER UI

BROWSER UI

User Interface

USER INTERFACE

BROWSER ENGINE

RENDERING ENGINE


DATA PERSISTENCE

V8, SpiderMonkey


WEB APIs

7BROWSER BROWSER ENGINE

Browser Engine

BrowserEngine

BROWSER BROWSER ENGINE

USER INTERFACE

BROWSER ENGINE

RENDERING ENGINE


DATA PERSISTENCE

V8, SpiderMonkey


WEB APIs

9BROWSER UI BACKEND

UI Backend

BROWSER UI BACKEND

USER INTERFACE

BROWSER ENGINE

RENDERING ENGINE


DATA PERSISTENCE

V8, SpiderMonkey


WEB APIs

11BROWSER DATA PERSISTENCE

Data Persistence

• Local Storage• Cookies• IndexedDB

BROWSER DATA PERSISTENCE

USER INTERFACE

BROWSER ENGINE

RENDERING ENGINE


DATA PERSISTENCE

V8, SpiderMonkey


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

Resource Timing API

BROWSER RESOURCE TIMING APINETWORKING

Latency matters

100ms = 1% of sales

1% = $889 900 000

20

amazon

100ms = 1% of sales

1% = $889 900 000

21

22

google

500ms = 20% audience

23

USER INTERFACE

BROWSER ENGINE

RENDERING ENGINE


DATA PERSISTENCE

V8, SpiderMonkey


WEB APIs

24BROWSER JS INTERPRETER

USER INTERFACE

BROWSER ENGINE

RENDERING ENGINE


DATA PERSISTENCE

V8, SpiderMonkey


WEB APIs

25BROWSER 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

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


"script start""script end""promise1""promise2""setTimeout"

Event Loop / Task Queue Example


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


DATA PERSISTENCE

V8, SpiderMonkey


WEB APIs

30BROWSER 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;


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;


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


BROWSER WebKit RENDER TREE LAYOUT / REFLOW & PAINTING OPTIMIZATION

<style> div { /* … */ } div.highlight { /* … */ }</style><script> document.getElementById('mainelement').classList.add('highlight');</script>

RENDERING ENGINE

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);


BROWSER WebKit RENDER TREE LAYOUT / REFLOW & PAINTING OPTIMIZATIONRENDERING 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


DATA PERSISTANCE

V8, SpiderMonkey


WEB APIs

60BROWSER RENDERING ENGINE

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

Questions & Answers

Inspired by Technology.Driven by Value.

Find us at eleks.com

Have a question? Write to [email protected]

How Browser Works?

Software

Transcript of How Browser Works?