Skip to content

Latest commit

 

History

History
66 lines (47 loc) · 3.13 KB

Web Browsers.md

File metadata and controls

66 lines (47 loc) · 3.13 KB

Standardization

  • Web standards are the technologies used to build on the web. They exist as long technical documents called ==specifications==, and are created by standards bodies (which are institutions that invite groups of people from different tech companies to come together and agree on how the technologies should work in the best way). The [[W3C]] is the best known body. Others include:
    • WHATWG: maintain the living standards of [[HTML]].
    • ECMA: publish standard for ECMAScript, which [[JavaScript]] is based on.
    • Khronos: publish technologies for 3D graphics, such as WebGL.
  • Due to the open nature of web standards, the web remains a freely-available public resource.
  • Specifications detail exactly how a technology should work, and are intended for use by software engineers to implement the technologies (usually in web browsers).
    • e.g. HTML Living Standard describes how HTML (elements, and their APIs as well as surrounding technologies) should be implemented.

Rendering

  • The Flow
    • HTML document is parsed into a 'content tree'.
    • Using styling information, the 'render tree' is constructed.
      • This contains the nodes with their respective visual attributes, and in the order they will be displayed on the screen.
    • The render tree goes thru the 'layout' process.
      • Each node is given the exact coordinates where it should appear on the screen.
    • In the next step, the render tree is 'painted'.
      • Nodes will be traversed and each one will be painted to the UI.
  • For improved UX, this process is done in small chunks of the document. Content is displayed on the screen as soon as possible.

DevTools

  • In the context of JavaScript debugging, a breakpoint is a point in code where the debugger will automatically pause the execution.
    • The debugger; command also pauses code execution when the developer tools are open.
    • An error also paused execution.

Skill Gap

  • How Browsers Work
    • Engines
    • Rendering
    • Optimization
  • Headless Browsers
  • Engines
    • Webkit
    • Blink
    • Gecko
  • Polyfills

Further

Podcasts 🎙

<iframe src='https://podverse.fm/embed/player?episodeId=pRw8fREy9M_' title='Podverse Embed Player' class='pv-embed-player'>CodeNewbie - How do browsers work? (Lin Clark)</iframe> <iframe src='https://podverse.fm/embed/player?episodeId=CIW8GYmDGM' title='Podverse Embed Player' class='pv-embed-player'>Syntax - How to Get Better at Debugging</iframe>

Reads 📄

Resources 🧩