FRESH

Hacker News

Home

Show HN: An interactive guide to how browsers work

290 points by krasun

by domnodom

2 subcomments

Not all browsers had or have a DOM, and some didn’t until later versions.
Early browsers without DOMs (with initial release date): WorldWideWeb (Nexus) (Dec 1990), Erwise (Apr 1992), ViolaWWW (May 1992), Lynx (1992), NCSA Mosaic 1.0 (Apr 1993), Netscape 1.0 (Dec 1994), and IE 1.0 (Aug 1995).
Note: Lynx remains a non-DOM browser by design.
AOL 1.0–2.0 (1994–1995) used the AOLPress engine which was static with no programmable objects.
The ability to interact with the DOM began with "Legacy DOM" (Level 0) in Netscape 2.0 (Sept 1995), IE 3.0 (Aug 1996), AOL 3.0 (1996, via integrated IE engine), and Opera 3.0 (1997). Then there was an intermediate phase in 1997 where Netscape 4.0 (document.layers) and IE 4.0 (document.all) each used their own model.
The first universal standard was the W3C DOM Level 1 Recommendation (Oct 1998). Major browsers adopted this slowly: IE 5.0 (Mar 1999) offered partial support, while Konqueror 2.0 (Oct 2000) and Netscape 6.0 (Nov 2000) were the first W3C-compliant engines (KHTML and Gecko).
Safari 1.0 (2003), Firefox 1.0 (2004), and Chrome 1.0 (2008) launched with native standard DOM support from version 1.0.
Currently most major browser engines follow the WHATWG DOM Living Standard to supports real-time feature implementation.

by logicallee

3 subcomments

This is pretty relelevant to a project I'm working on - a new web browser not based on Chromium or Firefox.
Web browsers are extremely complex, requiring millions of lines of code in order to deal with a huge variety of Internet standards (and not just the basic ones such as HTML, JavaScript and CSS).
A while ago I wanted to see how much of this AI could get done autonomously (or with a human in the loop), you can see a ten-minute demo I posted a couple of days ago:
https://www.youtube.com/watch?v=4xdIMmrLMLo&t=42s
The source code for this is available here right now:
http://taonexus.com/publicfiles/jan2026/160toy-browser.py.tx...
It's only around 2,000 LOC so it doesn't have a lot of functionality, but it is able to make POST requests and can read some Wikipedia articles, for example. Try it out. It's very slow, unfortunately.
Let me know if you have anything you'd like to improve about it. There's also a feature requests page here: https://pollunit.com/en/polls/ahysed74t8gaktvqno100g

by chrisweekly

2 subcomments

Cool project, thanks for sharing. HN readers should also check out https://hpbn.co (High-Performance Browser Networking) and https://every-layout.dev (amazing CSS resource; the paid content is worth it, but the free parts are excellent on their own).

by utopiah

1 subcomments

Neat, it's like an exciting way to dive into https://browser.engineering without having anything to install.
I'm wondering if examples with Browser/Server could benefit from a small visual, e.g. a desktop/laptop icon on one side and a server on the other.

by arendtio

1 subcomments

I like it very much --> bookmarked :-)
The step I am missing is how other resources (images, style sheets, scripts) are being loaded based on the HTML/DOM. I find that crucial for understanding why images sometimes go missing or why pages sometimes appear without styling.

by philk10

1 subcomments

For a narrow browser window (< 1170) the contents section floats over the contents which is distracting

by edwinjm

2 subcomments

Bit unfortunate that more than half of the page is dedicated to network requests, but almost all work and complexity of the browser is in the parsing and rendering pipeline.

by schoen

0 subcomment

I'd also like to suggest a little more work on the URL parsing (even though most users probably won't enter anything that will be misinterpreted). For example, if a protocol scheme other than https:// or http:// is used, the browser will probably still treat it specially somehow (even though browsers typically seem to support fewer of these than they used to!). It might be good to catch these other cases.
https://en.wikipedia.org/wiki/List_of_URI_schemes

by A1aM0

0 subcomment

I love the "mental model" approach here. Most guides I've seen either get bogged down in the minute details of TLS/Handshakes immediately or are way too high-level. The interactive packet visualization is a really nice touch to bridge that gap. Thanks for sharing!

by LoganDark

2 subcomments

Claims that browsers transform "d.csdfdsaf" -> https://d.csdfdsaf, but they don't. They only transform domains with valid TLDs, unless you manually add the URL scheme.

by jeffbee

0 subcomment

Perhaps worth editing the DNS section in light of RFC 9460 ... depending on the presence and contents of the HTTPS RR, a browser might not even use TCP. Here's a good blog post surveying the contents of the HTTPS RR a few years ago. https://www.netmeister.org/blog/https-rrs.html

by englishcat

0 subcomment

Great project, thanks
What's your next steps, do you plan to add more details of the reflow process?

by amelius

0 subcomment

When I was a kid I had an electronics book about how (CRT based) TVs work.
Posts like this are the modern version of that.

by vivzkestrel

1 subcomments

stupid question: what if we scrapped dns looksups completely and made all the computers actually work with human readable domain names instead?

by GaryBluto

0 subcomment

This doesn't account for all browsers, only Safari and Chrome. There isn't even a passing mention of separate search and address bars.

by raghavankl

0 subcomment

This is cool

by henrygallen

0 subcomment

nice work!