| ▲ | 200 Milliseconds(200ms.thenodebook.com) |
| 195 points by dimitarpanov 3 days ago | 62 comments |
| |
|
| ▲ | Retr0id 4 hours ago | parent | next [-] |
| > Violet marks the data as it moves, always top to bottom. Nothing else on the page uses that color. I'm seeing 3 violet elements on my screen. "ms" in the top left, the dot next to that text, and a dot on a horizontal timeline at the lower edge of the screen. Scrolling down I see yet more violet UI elements, I assume the one on the vertical timeline represents the data, while all the others represent... other things. It seems violet is just the accent colour used for everything, which makes it an especially perplexing comment. I can only assume the "author" never even read the LLM's output before posting it. |
| |
| ▲ | anon7000 4 hours ago | parent | next [-] | | Yeah this smells like the type of comment an LLM leaves when it gets a really specific instruction. “use one consistent color for the data timeline. Right now we’re using multiple which is confusing.” Then the LLM writes some comment that’s a mini retrospective on what happened to justify itself. | | |
| ▲ | foolswisdom 4 hours ago | parent [-] | | Claude seems to do this all the time. That, the empty words and the increased self initiative of claude were all reasons I decided to just use codex (now merged into GPT). | | |
| ▲ | stratts 2 hours ago | parent | next [-] | | Codex does this too, I've noticed. LLMs seem to love documenting irrelevant implementation details in what should be user-facing text. I guess because the context is overwhelmingly the technical side of things, so without a later directive to steer it, that's what's most likely to come out. | |
| ▲ | pennomi 3 hours ago | parent | prev [-] | | Claude using documentation and comments as its personal diary is one of the most infuriating behaviors it exhibits. Half the time it’ll record some temporary implementation quirk, which later sessions interpret as infallible product design requirements. Absolutely unsustainable. |
|
| |
| ▲ | taneq 3 hours ago | parent | prev [-] | | Also “the clock at the top is exact” but the clock (on my phone, at least) is at the bottom. Still cool though! |
|
|
| ▲ | paimapi 4 hours ago | parent | prev | next [-] |
| is it bad that while this does look like a really cool method to explain a complex topic, my instinct on reading mic-droppy, RLHF AI prose is to be dismissive? there's just something about the persistent mic drops and this-not-that writing that feels so cheap I think it's because the explainer is passive, there's no interiority, it tells and doesn't show. plus, stylistically, if this were rewritten in second person (like most explainers are) it would make it a heck of a lot more readable: 'You order a coffee on your coffee shop's tablet. 211.4 ms later you see 'Order Confirmed'. There's a world of complexity behind that status confirmation. Let's see how it all works.' etc |
| |
| ▲ | magarnicle 8 minutes ago | parent [-] | | "mic-droppy" is the perfect description. Now I can imagine Claude sheepishly picking up the mic yet again after I correct it. |
|
|
| ▲ | felooboolooomba 6 hours ago | parent | prev | next [-] |
| > The person who clicked noticed no delay. Just to be the "actually..." guy: People notice 200ms delay. It's just that in cases it doesn't cause any bad feelings." |
| |
| ▲ | zahlman 6 hours ago | parent | next [-] | | I learned three thresholds over the years. Well, one of them decades ago and the others recently. Basically: At 50ms, you notice. At 400ms, you care. At 2000ms, without output, you wonder if it crashed. (That was the old one.) | | |
| ▲ | p-e-w 6 hours ago | parent [-] | | > At 2000ms, without output, you wonder if it crashed. (That was the old one.) That must have been a really, really long time ago indeed, because there are very few websites now that take less than 2000ms to load. The linked site didn’t even come close on my phone (probably 3-4 seconds), and I most certainly didn’t wonder whether it had crashed. | | |
| ▲ | Aurornis 6 hours ago | parent | next [-] | | The timing refers to feeling like the device acknowledged your request with some response. Not seeing the final completion of the request. Your phone probably showed something after you clicked the link but before the page rendered: Link highlight change, a progress bar, etc. If your phone had crashed and the browser was non-responsive, you would have recognized it quickly. More quickly than the page load time. | |
| ▲ | thenthenthen 5 hours ago | parent | prev | next [-] | | I dunno man, i am
In China.. everything outside of it takes at least 2000-5000 ms to even start responding on a good day | | | |
| ▲ | Crunchified 5 hours ago | parent | prev | next [-] | | I'm finding more and more web sites that won't load at all until I request them a second time. | | |
| ▲ | dylan604 4 hours ago | parent [-] | | maybe the site's debouncing logic on the buttons isn't working well |
| |
| ▲ | bloppe 6 hours ago | parent | prev [-] | | GitHub |
|
| |
| ▲ | taneq 3 hours ago | parent | prev [-] | | I was expecting the site it’s talking about to have faked an instant response. Ironically, sometimes it goes the other way and UIs have to fake a small delay otherwise the user won’t believe it’s actually done anything (although arguably the real issue there is lack of positive feedback, not response time.) |
|
|
| ▲ | hahahaa 16 minutes ago | parent | prev | next [-] |
| Fine, but what is the journey of the p99.9 900ms request? |
|
| ▲ | jonahrd 6 hours ago | parent | prev | next [-] |
| Am I crazy if for something like an online purchase, I kind of expect it to take a second or two to process the payment, so I would assume something went wrong if it was 200ms? |
| |
| ▲ | antonymoose 5 hours ago | parent | next [-] | | I’ve definitely had in the UX side a situation where the PM/Owner types asked me to introduce a delay in the “disabled button with loading spinner” such that the user sees it for a visible amount of time because our API was too fast for their taste. | | |
| ▲ | mrloop 4 hours ago | parent [-] | | Yes similar here, async operation that could be quick enough not to warrant a busy state, but not all the time. So rather than show a flash of busy state, that makes the ui look janky when the operation is quick, show the busy state for a minimum amount of time |
| |
| ▲ | clickety_clack 2 hours ago | parent | prev | next [-] | | I don’t think a visa transaction can go faster than about a half second so definitely something off there. | |
| ▲ | jameshart 3 hours ago | parent | prev | next [-] | | It only inserts a sku and a quantity into a Postgres database - yeah, there’s a few things missing from this purchase scenario. Might have been better to have made it clicking a ‘like’ button. | |
| ▲ | JoeBOFH 6 hours ago | parent | prev | next [-] | | Same, I call it the perception of work. | | |
| ▲ | dagi3d 5 hours ago | parent [-] | | I remember prior de AI era, it was a common pattern to for some delay in the answers to make it feel more "human" |
| |
| ▲ | blue_sauce_bean 5 hours ago | parent | prev | next [-] | | Your comment reminded me of when Google introduced "Instant Search" in 2010. Here's an old HN thread from the launch: https://news.ycombinator.com/item?id=1672391 | | |
| ▲ | dataflow 5 hours ago | parent | next [-] | | That was terrible, I used to always turn it off. It's like speaking one word and the person interrupting you based on the prefix you had uttered so far... every single darn word. Imagine writing "how do I kill" and having it assume you meant a living being rather than a program. | |
| ▲ | eterm 5 hours ago | parent | prev [-] | | No-one mourned when that one went to the Google Graveyard. |
| |
| ▲ | 1986 5 hours ago | parent | prev [-] | | IIRC TurboTax has a bunch of loaders / spinners like this, similar idea. | | |
|
|
| ▲ | beders 6 hours ago | parent | prev | next [-] |
| This is magnificent! Gave me roller-coaster ride across 40 years of gathering knowledge about computers and networks. I'm very jealous of whoever created that. Well done! |
| |
| ▲ | LeBit 5 hours ago | parent | next [-] | | You are not jealous. You are envious. Homer explains it best https://youtu.be/Tmx1jpqv3RA | | |
| ▲ | beders 4 hours ago | parent | next [-] | | I can always rely on hacker news to improve my English | |
| ▲ | samlinnfer an hour ago | parent | prev | next [-] | | Not really, jealous is defined as envious (being envious is one of the definitions of being jealous). For common usage they are equivalent, e.g. I'm jealous of X is the same as I'm envious of X. | | |
| ▲ | sriram_malhar 30 minutes ago | parent [-] | | They may be equivalent in common parlance, but that’s a bit like saying it is ok to use ‘your’ instead of “you’re” just because it is so common. We say “jealously guarded’ not ‘enviously guarded’ for a reason. Jealousy is about being protective of your own possessions and relationships; you feel jealousy if your spouse responds well to a coworker’s flirtations. Envy is when you find think of the coworker’s luck in having a good looking spouse |
| |
| ▲ | mittermayr 5 hours ago | parent | prev [-] | | thanks for posting this, I just shared this with everyone in the room here and nobody knew the difference. |
| |
| ▲ | stevepotter an hour ago | parent | prev | next [-] | | I once asked a question like this for an interview. "Tell me what happens when you press the Buy button on a web site". It really helped me gauge a sense for the person's interests and expertise. Like some folks just talked about javascript and some node code. Others talked about tcp a bit, some got into cloud stuff. It was really telling. Not bad or good, just a great way to learn where someone's head is at and was a fun back-and-forth conversation. This web site is basically a cheat code for that question lol. So well done, kudos to the author. Bookmarked and shared | |
| ▲ | ahofmann 6 hours ago | parent | prev [-] | | While I also enjoyed it very much, some thing are strangely ordered and not how I would expect someone with such knowledge of all the moving parts in a request, would build such a site. So for me it feels like an LLM has build it and the human with the prompt saw it and said "eh, good enough". | | |
| ▲ | mimischi 6 hours ago | parent [-] | | Agreed. This reeks LLM writing with no human oversight, or at least a human with no writing experience. The text underneath “The Click” is an immediate giveaway: > Five milliseconds of hardware and browser bookkeeping before a single byte leaves the laptop. I don’t even know how to describe it, but the “[…] before X” sentence style stands out to me. |
|
|
|
| ▲ | sqemo an hour ago | parent | prev | next [-] |
| Great read. I was already familiar with the overall concept, but the step-by-step, chronological explanation made it much easier to understand. Highly recommended for infrastructure engineers, solution architects, and developers. |
|
| ▲ | jvanderbot 2 hours ago | parent | prev | next [-] |
| > "The internet" Classic software engineer perspective. I have good friends who build their entire career between "ISP" and "Load Balancer" |
|
| ▲ | gregsadetsky 3 hours ago | parent | prev | next [-] |
| Also see this classic: https://github.com/alex/what-happens-when "What happens when you type google.com into your browser's address box and press enter?" |
|
| ▲ | rictic 4 hours ago | parent | prev | next [-] |
| I'd be impressed with a touchpad and OS that can go from an actuation to a userspace process receiving a click event in 1.2ms. I'd expect something more like 10x that. My understanding is that most hardware samples between 90-130Hz, and even premium hardware only samples at 250Hz which would average 2ms before the kernel is aware. |
|
| ▲ | Cabbache 5 hours ago | parent | prev | next [-] |
| This is very nice and for me especially because I've tried to think about it before your post. I think you can write a very long book if you go really into detail such as the underlying physics for wifi starting from maxwell's equations, how specific CPU architectures execute one instruction at a hardware level and maybe more in depth discussion about the math and cryptography within TLS. |
|
| ▲ | Animats 4 hours ago | parent | prev | next [-] |
| So why does it take 5-10 seconds from card presented to accepted at Starbucks and CVS? |
| |
| ▲ | kasey_junk 4 hours ago | parent | next [-] | | Usually the dominant time is from POS to acceptor. These are frequently still on high latency links. Also a lot of times in person payment flows allow a lot more in their latency budget because it won’t impact the sale, you won’t walk out because of a second here or there, unlike online. So systems aren’t as optimized, they route to older systems, marketing or further risk checks are added, and a broader range of accepted services that have higher latency (ent/snap processors and the like). | |
| ▲ | jameshart 3 hours ago | parent | prev [-] | | This scenario does not include payment. Would be much more interesting if it did. |
|
|
| ▲ | semiquaver 3 hours ago | parent | prev | next [-] |
| > A problem repeatedly occurred on "https://200ms.thenodebook.com/#act-O-prologue”
I find this usually is caused by being too clever with layouts. |
|
| ▲ | joshstrange 5 hours ago | parent | prev | next [-] |
| > Violet marks the data as it moves, always top to bottom. Nothing else on the page uses that color. Proceeds to use that color for tooltips, text color, headers, and more This was a really cool visualization but that ^ bothered me way more than it should have. |
|
| ▲ | inerte 6 hours ago | parent | prev | next [-] |
| Back in the day "what happens when the user types a url in the address bar and press enter" used to be an interview question, and I remember nobody has ever mentioned the hardware and keyboard keys and interrupts. This post does! Pretty awesome detailed view of a request lifecycle. |
| |
| ▲ | jameshart 3 hours ago | parent | next [-] | | I’ve always wanted a version of this sort of a timeline that really lets you zoom out and in to the fractal complexity of it all. Right at the end we’re talking about updating the DOM and rendering… there’s a whole Unicode and font stack and rasterization process happening in there. | |
| ▲ | Sesse__ 4 hours ago | parent | prev | next [-] | | I once got that question, started with the keyboard switches and the interrupts, and the interviewer sighed and asked me to get to the stuff in the browser. | |
| ▲ | Carrok 6 hours ago | parent | prev [-] | | I still like this question because of exactly what you mentioned. What the interviewee does and does not mention can give you a fair bit of insight into their priors. |
|
|
| ▲ | viggio24 6 hours ago | parent | prev | next [-] |
| Wonderful page, congratulations! navigating to the end takes time but the contents and the presentation are great |
|
| ▲ | arjie 6 hours ago | parent | prev | next [-] |
| Wow, input lag is a lot lower than I thought. I thought it was a polling-based flow at some 120 Hz roughly. Good to update these numbers. |
|
| ▲ | 3dedb728-3f77 6 hours ago | parent | prev | next [-] |
| 200ms is insane, 50ms is the goal. But really, great page. Someone new could learn from it the basics of what to check when debugging web. |
| |
| ▲ | ahofmann 6 hours ago | parent [-] | | The US is so big, that 50 ms is physically not possible for everyone.
This is something that not everybody is aware of. When I as a German build something for germans, everyone who needs to wait longer than 100 ms for a request, is rightfully mad. But when I want to serve the same stuff to americans at the same speed, I have to build something completely different and much more complex. | | |
| ▲ | fragmede 4 hours ago | parent | next [-] | | Not for everyone, but most people are located in population centers with nearby PoPs. | |
| ▲ | ben_w 5 hours ago | parent | prev [-] | | > When I as a German build something for germans, everyone who needs to wait longer than 100 ms for a request, is rightfully mad. Somewhat ironic, given how many contracts here seem to come with 3 months notice periods. |
|
|
|
| ▲ | dangoodmanUT 5 hours ago | parent | prev | next [-] |
| If it was 200ms, then it had already charged the card... |
|
| ▲ | eterm 6 hours ago | parent | prev [-] |
| The CSS animation of the encrypted message overwriting the plain is utterly cool. |