6 ms·
Populating the page: how browsers work (2020)
- kaon123 3y agoFun read that puts a lot of things together that I "sort of knew" but never really knew.
- pricci 3y agoIt's a nice article. I would like one that goes a little bit deeper into the initial part of the Browser-Server interaction (but still readable in one sitting). Touching things like the headers sent by the browser.
- creativenolo 3y agoMaybe not what you mean, but the “browser sends an initial HTTP GET request” can be through of a a text file that is sent. The text file is the the request type as a word in the first line along with the path and http version. The next lines are the headers: GET / HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8 Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate, br Connection: keep-alive The response is the similar. But starts with the status line, the headers, then the body (not HTML body, but the payload of the response: HTTP/1.1 200 OK Date: Fri, 13 Oct 2023 15:04:05 GMT Server: Apache/2.4.41 (Unix) Last-Modified: Mon, 9 Oct 2023 16:30:00 GMT ETag: "2d-58e4-4d5f487a7b300" Accept-Ranges: bytes Content-Length: 1024 Content-Type: text/html Connection: keep-alive <html> <head> <title>Example Page</title> </head> <body> <h1>Welcome to www.example.com!</h1> <p>This is a sample webpage.</p> </body> </html>
- coldcode 3y agoWould be fun to read an article about how websites abuse browsers. I keep getting frustrated with https://www.macrumors.com https://www.macrumors.com and its insane amount of network calls, ads, bits of javascript, and other endless connections. Browser features started off so easy to understand, and now it's crazy. I had to write a webapp for the USPS in 1998 using IE 2, which had almost no features, and occasionally the features they had actually worked...
- darknavi 3y agoIt'd be nice if browsers would show an objective, stats-based score when you visit a website on how much bloat there was. Shame bad websites and make them chase "green" scores.
- bobbylarrybobby 3y agoSpeaking of green, if your browser could tell you “this webpage has consumed X watt-hours of electricity and has cost you $Y in electricity”, that'd be amazing. I think Apple devices could actually do it.
- sublinear 3y agohttps://developer.chrome.com/docs/lighthouse/overview/ https://developer.chrome.com/docs/lighthouse/overview/ Lighthouse is already built into Chrome amongst many other tools. Lighthouse scores are already a factor for search result rankings. The fact of the matter is, those junk sites don't care. Even if these scores were exposed to the user by default instead of hidden away in a dev tool, it's just not a strong enough incentive for those sites to change or users to care. Rankings are more strongly affected by adwords, time-to-first-byte, link juice, etc.
- hoten 3y agoField metrics as measured by the Core Web Vitals / CRUX are a factor in search ranking, not Lighthouse.
- deleted 3y ago[deleted]
- hkt 3y agoNeat. I'm trying to write a browser, of a kind, which is focused on only presenting content, navigation, and an index of content where appropriate. I'll try to incorporate things like this into my thinking. (Browser is here, very early stages, not appropriate for any kind of use really while I move to fltk: https://github.com/jmthackett/freeflow https://github.com/jmthackett/freeflow )
- austin-cheney 3y agoYour project looks really neat. I wish for a browser that only connects to localhost and never makes network calls under any condition, so that it’s purely the interface to a desktop app without compromise of security or privacy. A less important wishlist item if for browsers to render a DOM from an extended markdown instead of HTML so that accessibility and semantics are always correct by default.
- bloopernova 3y agoNeat! Sounds like the kind of thing that would pair well with RSS feeds. I'll definitely keep an eye on this!
- hkt 3y agoThanks! It uses RSS if it is present. Plus sitemap.xml if that's available, too.
- handity 3y agoI have been looking for exactly this sort of thing for ages, I'm so glad to have found your comment!
- hkt 3y agoThanks! It is still early days and I don't have much time but I'm telling myself I'd like to be able to daily drive my news sites with it eventually. Annoyingly it segfaults a bit at the moment, but it'll get there with time.
- 3y ago
- bloopernova 3y agoThat was really informative, but it raised a question for me: It described the browser as single threaded, but then talked about multiple concurrent tasks. Aren't those threads? One more question: are there any browsers that use multiple threads to lay out the various object models and render the page? If it's been found to be too difficult, what were the issues?
- Lukeisun 3y agoConcurrency can be done on a singular thread
- danielvaughn 3y agoMy understanding is that single-thread concurrency is essentially what Javascript does. It basically flickers between tasks very rapidly to simulate concurrency. Does that match your understanding or am I incorrect?
- eyelidlessness 3y agoIt doesn’t simulate, and the “flicker” is named “event loop”, but otherwise you’ve got it right. The concurrency model is essentially cooperative, ie pending tasks wait for the current task on the event loop to unblock, and then they are each executed in turn (with several different scheduling priorities based on how they became pending, eg synchronous event callbacks, Promises, various timers).
- 5e92cb50239222b 3y agohttps://go.dev/blog/waza-talk https://go.dev/blog/waza-talk
- euiq 3y agoI don't think that "flickers between tasks very rapidly to simulate concurrency" is a good mental model for event loops. It's more like "runs one task at a time until it hits a suspension point," where a suspension point is something like an I/O operation. If you had an event loop that switched tasks between suspension points, then you'd still need locks for shared data.
- toddmorey 3y agoHey web perf folks: the visa.com waterfall image on this page... what was used to generate it? Also, I love mdn. To this day it's the best technical writing about web development. Every concept is so well explained.
- stnvh 3y agoThe waterfalls match the ones generated by WebPageTest, though they could be using a third party tool themselves
- RealStickman_ 3y agoIt's funny how most diagrams describing DNS or TCP look like they were made in the 2000s (and probably were)
- miked85 3y agoThe diagrams in this article are pretty bad no matter when they were made.
- kaycebasques 3y agoCan't believe I never saw this set. I was a bit of a collector of these "how browsers work" resources for a while. I can remember these off top-of-head; what am I forgetting? * https://developer.chrome.com/blog/inside-browser-part1/ https://developer.chrome.com/blog/inside-browser-part1/ * https://developer.chrome.com/blog/inside-browser-part2/ https://developer.chrome.com/blog/inside-browser-part2/ * https://developer.chrome.com/blog/inside-browser-part3/ https://developer.chrome.com/blog/inside-browser-part3/ * https://developer.chrome.com/blog/inside-browser-part4/ https://developer.chrome.com/blog/inside-browser-part4/ * https://aerotwist.com/blog/the-anatomy-of-a-frame/ https://aerotwist.com/blog/the-anatomy-of-a-frame/ * https://web.dev/articles/howbrowserswork https://web.dev/articles/howbrowserswork
- deleted 3y ago[deleted]
- danielvaughn 3y agoSame. I remember first reading about all of this back around...2013 maybe? But it blew my mind at the time. I want to say that the article I read was that last one from Paul Irish, but I'm fairly certain the author of the article was a woman. She had dug deep into Chrome's internals to figure out the rendering pipeline and mostly focused on that. It was a really neat article though it might be slightly out of date at this point.
- kaycebasques 3y agoProbably this: http://taligarsiel.com/Projects/howbrowserswork1.htm http://taligarsiel.com/Projects/howbrowserswork1.htm Paul's article references it
- danielvaughn 3y agoAh yep, that's the one. Thanks!
- paulirish 3y agoAlso this one: https://browser.engineering/ https://browser.engineering/ ;)