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.
Show HN: An interactive guide to how browsers work
11–20 of 40 posts
Re: Show HN: An interactive guide to how browsers work
#12I 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.
I thought about this, but I tried to keep it simple. Let me figure out how to add these blocks without over-complicating the guide.
Thank you!
Re: Show HN: An interactive guide to how browsers work
#13This 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 se…
Took a quick glance through the code, its a pretty decent basic go at it.
i can see a few reasons for slowness - you arent using multiprocessing or threading, you might have to rework your rendering for it though. You will need to have the renderer running in a loop, re-rendering when the stack changes, and the multiprocessing/thread loop adjusting the stack as their requests finish.
Second, id recommend taking a look at existing python dom processing modules, this will allow you to use existing code and extend it to fit with your browser, you wont have to deal with finding all the ridiculous parsing edgecases. This may also speed things up a bit.
Id also recommend trying to render broken sites (save a copy, break it, see what your browser does), for the sake of completion
Re: Show HN: An interactive guide to how browsers work
#14Cool 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).
Hpbn is really interesting, thanks for linking it
Re: Show HN: An interactive guide to how browsers work
#15Bit 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.
Re: Show HN: An interactive guide to how browsers work
#16This 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 se…
Took a quick glance through the code, its a pretty decent basic go at it. i can see a few reasons for slowness - you arent using multiprocessing or threading, you might have to rework your rendering for it though. You will need to have the renderer running in a loop, re-rendering when the stack changes, and the multiprocessing/thread loop adjusting the stack as their requests finish. Second, id recommend taking a loo…
thank you for your quick code review and for these many helpful tips! I'll take a look at them and see what I can put into practice.
EDIT: Unfortunately, it seems that the code is getting near the limit of the context window for Claude, so I'm not able to add several of the feature suggestions you added with the present approach. I'll look into breaking it up into multiple smaller files and see if I can do any better.
Re: Show HN: An interactive guide to how browsers work
#17Claims 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.
Re: Show HN: An interactive guide to how browsers work
#18Bit 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.
And the DOM (though it can be argued that's part of the rendering pipeline).
Re: Show HN: An interactive guide to how browsers work
#19Bit 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.
Will cover the rendering engine in more details. I didn't know at what sections to go deeper. So just stopped and published it to gather more feedback.
Thank you!
Re: Show HN: An interactive guide to how browsers work
#20Not 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 progr…
Thank you for the suggestion! Would be writing something like "DOM in the modern browsers" more correct then?