How browser engines work?
Upcoming SlideShare
Loading in...5
×
 

How browser engines work?

on

  • 9,678 views

 

Statistics

Views

Total Views
9,678
Views on SlideShare
6,479
Embed Views
3,199

Actions

Likes
9
Downloads
120
Comments
0

12 Embeds 3,199

http://topsape.ru 1889
http://donothing.ru 1252
http://www.mikk.cz 29
http://abtasty.com 12
http://yandex.ru 5
http://feeds.feedburner.com 3
http://pqyrxyi4l.owl.e 3
http://prlog.ru 2
http://www.liveinternet.ru 1
http://funpromo.ru&_=1359124763636 HTTP 1
http://dirtyf.over-blog.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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? How browser engines work? Presentation Transcript

  • HOW BROWSER ENGINES WORK? Anthony Ricaud, @rik24d
  • PARDON MY FRENCHhttp://www.flickr.com/photos/nitot/6537065859/
  • PARDON MY FRENCH- http://www.paris-web.fr/2011/conferences/ un-navigateur-comment-ca-marche.php
  • THIS IS ONLY AN INTRODUCTION
  • WHO ?- Web developer at Mozilla but- 2 patches in Firefox- 23 in WebKit
  • 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)
  • STANDING ON THE SHOULDERS OF GIANTS - List of documents to prepare this talk - http://ricaud.me/nav-marche
  • CHROME
  • CONTENT
  • IT’S COMPLEX
  • 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
  • PRESTO GECKO WEBKIT TRIDENT
  • PRESTO GECKO WEBKIT TRIDENT
  • NEW REQUEST- Parse the URL : protocol, domain- DNS request www.mozilla.org -> 63.245.208.161- Open TCP connection, send HTTP request
  • SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xml
  • SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xml XML MODE
  • SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xml XML MODE
  • SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xml XML MODE
  • SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html>
  • SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html> QUIRKS MODE
  • SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html> QUIRKS MODE
  • SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html> QUIRKS MODE
  • SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html><!doctype html><html>
  • SERVER RESPONSEHTTP/1.1 200 OKContent-Type: application/xhtml+xmlContent-Type: text/html<html><!doctype html><html> STANDARDS MODE
  • HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5
  • HTML5, HTML4, XHTML1.0, CSS3, ECMASCRIPT 5 THEY DON’T CARE
  • <!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>
  • HTMLHEAD BODYTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
  • HTMLHEAD BODY DOM TREETITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
  • HTMLHEAD BODYTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
  • HTMLHEAD BODYTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU ULTRA SENSÉES.
  • SUB-RESOURCES
  • SUB-RESOURCES- Image
  • SUB-RESOURCES- Image - Launch a download, non-blocking
  • SUB-RESOURCES- Image - Launch a download, non-blocking - Runs an image decoder
  • SUB-RESOURCES- Image - Launch a download, non-blocking - Runs an image decoder- CSS
  • SUB-RESOURCES- Image - Launch a download, non-blocking - Runs an image decoder- CSS - Launch a download, non-blocking
  • SUB-RESOURCES- Image - Launch a download, non-blocking - Runs an image decoder- CSS - Launch a download, non-blocking - Then it gets interesting…
  • CSS BUCKETSID CLASS TAGNAME OTHERS
  • CSS BUCKETS divID CLASS TAGNAME OTHERS
  • CSS BUCKETS divID CLASS TAGNAME OTHERS
  • CSS BUCKETS .item divID CLASS TAGNAME OTHERS
  • CSS BUCKETS .item divID CLASS TAGNAME OTHERS
  • CSS BUCKETS #sidebar .item divID CLASS TAGNAME OTHERS
  • CSS BUCKETS#sidebar .item div ID CLASS TAGNAME OTHERS
  • CSS BUCKETS div#sidebar#sidebar .item div ID CLASS TAGNAME OTHERS
  • CSS BUCKETSdiv#sidebar#sidebar .item div ID CLASS TAGNAME OTHERS
  • CSS BUCKETS div pdiv#sidebar#sidebar .item div ID CLASS TAGNAME OTHERS
  • CSS BUCKETSdiv#sidebar div p#sidebar .item div ID CLASS TAGNAME OTHERS
  • CSS BUCKETS :visiteddiv#sidebar div p#sidebar .item div ID CLASS TAGNAME OTHERS
  • CSS BUCKETSdiv#sidebar div p#sidebar .item div :visited ID CLASS TAGNAME OTHERS
  • DOM TREE + PARSING CSS DOMHTML Tree StyleCSS Rules
  • 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
  • RENDER TREE HTMLHEAD BODYTITLE DIVKISS H1 P BONNES IDÉES BISOUS SIMPLES OU
  • RENDER TREE Viewport HTML ScrollHEAD BODY Block BlockTITLE DIV Block Block BlockKISS H1 P Text Text BONNES IDÉES BISOUS SIMPLES OU
  • DOM TREE + RENDER TREE DOMHTML Tree Render Tree StyleCSS Rules
  • A REFLOW OR LAYOUT
  • A REFLOW OR LAYOUT
  • DOMHTML Tree Render Layout Tree StyleCSS Rules
  • AND PAINTING DOMHTML Tree Render Layout Painting Tree StyleCSS Rules
  • PAINT ?
  • PAINT ?- Used to be the CPU drawing everything
  • PAINT ?- Used to be the CPU drawing everything- We’re giving more and more stuff to the GPU
  • PAINT ?- Used to be the CPU drawing everything- We’re giving more and more stuff to the GPU- Hardware acceleration
  • SUB-RESOURCES- Image - Launch a download, non-blocking - Runs an image decoder- CSS - Launch a download, non-blocking - Then it gets interesting…
  • 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
  • JAVASCRIPT- JS and DOM are different- DOM = slow- Be careful about triggering unnecessary reflows
  • DOMHTML Tree Render Layout Tree StyleCSS Rules
  • POTENTIAL REFLOW DOMHTML Tree Render Layout Painting Tree StyleCSS Rules
  • NEW JAVASCRIPT ENGINES
  • NEW JAVASCRIPT ENGINES- Storing info about the code to compute it only once
  • NEW JAVASCRIPT ENGINES- Storing info about the code to compute it only once- Watch David Mandelin
  • - http://ricaud.me/nav-marche- @rik24d- anthony@mozilla.com- Merci Mauriz
  • QUESTIONS ?- http://ricaud.me/nav-marche- @rik24d- anthony@mozilla.com- Merci Mauriz