Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (18)
Ähnlich wie How browser engines work?
Ähnlich wie How browser engines work? (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
How browser engines work?
- 1. HOW BROWSER ENGINES WORK? Anthony Ricaud, @rik24d
- 3. PARDON MY FRENCH - http://www.paris-web.fr/2011/conferences/ un-navigateur-comment-ca-marche.php
- 4. THIS IS ONLY AN INTRODUCTION
- 5. WHO ? - Web developer at Mozilla but - 2 patches in Firefox - 23 in WebKit
- 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. STANDING ON THE SHOULDERS OF GIANTS - List of documents to prepare this talk - http://ricaud.me/nav-marche
- 9. CHROME
- 10. CONTENT
- 11. IT’S COMPLEX
- 12. IT’S COMPLEX Accessibility Cache system JS Engine stack Network Font URL parser Cookies stack rendering DOM Databases Bindings Image Downloading decoding Scrolling Native themes Plugins Painting
- 13. PRESTO GECKO WEBKIT TRIDENT
- 14. PRESTO GECKO WEBKIT TRIDENT
- 15. NEW REQUEST - Parse the URL : protocol, domain - DNS request www.mozilla.org -> 63.245.208.161 - Open TCP connection, send HTTP request
- 16. SERVER RESPONSE HTTP/1.1 200 OK Content-Type: application/xhtml+xml
- 17. SERVER RESPONSE HTTP/1.1 200 OK Content-Type: application/xhtml+xml XML MODE
- 18. SERVER RESPONSE HTTP/1.1 200 OK Content-Type: application/xhtml+xml XML MODE
- 19. SERVER RESPONSE HTTP/1.1 200 OK Content-Type: application/xhtml+xml XML MODE
- 20. SERVER RESPONSE HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html>
- 21. SERVER RESPONSE HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> QUIRKS MODE
- 22. SERVER RESPONSE HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> QUIRKS MODE
- 23. SERVER RESPONSE HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> QUIRKS MODE
- 24. SERVER RESPONSE HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> <!doctype html> <html>
- 25. SERVER RESPONSE HTTP/1.1 200 OK Content-Type: application/xhtml+xml Content-Type: text/html <html> <!doctype html> <html> STANDARDS MODE
- 26. HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5
- 27. HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5 THEY DON’T CARE
- 28. <!doctype html> <html> <head> <title>KISS</title> </head> <body> <div> <h1>BISOUS</h1> <p>Bonnes Idées Simples Ou Ultra Sensées.</p> </div> </body> </html>
- 29. HTML HEAD BODY TITLE DIV KISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
- 30. HTML HEAD BODY DOM TREE TITLE DIV KISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
- 31. HTML HEAD BODY TITLE DIV KISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
- 32. HTML HEAD BODY TITLE DIV KISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
- 33. SUB-RESOURCES
- 35. SUB-RESOURCES - Image - Launch a download, non-blocking
- 36. SUB-RESOURCES - Image - Launch a download, non-blocking - Runs an image decoder
- 37. SUB-RESOURCES - Image - Launch a download, non-blocking - Runs an image decoder - CSS
- 38. SUB-RESOURCES - Image - Launch a download, non-blocking - Runs an image decoder - CSS - Launch a download, non-blocking
- 39. SUB-RESOURCES - Image - Launch a download, non-blocking - Runs an image decoder - CSS - Launch a download, non-blocking - Then it gets interesting…
- 40. CSS BUCKETS ID CLASS TAGNAME OTHERS
- 41. CSS BUCKETS div ID CLASS TAGNAME OTHERS
- 42. CSS BUCKETS div ID CLASS TAGNAME OTHERS
- 43. CSS BUCKETS .item div ID CLASS TAGNAME OTHERS
- 44. CSS BUCKETS .item div ID CLASS TAGNAME OTHERS
- 45. CSS BUCKETS #sidebar .item div ID CLASS TAGNAME OTHERS
- 46. CSS BUCKETS #sidebar .item div ID CLASS TAGNAME OTHERS
- 47. CSS BUCKETS div#sidebar #sidebar .item div ID CLASS TAGNAME OTHERS
- 48. CSS BUCKETS div#sidebar #sidebar .item div ID CLASS TAGNAME OTHERS
- 49. CSS BUCKETS div p div#sidebar #sidebar .item div ID CLASS TAGNAME OTHERS
- 50. CSS BUCKETS div#sidebar div p #sidebar .item div ID CLASS TAGNAME OTHERS
- 51. CSS BUCKETS :visited div#sidebar div p #sidebar .item div ID CLASS TAGNAME OTHERS
- 52. CSS BUCKETS div#sidebar div p #sidebar .item div :visited ID CLASS TAGNAME OTHERS
- 53. DOM TREE + PARSING CSS DOM HTML Tree Style CSS Rules
- 54. CSS MATCHING div BODY .item #sidebar DIV div#sidebar div p DIV ul p id="sidebar" ul > p DIV DIV DIV body > div p class="item" class="item" class="item" #sidebar p P P P
- 55. RENDER TREE HTML HEAD BODY TITLE DIV KISS H1 P BONNES IDÉES BISOUS SIMPLES OU
- 56. RENDER TREE Viewport HTML Scroll HEAD BODY Block Block TITLE DIV Block Block Block KISS H1 P Text Text BONNES IDÉES BISOUS SIMPLES OU
- 57. DOM TREE + RENDER TREE DOM HTML Tree Render Tree Style CSS Rules
- 58. A REFLOW OR LAYOUT
- 59. A REFLOW OR LAYOUT
- 60. DOM HTML Tree Render Layout Tree Style CSS Rules
- 61. AND PAINTING DOM HTML Tree Render Layout Painting Tree Style CSS Rules
- 62. PAINT ?
- 63. PAINT ? - Used to be the CPU drawing everything
- 64. PAINT ? - Used to be the CPU drawing everything - We’re giving more and more stuff to the GPU
- 65. PAINT ? - Used to be the CPU drawing everything - We’re giving more and more stuff to the GPU - Hardware acceleration
- 66. SUB-RESOURCES - Image - Launch a download, non-blocking - Runs an image decoder - CSS - Launch a download, non-blocking - Then it gets interesting…
- 67. 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
- 68. JAVASCRIPT - JS and DOM are different - DOM = slow - Be careful about triggering unnecessary reflows
- 69. DOM HTML Tree Render Layout Tree Style CSS Rules
- 70. POTENTIAL REFLOW DOM HTML Tree Render Layout Painting Tree Style CSS Rules
- 72. NEW JAVASCRIPT ENGINES - Storing info about the code to compute it only once
- 73. NEW JAVASCRIPT ENGINES - Storing info about the code to compute it only once - Watch David Mandelin
- 74. - http://ricaud.me/nav-marche - @rik24d - anthony@mozilla.com - Merci Mauriz
- 75. QUESTIONS ? - http://ricaud.me/nav-marche - @rik24d - anthony@mozilla.com - Merci Mauriz
Hinweis der Redaktion
- \n
- So as you may have already notice, I&#x2019;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&#x2019;ve compiled a list of all the stuff I&#x2019;ve read to prepare this. I highly recommend to read and watch those.\n
- Not Google Chrome.\nInterface = Chrome, we won&#x2019;t talk about it today\n
- \n
- \n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- And I&#x2019;m missing some\n
- We&#x2019;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&#x2019;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&#x2019;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&#x2019;s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat&#x2019;s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
- Let&#x2019;s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat&#x2019;s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
- Let&#x2019;s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat&#x2019;s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
- Let&#x2019;s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat&#x2019;s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
- Let&#x2019;s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat&#x2019;s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
- Let&#x2019;s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat&#x2019;s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
- Let&#x2019;s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat&#x2019;s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
- Let&#x2019;s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat&#x2019;s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
- Let&#x2019;s use another content type\nWe start the HTML code and there is no doctype\nbip\nThat&#x2019;s quirks mode\nbip\nThe main difference is the box model.\nbip\nThere are other differences\n
- Let&#x2019;s add a doctype\nbip\nThat will trigger the standards mode. That&#x2019;s where you want to be.\nQuick note about what we call the &#x201C;HTML5 doctype&#x201D;: it works everywhere because it was reverse engineered. &#x201C;What&#x2019;s the shortest doctype that triggers standards mode&#x201D;\n
- We&#x2019;ve never mentioned versions of the specs. That&#x2019;s because browser engines don&#x2019;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&#x2019;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&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;s compute the frames. \n
- We have the list of rules that apply for every DOM node, now let&#x2019;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&#x2019;s called a reflow or layout.\n\nWe&#x2019;re gonna see one example of this. It&#x2019;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&#x2019;s a very recognizable website, You can try to guess.\nbip\n\nAlso, see how it&#x2019;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&#x2019;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