13. 1) PROCESS HTML MARKUP AND BUILD THE DOM TREE
1. The browser sends a request to the server and reads the
raw bytes of the HTML file.
20 20 20 20 26 6c 74 3b 21 44 4f 43 54 59 50 45 20 68 74 6d
6c 3e 20 20 20 20 20 20 26 6c 74 3b 68 74 6d 6c 3e 20 20 20 20 20 20
26 6c 74 3b 68 65 61 64 3e 20 20 20 20 68 72 65 66 3d 5c 22 73 74 79
6c 65 2e 63 73 73 5c 22 20 72 65 6c 3d 5c 22 73 74 79 6c 65 73 68 65
65 74 5c 22 3e 20 20 20 20 20 20 3c
14. 1) PROCESS HTML MARKUP AND BUILD THE DOM TREE
2. it translates them to individual characters based on
specified encoding of the file (e.g. UTF-8).
1. The browser sends a request to the server and reads the
raw bytes of the HTML file.
<html><head>...</head><body><p>Hello <span>world!</span></p
></body>...
15. 1) PROCESS HTML MARKUP AND BUILD THE DOM TREE
3. it converts strings of characters into distinct tokens
specified by the W3C HTML5 standard - e.g. <html>,
<body>.
1. The browser sends a request to the server and reads the
raw bytes of the HTML file.
2. it translates them to individual characters based on
specified encoding of the file (e.g. UTF-8).
16. 1) PROCESS HTML MARKUP AND BUILD THE DOM TREE
4. it converts the tokens into objects which define their
properties and rules.
1. The browser sends a request to the server and reads the
raw bytes of the HTML file.
2. it translates them to individual characters based on
specified encoding of the file (e.g. UTF-8).
3. it converts strings of characters into distinct tokens
specified by the W3C HTML5 standard - e.g. <html>,
<body>.
17. 1) PROCESS HTML MARKUP AND BUILD THE DOM TREE
5. it links the created objects in a tree data structure that
also captures the parent-child relationships defined in the
original markup.
The DOM tree is created.
1. The browser sends a request to the server and reads the
raw bytes of the HTML file.
2. it translates them to individual characters based on
specified encoding of the file (e.g. UTF-8).
3. it converts strings of characters into distinct tokens
specified by the W3C HTML5 standard - e.g. <html>,
<body>.
4. it converts the tokens into objects which define their
properties and rules.
18. THE DOCUMENT OBJECT MODEL TREE
It is the object presentation of the HTML document and the interface of HTML
elements to the outside world, e.g. JavaScript.
19. 1) PROCESS HTML MARKUP AND BUILD THE DOM TREE
The browser builds up the DOM incrementally.
The root of the tree is the Document object.
HTML is quite forgiving by nature, almost one to one
relation to the markup.
CSS, images and scripts are downloaded as soon as
possible by the HTML parser.
JavaScript execution blocks on CSSOM, scripts should go
at the end of the page and CSS at the top or inline.
JavaScript blocks DOM construction unless explicitly
declared as async.
24. 2)PROCESS CSS MARKUP AND BUILD THE CSSOM TREE
The CSSOM cannot be built incrementally like the DOM.
DOM and CSSOM are independent data structures.
By default, CSS is treated as a render blocking resource.
All CSS resources, regardless of blocking or non-blocking
behavior, are downloaded and combined.
Complexity around matching rules.
More nesting in the CSS affects performance, we need to
optimize selectors.
29. 3)COMBINE THE DOM AND CSSOM INTO A RENDER TREE
It is the visual rapresentation of the document.
It enables the browser to paint elements in the screen in
the right order.
Each element in the tree is called renderer or render-
object or frame.
A renderer knows how to layout and paint itself and it's
children.
A renderer represents a rectangular area and contains
geometric informations such as width, height, position.
Every DOM element has a reference to the node in the
render tree.
Elements with display:none; or head tags are in the DOM
but not in the render tree. Not one to one with the DOM.
31. 4) RUN LAYOUT ON THE RENDER TREE TO COMPUTE GEOMETRY OF EACH NODE
32. 4) RUN LAYOUT ON THE RENDER TREE TO COMPUTE GEOMETRY OF EACH NODE
The browser begins at the root of the render tree and
traverses it to compute the geometry of each object on the
page.
This stage is also known as reflow.
When the changes affect the document contents or
structure, or an element position, a reflow (or relayout)
happens.
When changing element styles which don't affect the
element's position on a page (such as background-color,
border-color, visibility), a repaint happens.
Batch changes, intelligent reflow.
Reflow only dirty trees in the tree.
Accessing certain properties, e.g. with JS will immediately
reflow.
33. 4) RUN LAYOUT ON THE RENDER TREE TO COMPUTE GEOMETRY OF EACH NODE
<html>
<head>
<title>Layout example</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello!</div>
</div>
</body>
</html>
34. 4) RUN LAYOUT ON THE RENDER TREE TO COMPUTE GEOMETRY OF EACH NODE
37. RECAP: THE RENDERING ENGINE FLOW
1. PROCESS HTML MARKUP AND BUILD THE DOM TREE
2. PROCESS CSS MARKUP AND BUILD THE CSSOM TREE
3. COMBINE THE DOM AND CSSOM INTO A RENDER TREE
4. RUN LAYOUT ON THE RENDER TREE TO COMPUTE GEOMETRY OF EACH NODE
5. PAINT THE INDIVIDUAL NODES TO THE SCREEN
39. 5) PAINT THE INDIVIDUAL NODES TO THE SCREEN
The process has visual information about every element of
the render tree.
it will create layers, from bottom to top.
absolute positioned elements and children has their own
layers.
incremental process, builds up over 12 phases, first
background, then borders etc.
it produces bitmaps, upload them in the gpu as a texture,
composites them into a final image to render to the screen.