js lab`16. Владимир Воевидка: "Как работает браузер"
TRANSCRIPT
![Page 1: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/1.jpg)
HowBrowser Works?by Volodymyr Voyevidka, FrontEnd Developer
eleks.com
![Page 2: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/2.jpg)
Performance
![Page 3: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/3.jpg)
Quality
![Page 4: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/4.jpg)
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
4BROWSER
![Page 5: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/5.jpg)
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
BROWSER UI
![Page 6: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/6.jpg)
BROWSER UI
User Interface
![Page 7: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/7.jpg)
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
7BROWSER BROWSER ENGINE
![Page 8: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/8.jpg)
Browser Engine
BrowserEngine
BROWSER BROWSER ENGINE
![Page 9: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/9.jpg)
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
9BROWSER UI BACKEND
![Page 10: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/10.jpg)
UI Backend
BROWSER UI BACKEND
![Page 11: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/11.jpg)
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
11BROWSER DATA PERSISTENCE
![Page 12: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/12.jpg)
Data Persistence
• Local Storage• Cookies• IndexedDB
BROWSER DATA PERSISTENCE
![Page 13: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/13.jpg)
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
13BROWSER NETWORKING
![Page 14: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/14.jpg)
Networking
14BROWSER NETWORKING
![Page 15: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/15.jpg)
Concurrent Requests
15BROWSER CONCURRENT REQUESTSNETWORKING
![Page 16: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/16.jpg)
DNS Lookup
http://gov.ug http://www.president-office.gov.mm
BROWSER DNS LOOKUPNETWORKING
![Page 17: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/17.jpg)
17
![Page 18: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/18.jpg)
Resource Timing API
BROWSER RESOURCE TIMING APINETWORKING
![Page 19: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/19.jpg)
Latency matters
![Page 20: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/20.jpg)
20
amazon100ms = 1% of sales
1% = $889 900 000
![Page 21: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/21.jpg)
21
google500ms = 20% audience
![Page 22: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/22.jpg)
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
22BROWSER JS INTERPRETER
![Page 23: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/23.jpg)
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
23BROWSER WEB APIs
![Page 24: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/24.jpg)
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
![Page 25: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/25.jpg)
Event Loop / Task Queue
Philip Robertshttp://latentflip.com/loupe
Eventloop
Call stack
BROWSER WEB APIs EVENT LOOP
macro
micro
micro
micro
task queue
![Page 26: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/26.jpg)
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"
![Page 27: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/27.jpg)
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
![Page 28: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/28.jpg)
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTENCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
28BROWSER RENDERING ENGINE
![Page 29: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/29.jpg)
Main Flow
RESPONSE HTML HTML PARSEREQUEST URL
LAYOUT/REFLOW PAINT
RENDER TREE DOM TREE
BROWSER MAIN FLOWRENDERING ENGINE
![Page 30: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/30.jpg)
WebKit
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKitRENDERING ENGINE
![Page 31: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/31.jpg)
GECKO vs WebKit
BROWSER GECKO vs WebKitRENDERING ENGINE
![Page 32: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/32.jpg)
WebKit
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER HTML PARSERWebKitRENDERING ENGINE
![Page 33: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/33.jpg)
HTML ParserTokeniser
Lexical Analyzer(Flex => Bison)
Tree constructionSyntax analyser
DOM
ScriptExecution
document.write();document.appendChild();element.innerHTML
BROWSER HTML PARSERWebKitRENDERING ENGINE
![Page 34: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/34.jpg)
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
![Page 35: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/35.jpg)
Dealing with Resources
• Render blocking• Parser blocking• Non blocking
BROWSER HTML PARSERWebKit DEALING WITH RESOURCESRENDERING ENGINE
![Page 36: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/36.jpg)
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
![Page 37: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/37.jpg)
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
![Page 38: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/38.jpg)
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
![Page 39: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/39.jpg)
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
![Page 40: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/40.jpg)
WebKit
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKit DOMRENDERING ENGINE
![Page 41: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/41.jpg)
WebKit
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKit CSS PARSERRENDERING ENGINE
![Page 42: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/42.jpg)
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
![Page 43: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/43.jpg)
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
![Page 44: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/44.jpg)
#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
![Page 45: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/45.jpg)
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
![Page 46: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/46.jpg)
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
![Page 47: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/47.jpg)
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKit STYLE RULES
WebKit
RENDERING ENGINE
![Page 48: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/48.jpg)
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER RENDERING ENGIN WebKit ATTACHMENT
WebKit
RENDERING ENGINE
![Page 49: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/49.jpg)
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
![Page 50: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/50.jpg)
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKit RENDER TREE
WebKit
RENDERING ENGINE
![Page 51: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/51.jpg)
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKit RENDER TREE LAYOUT / REFLOW & PAINTING
WebKit
RENDERING ENGINE
![Page 52: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/52.jpg)
Layout / Reflowcalculating position and size of
renderers
Painting
BROWSER WebKit RENDER TREE LAYOUT / REFLOW & PAINTINGRENDERING ENGINE
![Page 53: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/53.jpg)
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
![Page 54: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/54.jpg)
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
![Page 55: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/55.jpg)
CSSCSS
HTML
CSS
HTMLParser
CSSParser
Attachment
Layout
PaintingRenderTree
DOMTree
StyleRules
Display
DOM
BROWSER WebKit DISPLAY
WebKit
RENDERING ENGINE
![Page 56: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/56.jpg)
USER INTERFACE
BROWSER ENGINE
RENDERING ENGINE
NETWORKING JavaScript INTERPRETER UI BACKEND
DATA PERSISTANCE
V8, SpiderMonkey
WebKit, Gecko, Blink, Trident
WEB APIs
56BROWSER RENDERING ENGINE
![Page 57: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/57.jpg)
57
Summary● Latency matters● Browser is not so simple● CSS selectors can be a tricky place● Resources amount matters● Every millisecond means a lot
![Page 58: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/58.jpg)
58
Questions & Answers
![Page 59: JS Lab`16. Владимир Воевидка: "Как работает браузер"](https://reader034.vdocuments.pub/reader034/viewer/2022050914/5881d6cc1a28ab331a8b6971/html5/thumbnails/59.jpg)
Inspired by Technology.Driven by Value.
Find us at eleks.com
Have a question? Write to [email protected]