How browser engines work?

11,469 views

Published on

Published in: Technology, News & Politics
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,469
On SlideShare
0
From Embeds
0
Number of Embeds
3,293
Actions
Shares
0
Downloads
203
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide
  • \n
  • So as you may have already notice, I’m French so I apologize for my weird accent.\n
  • The good news is, you can see the french version of this talk. I gave it at ParisWeb last year and I recommend anyone to attend this year.\n
  • This is only an introduction so I might take shortcuts. If you are a Gecko developer and you think I said something stupid, please come talk to me afterwards.\n
  • \n
  • \n
  • I’ve compiled a list of all the stuff I’ve read to prepare this. I highly recommend to read and watch those.\n
  • Not Google Chrome.\nInterface = Chrome, we won’t talk about it today\n
  • \n
  • \n
  • And I’m missing some\n
  • And I’m missing some\n
  • And I’m missing some\n
  • And I’m missing some\n
  • And I’m missing some\n
  • And I’m missing some\n
  • And I’m missing some\n
  • And I’m missing some\n
  • And I’m missing some\n
  • And I’m missing some\n
  • And I’m missing some\n
  • And I’m missing some\n
  • And I’m missing some\n
  • And I’m missing some\n
  • And I’m missing some\n
  • We’re gonna focus on Gecko and WebKit. They are open source so there is more litterature available.\nBut most of the principles apply to any engine. And interoperability make some of the algorithms mandatory.\n
  • We’re gonna focus on Gecko and WebKit. They are open source so there is more litterature available.\nBut most of the principles apply to any engine. And interoperability make some of the algorithms mandatory.\n
  • We’re gonna go from the moment we enter a new address to the moment when the page is displayed.\nFirst, the static case (no JS)\n
  • bip\nThis content-type will trigger the XML Mode.\nNot used a lot because\nbip\nDraconian error handling, a mistake can trigger this screen\nbip\nbut also because of no IE support before version 9\n
  • bip\nThis content-type will trigger the XML Mode.\nNot used a lot because\nbip\nDraconian error handling, a mistake can trigger this screen\nbip\nbut also because of no IE support before version 9\n
  • bip\nThis content-type will trigger the XML Mode.\nNot used a lot because\nbip\nDraconian error handling, a mistake can trigger this screen\nbip\nbut also because of no IE support before version 9\n
  • bip\nThis content-type will trigger the XML Mode.\nNot used a lot because\nbip\nDraconian error handling, a mistake can trigger this screen\nbip\nbut also because of no IE support before version 9\n
  • bip\nThis content-type will trigger the XML Mode.\nNot used a lot because\nbip\nDraconian error handling, a mistake can trigger this screen\nbip\nbut also because of no IE support before version 9\n
  • bip\nThis content-type will trigger the XML Mode.\nNot used a lot because\nbip\nDraconian error handling, a mistake can trigger this screen\nbip\nbut also because of no IE support before version 9\n
  • bip\nThis content-type will trigger the XML Mode.\nNot used a lot because\nbip\nDraconian error handling, a mistake can trigger this screen\nbip\nbut also because of no IE support before version 9\n
  • bip\nThis content-type will trigger the XML Mode.\nNot used a lot because\nbip\nDraconian error handling, a mistake can trigger this screen\nbip\nbut also because of no IE support before version 9\n
  • bip\nThis content-type will trigger the XML Mode.\nNot used a lot because\nbip\nDraconian error handling, a mistake can trigger this screen\nbip\nbut also because of no IE support before version 9\n
  • Let’s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat’s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
  • Let’s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat’s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
  • Let’s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat’s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
  • Let’s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat’s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
  • Let’s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat’s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
  • Let’s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat’s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
  • Let’s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat’s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
  • Let’s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat’s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
  • Let’s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat’s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
  • Let’s add a doctype\nbip\nThat will trigger the standards mode. That’s where you want to be.\nQuick note about what we call the “HTML5 doctype”: it works everywhere because it was reverse engineered. “What’s the shortest doctype that triggers standards mode”\n
  • We’ve never mentioned versions of the specs. That’s because browser engines don’t care about them. bip\nThe important thing is do they understand it or not.\n
  • We receive the HTML. As it is received, the parser will construct a tree representing this HTML. bip\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • This is the DOM. Document Object Model.\nThis is the tree that we manipulate through JS or what we see in the devtools like Firebug, WebKit inspector, Dragonfly.\n\nOne of the great efforts of HTML5 is to explain exactly how this process works.\n
  • Actually, it looks like this. Those are empty text nodes.\n\nBut they are not important for the rest of the talk. bip\n
  • so let’s remove them\n
  • As it reads the HTML, the engine will try to fetch other resources\nbip bip bip\n
  • As it reads the HTML, the engine will try to fetch other resources\nbip bip bip\n
  • As it reads the HTML, the engine will try to fetch other resources\nbip bip bip\n
  • As it reads the HTML, the engine will try to fetch other resources\nbip bip bip\n
  • As it reads the HTML, the engine will try to fetch other resources\nbip bip bip\n
  • As it reads the HTML, the engine will try to fetch other resources\nbip bip bip\n
  • When it reads the CSS, first the engine will try to triage them into buckets\nWe only look at the rightmost part of the selector\n
  • When it reads the CSS, first the engine will try to triage them into buckets\nWe only look at the rightmost part of the selector\n
  • When it reads the CSS, first the engine will try to triage them into buckets\nWe only look at the rightmost part of the selector\n
  • When it reads the CSS, first the engine will try to triage them into buckets\nWe only look at the rightmost part of the selector\n
  • When it reads the CSS, first the engine will try to triage them into buckets\nWe only look at the rightmost part of the selector\n
  • When it reads the CSS, first the engine will try to triage them into buckets\nWe only look at the rightmost part of the selector\n
  • When it reads the CSS, first the engine will try to triage them into buckets\nWe only look at the rightmost part of the selector\n
  • When it reads the CSS, first the engine will try to triage them into buckets\nWe only look at the rightmost part of the selector\n
  • When it reads the CSS, first the engine will try to triage them into buckets\nWe only look at the rightmost part of the selector\n
  • When it reads the CSS, first the engine will try to triage them into buckets\nWe only look at the rightmost part of the selector\n
  • When it reads the CSS, first the engine will try to triage them into buckets\nWe only look at the rightmost part of the selector\n
  • When it reads the CSS, first the engine will try to triage them into buckets\nWe only look at the rightmost part of the selector\n
  • When it reads the CSS, first the engine will try to triage them into buckets\nWe only look at the rightmost part of the selector\n
  • We have this DOM tree and we know have those style rules into buckets.\n\nTime to put them together\n
  • The matching part is not like JS libs. We start from the DOM tree and find matching selectors.\n\nTODO\n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • We have the list of rules that apply for every DOM node, now let’s compute the frames. \n
  • \n
  • With the frame styles, we compute the dimensions and positions of all elements. It depends on stuff like width, margins but also font size, how the text is rendered, etc. That’s called a reflow or layout.\n\nWe’re gonna see one example of this. It’s a special build of Gecko done by a Japanese student I think, a few years back. It will only render the size of the elements as they are computed. It’s a very recognizable website, You can try to guess.\nbip\n\nAlso, see how it’s doing the layout a second time? Anyone has a guess why it happens?\n\nThis is because the page does not fit in one screen so it has to add a scrollbar and then recompute with a smaller viewport width\n
  • \n
  • \n
  • \n
  • \nExemple avec position: fixed\n
  • \nExemple avec position: fixed\n
  • \nExemple avec position: fixed\n
  • With JavaScript, we cannot construct the DOM tree. That’s because of document.write that could modify the rest of the document.\nBrowsers now read the rest of the document to start downloads.\nYou can tell the browser to continue parsing by using defer or async attribute\n
  • DOM is an API. Think about the difference in performance between PHP code and a MySQL query.\nYou should touch the DOM as little as possible.\nIf you need to touch the DOM, you should do all the reads at once and them all the writes.\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • How browser engines work?

    1. 1. HOW BROWSER ENGINES WORK? Anthony Ricaud, @rik24d
    2. 2. PARDON MY FRENCHhttp://www.flickr.com/photos/nitot/6537065859/
    3. 3. PARDON MY FRENCH- http://www.paris-web.fr/2011/conferences/ un-navigateur-comment-ca-marche.php
    4. 4. THIS IS ONLY AN INTRODUCTION
    5. 5. WHO ?- Web developer at Mozilla but- 2 patches in Firefox- 23 in WebKit
    6. 6. STANDING ON THE SHOULDERS OF GIANTS - Robert O’Callahan, Boris Zbarsky, David Baron (Mozilla) - Dave Hyatt, Simon Fraser (Apple) - Paul Irish, Alex Russell, Tony Gentilcore, (Google) - Anne Van Kersteren (Opera) - Nicholas Zakas (ex-Yahoo), Eric Law (Microsoft)
    7. 7. STANDING ON THE SHOULDERS OF GIANTS - List of documents to prepare this talk - http://ricaud.me/nav-marche
    8. 8. CHROME
    9. 9. CONTENT
    10. 10. IT’S COMPLEX
    11. 11. IT’S COMPLEX Accessibility Cache system JS Engine stack Network Font URL parser Cookies stack rendering DOMDatabases Bindings Image Downloading decoding Scrolling Native themes Plugins Painting
    12. 12. PRESTO GECKO WEBKIT TRIDENT
    13. 13. PRESTO GECKO WEBKIT TRIDENT
    14. 14. NEW REQUEST- Parse the URL : protocol, domain- DNS request www.mozilla.org -> 63.245.208.161- Open TCP connection, send HTTP request
    15. 15. SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xml
    16. 16. SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xml XML MODE
    17. 17. SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xml XML MODE
    18. 18. SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xml XML MODE
    19. 19. SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html>
    20. 20. SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html> QUIRKS MODE
    21. 21. SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html> QUIRKS MODE
    22. 22. SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html> QUIRKS MODE
    23. 23. SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html><!doctype html><html>
    24. 24. SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html><!doctype html><html> STANDARDS MODE
    25. 25. HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5
    26. 26. HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5 THEY DON’T CARE
    27. 27. <!doctype html><html> <head> <title>KISS</title> </head> <body> <div> <h1>BISOUS</h1> <p>Bonnes Idées Simples OuUltra Sensées.</p> </div> </body></html>
    28. 28. HTMLHEAD BODYTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
    29. 29. HTMLHEAD BODY DOM TREETITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
    30. 30. HTMLHEAD BODYTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
    31. 31. HTMLHEAD BODYTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
    32. 32. SUB-RESOURCES
    33. 33. SUB-RESOURCES- Image
    34. 34. SUB-RESOURCES- Image - Launch a download, non-blocking
    35. 35. SUB-RESOURCES- Image - Launch a download, non-blocking - Runs an image decoder
    36. 36. SUB-RESOURCES- Image - Launch a download, non-blocking - Runs an image decoder- CSS
    37. 37. SUB-RESOURCES- Image - Launch a download, non-blocking - Runs an image decoder- CSS - Launch a download, non-blocking
    38. 38. SUB-RESOURCES- Image - Launch a download, non-blocking - Runs an image decoder- CSS - Launch a download, non-blocking - Then it gets interesting…
    39. 39. CSS BUCKETSID CLASS TAGNAME OTHERS
    40. 40. CSS BUCKETS divID CLASS TAGNAME OTHERS
    41. 41. CSS BUCKETS divID CLASS TAGNAME OTHERS
    42. 42. CSS BUCKETS .item divID CLASS TAGNAME OTHERS
    43. 43. CSS BUCKETS .item divID CLASS TAGNAME OTHERS
    44. 44. CSS BUCKETS #sidebar .item divID CLASS TAGNAME OTHERS
    45. 45. CSS BUCKETS#sidebar .item div ID CLASS TAGNAME OTHERS
    46. 46. CSS BUCKETS div#sidebar#sidebar .item div ID CLASS TAGNAME OTHERS
    47. 47. CSS BUCKETSdiv#sidebar#sidebar .item div ID CLASS TAGNAME OTHERS
    48. 48. CSS BUCKETS div pdiv#sidebar#sidebar .item div ID CLASS TAGNAME OTHERS
    49. 49. CSS BUCKETSdiv#sidebar div p#sidebar .item div ID CLASS TAGNAME OTHERS
    50. 50. CSS BUCKETS :visiteddiv#sidebar div p#sidebar .item div ID CLASS TAGNAME OTHERS
    51. 51. CSS BUCKETSdiv#sidebar div p#sidebar .item div :visited ID CLASS TAGNAME OTHERS
    52. 52. DOM TREE + PARSING CSS DOMHTML Tree StyleCSS Rules
    53. 53. CSS MATCHING div BODY .item #sidebar DIV div#sidebar div p DIV ul p id="sidebar" ul > p DIV DIV DIV body > div pclass="item" class="item" class="item" #sidebar p P P P
    54. 54. RENDER TREE HTMLHEAD BODYTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU
    55. 55. RENDER TREE Viewport HTML ScrollHEAD BODY Block BlockTITLE DIV Block Block BlockKISS H1 P Text Text BONNES IDÉES BISOUS SIMPLES OU
    56. 56. DOM TREE + RENDER TREE DOMHTML Tree Render Tree StyleCSS Rules
    57. 57. A REFLOW OR LAYOUT
    58. 58. A REFLOW OR LAYOUT
    59. 59. DOMHTML Tree Render Layout Tree StyleCSS Rules
    60. 60. AND PAINTING DOMHTML Tree Render Layout Painting Tree StyleCSS Rules
    61. 61. PAINT ?
    62. 62. PAINT ?- Used to be the CPU drawing everything
    63. 63. PAINT ?- Used to be the CPU drawing everything- We’re giving more and more stuff to the GPU
    64. 64. PAINT ?- Used to be the CPU drawing everything- We’re giving more and more stuff to the GPU- Hardware acceleration
    65. 65. SUB-RESOURCES- Image - Launch a download, non-blocking - Runs an image decoder- CSS - Launch a download, non-blocking - Then it gets interesting…
    66. 66. SUB-RESOURCES- Image - Launch a download, non-blocking - Runs an image decoder- CSS - Launch a download, non-blocking - Then it gets interesting…- JS - Launch a download, almost blocking
    67. 67. JAVASCRIPT- JS and DOM are different- DOM = slow- Be careful about triggering unnecessary reflows
    68. 68. DOMHTML Tree Render Layout Tree StyleCSS Rules
    69. 69. POTENTIAL REFLOW DOMHTML Tree Render Layout Painting Tree StyleCSS Rules
    70. 70. NEW JAVASCRIPT ENGINES
    71. 71. NEW JAVASCRIPT ENGINES- Storing info about the code to compute it only once
    72. 72. NEW JAVASCRIPT ENGINES- Storing info about the code to compute it only once- Watch David Mandelin
    73. 73. - http://ricaud.me/nav-marche- @rik24d- anthony@mozilla.com- Merci Mauriz
    74. 74. QUESTIONS ?- http://ricaud.me/nav-marche- @rik24d- anthony@mozilla.com- Merci Mauriz

    ×