3 ms·
> Latency: Part of the page loads, and then the page asks for more data. In some cases, (such as loading a page hosted on another continent,) this is bound by t
by giantrobot 4y ago
> Latency: Part of the page loads, and then the page asks for more data. In some cases, (such as loading a page hosted on another continent,) this is bound by the speed of light.
This problem is exacerbated by the fact that web pages are just built as giant JavaScript applications for no reason. With a page pretending to be an app, the browser has to download, parse, and execute the JavaScript core before the browser can do anything. All of the resources are hidden somewhere inside the application and the browser is stuck with its thumb up its ass unable to load or do anything.
Sites using a bunch of JavaScript to "render" everything client side are causing their own stupid problems. I just built a toy React app that only displays Hello World. It's the most trivial app that isn't just a blank project. A production build of it weighs in at 143kB for just the JavaScript portion. It's also multiple resource requests just to load that crap. Even bundled into an HTML skeleton it's still 145kB of JavaScript to run before the browser can do anything else.
Served locally it takes about 20ms to load that React app and draw something on my screen. An HTML copy of Frankenstein (463kB) loaded from the same server loaded in 5ms. A plain HTML document three times the size of the toy React "app" loaded in a quarter of the time!
> Writing a web page to load everything very quickly in a single request is surprisingly hard, and will often break modern and easily understood design patterns.
I find this to be an odd take. This nearly 4,000 word CNN article[0] including graphics weighs in at 70kB. The HTML alone including a bunch of inline styling (tables, font tags, etc) weighs only 55kB. With no graphics loaded it is still a perfectly readable article. Loading the HTML of that page in my above test it still loads in 5ms and is 100% readable.
Not just that but I can navigate with the sidebars and headers. In less space than just a toy React app I've got a completely usable page that can display as close to instantly as my eyes can determine. There's nothing about "modern and easily understood design patterns" that requires hundreds of kB of JavaScript or even extra CSS. It would be trivial to replace the table and font tags with CSS in the header and likely get the whole document even smaller while keeping 100% of the functionality and navigation.
The CNN article example coincidentally shows how stupid the JavaScript bloat problem is because several of the images are not found and the 404 pages CNN is returning in their place are a megabyte.
[0] http://www.cnn.com/TECH/computing/9806/24/win98.idg/index.html http://www.cnn.com/TECH/computing/9806/24/win98.idg/index.ht...