Html css workshop, lesson 0, how browsers work

INTRODUCTION TO FRONT END WEB DEVELOPMENT

INDEX
How browsers work
Level 1: HTML
Level 2: CSS
Level 3: Layouts
Level 4: Advanced HTML
Level 5: CSS Ninja
Level 6: JavaScript Beginner

OBJECTIVE
A complete page, using Bootstrap, no JavaScript

INTRODUCTION TO FRONT END WEB DEVELOPMENT
0) HOW BROWSERS WORK

MAIN DESKTOP BROWSERS
MAIN MOBILE BROWSERS

BROWSER COMPONENTS
1. The user interface
2. The browser engine
3. The rendering engine
4. Networking
5. UI backend
6. JavaScript interpreter.
7. Data storage.

BROWSER COMPONENTS
3. The rendering engine
1. The user interface
2. The browser engine
4. Networking
5. UI backend
6. JavaScript interpreter.
7. Data storage.

PAGE.HTML
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<p>Hello <span>world!</span></p>
<div>
<img src="photo.jpg">
</div>
</body>
</html>

STYLE.CSS
body {
font-size: 16px;
}
p {
font-weight: bold;
}
p span {
display: none;
}
img {
float: right;
}

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

2. it translates them to individual characters based on
specified encoding of the file (e.g. UTF-8).
<html><head>...</head><body><p>Hello <span>world!</span></p
></body>...

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

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.
<body>.
4. it converts the tokens into objects which define their
properties and rules.

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.

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.

2)PROCESS CSS MARKUP AND BUILD THE CSSOM TREE

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.

3)COMBINE THE DOM AND CSSOM INTO A RENDER TREE

DOM tree CSSOM 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.

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.

<html>
<head>
<title>Layout example</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello!</div>
</div>
</body>
</html>

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

5) PAINT THE INDIVIDUAL NODES TO THE SCREEN

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.

Html css workshop, lesson 0, how browsers work

More Related Content

What's hot

Viewers also liked

Similar to Html css workshop, lesson 0, how browsers work

Recently uploaded

Html css workshop, lesson 0, how browsers work