> Press a button: the JS animation and typing freeze, but the CSS animation keeps spinning
How do you expect me to type if pressing a button moved text focus away from the text field?
The browser's main thread is expensive
71–80 of 154 posts
Re: The browser's main thread is expensive
#72Earlier quoted context omitted.
Why would a regular React site be so huge? Maybe they had bundled fonts and images. The bundle is just the lib plus your files minified. You want to bundle vs hitting dozens of requests just to get files. It’s not like React/webpack is a black box doing things I don’t know or want. Performance: I challenge you to build a complex 3D game in vanilla threejs vs using r3f. useFrame alone is worth it
What a joke of challenge, there is still no browser 3D game that is a match to Infinity Blade, that Apple used to demo OpenGL ES 3.0 hardware in 2011. Anyone serious about 3D gaming on the Web has to do streaming.
https://playcanv.as/p/MflWvdTW/
This isn't new at all, just one of the first things I found by googling "webgl demo."
WebGPU of course goes even further.
I think the real gap is just that people by-and-large aren't building real games on top of Safari. It's more lucrative to use the app store with its low-friction payment system.
Re: The browser's main thread is expensive
#73Good 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 hav…
I challenge you to browse the web one week on this laptop part of the current top 10 Amazon best sellers on a gigabit fiber connection and tell me if you still think that this is the problem: https://www.amazon.com/HP-Everyday-Processor-Microsoft-Porta...
In London in many apartment blocks one can only get wired internet via an old copper cable with speeds like 80mbit/s download in theory but in practice it can be below 30 with ping in 50ms range and much slower upload. And 5g does not help either as the signal can be very weak.
Re: The browser's main thread is expensive
#74This was so incredibly helpful and well presented.
Re: The browser's main thread is expensive
#75[flagged]
Re: The browser's main thread is expensive
#76Great 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.
ArrayBuffer is copied by default unless you pass it as a special transferable object. But only the current owner of the buffer can use it.
If you need to read and write from both threads at once, you need to look at SharedArrayBuffer.
Re: The browser's main thread is expensive
#77Yeah, 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.
You'd be surprised how expensive it is to render text, although unless your page is very large you won't see it being slow on modern systems.
I'm more surprised how cheap it is in browsers because I know it's not that easy - they are really really good at it. Pure text rendering is therefore rarely an issue.
Re: The browser's main thread is expensive
#78Earlier quoted context omitted.
Why would a regular React site be so huge? Maybe they had bundled fonts and images. The bundle is just the lib plus your files minified. You want to bundle vs hitting dozens of requests just to get files. It’s not like React/webpack is a black box doing things I don’t know or want. Performance: I challenge you to build a complex 3D game in vanilla threejs vs using r3f. useFrame alone is worth it
What a joke of challenge, there is still no browser 3D game that is a match to Infinity Blade, that Apple used to demo OpenGL ES 3.0 hardware in 2011. Anyone serious about 3D gaming on the Web has to do streaming.
ES 2.0
Re: The browser's main thread is expensive
#79Earlier quoted context omitted.
Why would a regular React site be so huge? Maybe they had bundled fonts and images. The bundle is just the lib plus your files minified. You want to bundle vs hitting dozens of requests just to get files. It’s not like React/webpack is a black box doing things I don’t know or want. Performance: I challenge you to build a complex 3D game in vanilla threejs vs using r3f. useFrame alone is worth it
What a joke of challenge, there is still no browser 3D game that is a match to Infinity Blade, that Apple used to demo OpenGL ES 3.0 hardware in 2011. Anyone serious about 3D gaming on the Web has to do streaming.
[flagged]
Re: The browser's main thread is expensive
#80FYI: This isn't a browser-only thing. All platforms (Windows, Mac, ios, android) typically have a single-threaded UI.