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 DEVELOPMENT0) HOW BROWSERS WORK

MAIN DESKTOP BROWSERS

MAIN MOBILE BROWSERS

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

THE RENDERING ENGINE FLOW

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) PROCESS HTML MARKUP AND BUILD THE DOM TREE1. 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).

1. The browser sends a request to the server and reads the


<html><head>...</head><body><p>Hello <span>world!</span></p

></body>...


3. it converts strings of characters into distinct tokensspecified by the W3C HTML5 standard - e.g. <html>,

<body>.






4. it converts the tokens into objects which define their

properties and rules.





3. it converts strings of characters into distinct tokensspecified by the W3C HTML5 standard - e.g. <html>,

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





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.

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.

1) PROCESS HTML MARKUP AND BUILD THE DOM TREEThe browser builds up the DOM incrementally.

The root of the tree is the Document object.

HTML is quite forgiving by nature, almost one to onerelation to the markup.

CSS, images and scripts are downloaded as soon as

possible by the HTML parser.

JavaScript execution blocks on CSSOM, scripts should goat the end of the page and CSS at the top or inline.

JavaScript blocks DOM construction unless explicitlydeclared as async.

CURRENT OUTPUT

2)PROCESS CSS MARKUP AND BUILD THE CSSOM TREE

THE CSSOM TREE

2)PROCESS CSS MARKUP AND BUILD THE CSSOM TREEThe 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.

CURRENT OUTPUT

3)COMBINE THE DOM AND CSSOM INTO A RENDER TREE


DOM tree CSSOM tree

3)COMBINE THE DOM AND CSSOM INTO A RENDER TREEIt 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.

CURRENT OUTPUT

4) RUN LAYOUT ON THE RENDER TREE TO COMPUTE GEOMETRY OF EACH NODE

4) RUN LAYOUT ON THE RENDER TREE TO COMPUTE GEOMETRY OF EACH NODEThe browser begins at the root of the render tree andtraverses it to compute the geometry of each object on thepage. This stage is also known as reflow.

When the changes affect the document contents orstructure, or an element position, a reflow (or relayout)happens.

When changing element styles which don't affect theelement'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 immediatelyreflow.


<html>

<head>

<title>Layout example</title>

</head>

<body>

<div style="width: 50%">

<div style="width: 50%">Hello!</div>

</div>

</body>

</html>

REFLOW IN SLOW-MOTION

1:22

CURRENT OUTPUT

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 SCREENThe process has visual information about every element ofthe render tree.

it will create layers, from bottom to top.

absolute positioned elements and children has their ownlayers.

incremental process, builds up over 12 phases, firstbackground, 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.

FINAL OUTPUT

html css workshop, lesson 0, how browsers work

Software