Successfully reported this slideshow.

How Browser Works?

4

Share

Loading in …3
×
1 of 63
1 of 63

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

How Browser Works?

  1. 1. How Browser Works? by Volodymyr Voyevidka, FrontEnd Developer eleks.com
  2. 2. Performance
  3. 3. Quality
  4. 4. USER INTERFACE BROWSER ENGINE RENDERING ENGINE NETWORKING JavaScript INTERPRETER UI BACKEND DATAPERSISTENCE V8, SpiderMonkey WebKit, Gecko, Blink, Trident WEB APIs 4 BROWSER
  5. 5. USER INTERFACE BROWSER ENGINE RENDERING ENGINE NETWORKING JavaScript INTERPRETER UI BACKEND DATAPERSISTENCE V8, SpiderMonkey WebKit, Gecko, Blink, Trident WEB APIs BROWSER UI
  6. 6. BROWSER UI User Interface
  7. 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. 8. Browser Engine Browser Engine BROWSER BROWSER ENGINE
  9. 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. 10. UI Backend BROWSER UI BACKEND
  11. 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. 12. Data Persistence • Local Storage • Cookies • IndexedDB BROWSER DATA PERSISTENCE
  13. 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. 14. Networking 14BROWSER NETWORKING
  15. 15. Concurrent Requests 15BROWSER CONCURRENT REQUESTSNETWORKING
  16. 16. DNS Lookup http://gov.ug http://www.president-office.gov.mm BROWSER DNS LOOKUPNETWORKING
  17. 17. 17
  18. 18. Resource Timing API BROWSER RESOURCE TIMING APINETWORKING
  19. 19. Latency matters
  20. 20. 100ms = 1% of sales 1% = $889 900 000 20 amazon
  21. 21. 100ms = 1% of sales 1% = $889 900 000 21
  22. 22. 22 google
  23. 23. 500ms = 20% audience 23
  24. 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. 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. 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. 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. 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. 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. 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. 31. Main Flow RESPONSE HTML HTML PARSEREQUEST URL LAYOUT/REFLOW PAINT RENDER TREE DOM TREE BROWSER MAIN FLOWRENDERING ENGINE
  32. 32. WebKit DOM BROWSER WebKitRENDERING ENGINE
  33. 33. GECKO vs WebKit BROWSER GECKO vs WebKitRENDERING ENGINE
  34. 34. WebKit DOM BROWSER HTML PARSERWebKitRENDERING ENGINE
  35. 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. 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. 37. Dealing with Resources • Render blocking • Parser blocking • Non blocking BROWSER HTML PARSERWebKit DEALING WITH RESOURCESRENDERING ENGINE
  38. 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. 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. 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. 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. 42. WebKit DOM BROWSER WebKit DOMRENDERING ENGINE
  43. 43. WebKit DOM BROWSER WebKit CSS PARSERRENDERING ENGINE
  44. 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. 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. 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. 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. 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. 49. DOM BROWSER WebKit STYLE RULES WebKit RENDERING ENGINE
  50. 50. DOM BROWSER RENDERING ENGIN WebKit ATTACHMENT WebKit RENDERING ENGINE
  51. 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. 52. DOM BROWSER WebKit RENDER TREE WebKit RENDERING ENGINE
  53. 53. DOM BROWSER WebKit RENDER TREE LAYOUT / REFLOW & PAINTING WebKit RENDERING ENGINE
  54. 54. Layout / Reflow calculating position and size of renderers Painting BROWSER WebKit RENDER TREE LAYOUT / REFLOW & PAINTINGRENDERING ENGINE
  55. 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. 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. 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. 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. 59. DOM BROWSER WebKit DISPLAY WebKit RENDERING ENGINE
  60. 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. 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. 62 Questions & Answers
  63. 63. Inspired by Technology. Driven by Value. Find us at eleks.com Have a question? Write to eleksinfo@eleks.com

Editor's Notes

  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Oleksandr Vasyliev
  • Oleksandr Vasyliev
  • Oleksandr Vasyliev
  • Oleksandr Vasyliev
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Oleksandr Vasyliev

  • Oleksandr Vasyliev
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Oleksandr Vasyliev
  • Volodymyr Voyevidka
  • Volodymyr Voyevidka
  • Oleksandr Vasyliev
  • Volodymyr Voyevidka
  • ×