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. 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
  2. What Browsers Can Do? • Display HTML content with style

    applied to it • Display images and play videos • Display PDF files
  3. 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.
  4. Browsers will close a script tag if it include a

    string matching the closing tag. Example:
  5. 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
  6. Images • Image in the HTML with valid src attribute

    will be downloaded no matter what.
  7. Images in CSS • Image in the CSS will only

    be downloaded once the document content is parsed and the render tree is added.
  8. 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
  9. Links • The specs says that resources on links should

    be downloaded once the link is inserted into the document
  10. Links - Cont • If the link has an invalid

    type, it will be downloaded but not parsed
  11. • 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?
  12. 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.