The Browser's Main Thread Is Expensive

(kciter.so)

41 points | by kciter 1 day ago

8 comments

  • xnorswap 3 minutes ago
    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.
  • piker 13 minutes ago
    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.
  • adzm 9 minutes ago
    I wish await in JavaScript could conditionally yield. Instead I end up having to use arounds like if (shouldYield()) await do yield();
    • baxuz 5 minutes ago
      There's an RFC or two to spawn threads so I'm looking forward to that. The current way of workers + messages is tedious as hell.
  • Tepix 18 minutes ago
    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.

  • nairboon 36 minutes ago
    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?
    • lintfordpickle 15 minutes ago
      I think the point is, if you click the '2.0s' button, you cannot re-focus on the input field for those 2 seconds.
  • Ayesh 50 minutes ago
    Such an excellently written articles with really nice interactive visualizations!
  • TechLatestnet 9 minutes ago
    [flagged]
  • ahartmetz 47 minutes ago
    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.
    • another-dave 17 minutes ago
      and if you have no website at all, it takes zero seconds to load.

      But for people who are developing websites that are more than just text, this is an excellently written article and great advice.

      It's funny, for mobile app dev it feels like the community are a lot of focused on staying off the main thread, this is the first time I've come across one for webdev.

    • adzm 16 minutes ago
      Well yeah but if you do actually need things like images, animations, high frequency updates, etc, this is actually a pretty good overview of how to approach it. Also learned that react uses posting to a MessageChannel to yield!
    • Tepix 17 minutes ago
      Sure, but there are sites like HN and there are sites like https://earth.nullschool.net/

      What's your point? Are you saying all animations and rendering are unnecessary?

      • ahartmetz 3 minutes ago
        My point is that many websites are using way too much technology for what they need to do, with correspondingly long load times and choppy runtime begavior.