Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How Browsers Work

Ahmad Alfy
January 09, 2019

How Browsers Work

How web browsers work

Ahmad Alfy

January 09, 2019
Tweet

More Decks by Ahmad Alfy

Other Decks in Technology

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
  3. None
  4. None
  5. None
  6. None
  7. None
  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

  10. None
  11. Rendering / JavaScript Engines Blink - V8 Webkit Gecko Spider

    Monkey Trident
  12. None
  13. None
  14. None
  15. How Browsers Display the content

  16. None
  17. None
  18. None
  19. None
  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?
  22. None
  23. None
  24. None
  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

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

  42. None
  43. None