4 ms·

Clone: 22 requests | 1.1 MB transferred | Finish:2.86 s | DOMContentLoaded 636 ms | Load:2.87 ms Real Hacker News: 6 requests | 11.5 KB transferred | Finish: 3

kuschku 9y ago
That’s on first load – all future loads are significantly faster on this clone.
- codedokode 9y ago
  1.1Mb is 100 times larger than 11Kb.
  - kuschku 9y ago
    That would be the case when the bandwidth was the limit, but it’s not. The limit is in the immense latency for opening a new connection. Opening a network socket with TLS can take over 4 seconds on mobile, which is why ideally you’d even use an open websocket for communication instead of new GET requests. Navigating to a page in this version causes one or two network requests, in the real HN it takes far more just to check if the images have changed, the CSS has changed, etc.
    - codedokode 9y ago
      Using websocket looks like overengineering because HTTP/2.0 allows to use a single connection for multiple parallel requests. Using React to build a simple (student level) site like HN is overengineering too in my opinion. If you don't want to reload the page when navigating you can just reload HTML content with jQuery or fetch() without using client side rendering, without draining device battery and without loading 1 Mb of Javascript that will take much more space in RAM. SPA approach should be used for interactive applications able to work in offline mode, able to provide rich experience on mobile devices etc.
chrisco255 9y ago
They've implemented this as a SPA so all the pages are downloading at once not just the home page. Probably could be optimized with some lazy loading. Still, vanilla HN obviously has no framework so no need to download React/Apollo, etc. I'm gonna go out on a limb and assume that they're using this as a learning tool and a teaching tool. Just like no one needs a framework to implement a TO DO list, but that's the go to example app.
orange8 9y ago
What is the technical difference between Finish, DOMContentLoaded and Load?

kuschku 9y ago

That’s on first load – all future loads are significantly faster on this clone.

codedokode 9y ago
1.1Mb is 100 times larger than 11Kb.
- kuschku 9y ago
  That would be the case when the bandwidth was the limit, but it’s not. The limit is in the immense latency for opening a new connection. Opening a network socket with TLS can take over 4 seconds on mobile, which is why ideally you’d even use an open websocket for communication instead of new GET requests. Navigating to a page in this version causes one or two network requests, in the real HN it takes far more just to check if the images have changed, the CSS has changed, etc.
  - codedokode 9y ago
    Using websocket looks like overengineering because HTTP/2.0 allows to use a single connection for multiple parallel requests. Using React to build a simple (student level) site like HN is overengineering too in my opinion. If you don't want to reload the page when navigating you can just reload HTML content with jQuery or fetch() without using client side rendering, without draining device battery and without loading 1 Mb of Javascript that will take much more space in RAM. SPA approach should be used for interactive applications able to work in offline mode, able to provide rich experience on mobile devices etc.

chrisco255 9y ago

They've implemented this as a SPA so all the pages are downloading at once not just the home page. Probably could be optimized with some lazy loading. Still, vanilla HN obviously has no framework so no need to download React/Apollo, etc. I'm gonna go out on a limb and assume that they're using this as a learning tool and a teaching tool. Just like no one needs a framework to implement a TO DO list, but that's the go to example app.

orange8 9y ago

What is the technical difference between Finish, DOMContentLoaded and Load?