HN

Comments (75)

• nightpool
  The chat example here doesn't really seem to work for me—I get 32 FPS consistently no matter what the chat settings are. Maybe a Chrome thing? Or an M3 thing?
• nerdralph
  I agree with most of the article, but would clarify the following: > For the screen to look smooth, frames have to be drawn at the display’s refresh rate. On the most common 60Hz display, that means 60 frames per second, or about 16.6 milliseconds per frame.It isn't absolutely necessary to match the display refresh rate. With a 144Hz monitor, 72FPS is going to look smooth for the vast majority of the people, and even 48FPS will look smooth for most people. I agree that higher FPS is better, but there are diminishing returns.
• Menu

  martinald
  Good article and I wish this was much better known.The issue is though that it's too focused on interactivity. In reality, 90%++ of slow sites are not slow because of interactivity really, they are slow because they ship enormous react/nextjs bundles and have extremely heavy hydration work to do._so many_ sites have bundles >10MB that need to be downloaded, parsed and hydrated.I've even seen (many) sites which have multiple SPAs stacked inside of them.If you're on a slow internet connection and/or CPU the page is basically unusable for many tens of seconds and no amount of yielding post bundle hydrate will really solve that.
• mikemarsh
  I remember seeing some JS cryptography library a long time (maybe 10 years?) ago that provided an async hashing function for exactly this reason: to split up what would normally be a simple synchronous computation and yield more often to the main thread.Can't recall the name, but I remember thinking that was very clever once I understood why it was doing that, and am glad to see the concept explained directly here.
• gwbas1c
  FYI: This isn't a browser-only thing. All platforms (Windows, Mac, ios, android) typically have a single-threaded UI.
• Menu

  jkhdigital
  This article concludes with the following statement:> So much of development is trade-offs, and you have to choose according to the situation, which ultimately comes down to the developer’s experience and judgment.It’s a great article, but I think it is a bit behind the ball in framing scheduling problems as a matter of “experience and judgment”. The problem of allocating work to a scarce resource is one of the oldest and most well-studied in all of computer science. It would make sense to go consult a textbook on the matter before trying to reinvent the wheel.
• larodi
  Top article, kudos! applied some of these techniques previously, and they do matter a lot. thing is, when you learn/teach JS there is usually limited time left to talk these topics, and they are essential more than it seems.the whole point of cooperative multitasking is to yield now and then (back to the runner), so that it can process the drawing. Besides, at 60fps there's so much that can be computed once every N frames, and the eye does not see it, the animation flows.It becomes even more interesting when webgpu is involved, but the CSS animator is indeed very fast.note: some recent work of mine (newskool digital flyer sites) -> bsf.hmsu.org // nouveauxhivers.dub4powder.xyz
• Menu

  piker
  Great piece, OP. We work in WASM and are considering web workers to help with rendering documents off the main thread in that context. I was surprised to read that ArrayBuffer is moved by reference only! Might be an option. Thanks for putting this together.
• jonathanlydall
  Superb article.There was very little new information for me as I have applied some of these techniques myself based on having developed an intuitive understanding on how a rendering "thread" works and blocks, but for a less experienced developer this article should be incredibly enlightening and provide a solid understanding of what's happening.I employed use of yielding on a hobby project [0] I made about 15 years ago, particularly when it had to do lots of draw operations on a canvas. I also experimented with using worker threads to render pieces of it on a background thread, but at the time there was no way to copy the data efficiently between them and the main thread, one had to send the data as a base64 encoded PNG and the overhead of encoding, decoding and then copying it onto the canvas made it perform far worse than just doing it all on the main thread.The website also does Gzip decoding of uploaded files in JavaScript and the library I found at the time did all the work synchronously so could lock up the UI thread easily for 10+ seconds. I tweaked it to be able to yield every 200ms or something, the process of which was very educational, particularly due to it convincing me to never omit the curly braces after an if statement, I spent a very long time trying to understand why it wasn't working until eventually I realized a statement I added wasn't in the if statement's block. It's not that I didn't understand how if statements worked, it's that in my mind the lack of curly braces was initially invisible to me.[0]: https://mordritch.com/mc_rss/
• xnorswap
  Excellent article, I went into it thinking the headline is obvious, but the examples are well crafted and it isn't just the obvious stuff.
• eviks
  > Press a button: the JS animation and typing freeze, but the CSS animation keeps spinningHow do you expect me to type if pressing a button moved text focus away from the text field?
• Menu

  bob1029
  If you are currently trying to build a web-based clone of something approximating ChatGPT, pretty much everything in this article is absolutely mandatory.The streaming response UI/UX is a total nightmare to make work smoothly. You have to come up with clever heuristics around where to chop up the stream of changes and how to batch the work relative to frame updates to make it not look like confetti during a streaming response.
• pmkary
  I learned these lessons from many separate places and have always wished to see them in one place. This was an incredibly great article that I very much enjoyed reading and will be sending to anyone who's in need of ideas about speed. Thanks a lot!
• anon
  undefined
• doginasuit
  This was so incredibly helpful and well presented.
• Menu

  nairboon
  In the first example: doesn't pushing the button while typing cause the textfield lose focus? What's the point of the typing in the example?
• andai
  Brilliant, I had no idea about this stuff. Thanks for writing it up.On the price ticket example, on my device (Samsung A15, mediocre phone from 2024) I get 11 fps with the slow example and 30 fps with the fast one. (15 if I scroll!)Is that a case of the back pressure you mentioned?All the other (fast) examples are 60 fps though :)
• Tepix
  Nice examples, a bit repetetive perhaps.One thing that I found quite interesting to see is how the behaviour of the "4.000 particles" demo changes between the 5ms rendering and the "everything now" rendering.
• Ayesh
  Such an excellently written articles with really nice interactive visualizations!
• monxer
  One obvious tool that this article doesn't mention is Chrome's performance monitor. Many techniques in the article only have to be applied once you can verify that they are running slow.
• CommonGuy
  Reminds me of sprinkling DoEvents all over my VBA code to keep it "snappy" when I started to get into programming
• Menu

  adzm
  I wish await in JavaScript could conditionally yield. Instead I end up having to use arounds like if (shouldYield()) await do yield();
• mediumsmart
  great article - explains in detail why my sans js websites run so smoothly and so fast.
• Menu

  prodigycorp
  I want to do a blanket response to people calling this AI slop: the post was written in korean and translated to english. Calling this slop is judgment slop.
• sylware
  The javascript web is. Restore the interop with noscript/basic HTML and it will lean towards sanity, something lost a few years ago.
• Menu

  mschuster91
  > So what if off-screen posts were left as empty shells that only take up their height, and got filled with real content as they approach the screen?Yeah fuck everyone doing that, hello Reddit, Outlook for Web or Bluesky. It makes searching on such "feed" pages with the browser's search function an utter pain in the ass, made worse by the fact that the platforms' own search functions are outright braindead.
• Menu

  ahartmetz
  Yeah, but if your website with, you know, text and stuff, doesn't do any stupid and unnecessary crap, it doesn't matter where the nonexistent unnecessary yet expensive code doesn't run.
• TIMEFOLD
  localStorage is a webworker
• abla2
  [flagged]
• anon
  undefined
• TIMEFOLD
  [flagged]
• TIMEFOLD
  [flagged]
• Menu

  shevy-java
  So this is AI slop written? Why would anyone believe I'd want to read AI spam?Also, the issue I see is who controls browsers as much more profound. We need to find a solution here, as the browser is too important to allow private companies to keep mankind hostage.Edit: Wow, and the praise-accounts. Is that new on hackernews?
• TIMEFOLD
  DELETE ARTICLE BACK PRESSURE! .FLIGHT §%=
• Menu

  Lebenita
  AI;DR – too bad as the content seems to be worthwhile, but then why not take the trouble to write it up yourself. Have it proofread/edited/spruced up all you want afterward, but don't have it do all (or most of) the writing.
• tobiu
  Actor Model, dedicated or shared application worker. Full support for multi-window apps. Resolved since 2019. 26000 commits in, and counting. You are welcome!https://github.com/neomjs/neo/blob/dev/learn/benefits/body/O...
• vbezhenar
  This mistake gets repeated over and over again, in every single GUI framework of any kind. I don't understand why does it have to be that way.Just use multi-threading. Run each library in a separate thread. Use actors approach to pass data between libraries, application and finally to submit data to update GUI.Using single thread for everything and expecting that developer will create separate threads for heavy work is obvious approach, but it never worked. Developer doesn't care. And user gets inferior experience.