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
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
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
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