How Browsers Work - Speaker Deck

Slide 1

Slide 1 text

How Browsers Work

Slide 2

Slide 2 text

Browsers have evolved from an application that we use to read content to mini-operating systems that can run heavy applications written in JavaScript. Understanding how the browsers work is something you cannot ignore to grow in your career as a front-end developer. It’s almost always the key for understanding why your code behave in a certain way and how to trace and ﬁnd the root of a problem you are facing. Learning the internals of browser operations helps you make better decisions and know the justiﬁcations behind development best practices

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

What Browsers Can Do? • Display HTML content with style applied to it • Display images and play videos • Display PDF ﬁles

Slide 9

Slide 9 text

Components of a Web Browser

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Rendering / JavaScript Engines Blink - V8 Webkit Gecko Spider Monkey Trident

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

How Browsers Display the content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

HTML Parsing • HTML is downloaded and parsed from the top toward the bottom of the page. • As the browser start encountering external assets (link, image, script) it will attempt to download it under certain conditions • Web browsers have a forgiving nature and a way to handle error. A lot of these conditions are recommended by the W3C to ensure smooth and consistent error handling.

Slide 21

Slide 21 text

Have you seen a browser throwing an exception cause you wrote invalid HTML?

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Browsers will close a script tag if it include a string matching the closing tag. Example:

Slide 26

Slide 26 text

Other examples • Inserting block elements inside elements that only accept children of phrasing type only (paragraph). • Any type of elements other than

inside

• Tables without tbody

Slide 27

Slide 27 text

Handling external assets

Slide 28

Slide 28 text

Images • Image in the HTML with valid src attribute will be downloaded no matter what.

Slide 29

Slide 29 text

Images in CSS • Image in the CSS will only be downloaded once the document content is parsed and the render tree is added.

Slide 30

Slide 30 text

Examples • Animating background images using CSS  http://jsﬁddle.net/yWVVX/230/

Slide 31

Slide 31 text

Image lazy loading

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Scripts • The specs says that the browser should only attempt to download a script only if it has a valid “type” attribute  https://html.spec.whatwg.org/multipage/scripting.html#script-processing-prepare

Slide 34

Slide 34 text

Dynamic Scripts • Dynamically generated scripts should only be downloaded once the script is added to the document

Slide 35

Slide 35 text

Links • The specs says that resources on links should be downloaded once the link is inserted into the document

Slide 36

Slide 36 text

Links - Cont • If the link has an invalid type, it will be downloaded but not parsed

Slide 37

Slide 37 text

Fonts will be discussed separately

Slide 38

Slide 38 text

How rendering occurs

Slide 39

Slide 39 text

• While the document is downloading, a lot of factors affect its rendering: • Is there any scripts being downloaded or executed? • Are we still downloading CSS files? • Is the CSS inline or referenced in external files?

Slide 40

Slide 40 text

CSS • While downloading CSS ﬁles, rendering in the web page is completely blocked. This is because of a phenomenon called “Progressive Rendering”. Without it, you will see content shifting and changing their style while the assets are being downloaded. • Inline CSS is an exception, it will render immediately after loading.