How Browsers Work

How web browsers work

Transcript

1. How Browsers Work
2. 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 find the root of a problem you are facing. Learning the internals of browser operations helps you make better decisions and know the justifications behind development best practices
8. What Browsers Can Do? • Display HTML content with style applied to it • Display images and play videos • Display PDF files
9. Components of a Web Browser
11. Rendering / JavaScript Engines Blink - V8 Webkit Gecko Spider Monkey Trident
15. How Browsers Display the content
20. 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.
21. Have you seen a browser throwing an exception cause you wrote invalid HTML?
25. Browsers will close a script tag if it include a string matching the closing tag. Example:
26. Other examples • Inserting block elements inside elements that only accept children of phrasing type only (paragraph). • Any type of elements other than <li> inside <ul> or <ol> • Tables without tbody
27. Handling external assets
28. Images • Image in the HTML with valid src attribute will be downloaded no matter what.
29. Images in CSS • Image in the CSS will only be downloaded once the document content is parsed and the render tree is added.
30. Examples • Animating background images using CSS
 http://jsfiddle.net/yWVVX/230/
31. Image lazy loading
33. 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
34. Dynamic Scripts • Dynamically generated scripts should only be downloaded once the script is added to the document
35. Links • The specs says that resources on links should be downloaded once the link is inserted into the document
36. Links - Cont • If the link has an invalid type, it will be downloaded but not parsed
37. Fonts will be discussed separately
38. How rendering occurs
39. • 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?
40. CSS • While downloading CSS files, 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.
41. Script async / defer