Patchfox feels much faster

jedahan commented 4 years ago

What's the problem you want to solved? I thought with the simplicity of our client being just html, css, and links, it would be hella fast.

Is there a solution you'd like to recommend? Maybe we can start writing performance tests, and flamegraphs and all that.

jedahan commented 4 years ago

Firefox on my 13" laptop takes 15 seconds to render the inbox html

jedahan commented 4 years ago

Weight of modules on disk

┌──────────────────────┬──────────────┬─────────┐
│ name                 │ children     │ size    │
├──────────────────────┼──────────────┼─────────┤
│ ssb-client           │ 75           │ 39.15M  │
├──────────────────────┼──────────────┼─────────┤
│ @fraction/flotilla   │ 694          │ 33.99M  │
├──────────────────────┼──────────────┼─────────┤
│ sharp                │ 87           │ 32.90M  │
├──────────────────────┼──────────────┼─────────┤
│ require-style        │ 124          │ 12.18M  │
├──────────────────────┼──────────────┼─────────┤
│ highlight.js         │ 9            │ 6.59M   │
├──────────────────────┼──────────────┼─────────┤
│ ssb-markdown         │ 15           │ 2.64M   │
├──────────────────────┼──────────────┼─────────┤
│ ssb-mentions         │ 4            │ 2.11M   │
├──────────────────────┼──────────────┼─────────┤
│ koa-body             │ 13           │ 1.35M   │
├──────────────────────┼──────────────┼─────────┤
│ lodash               │ 0            │ 1.34M   │
├──────────────────────┼──────────────┼─────────┤
│ koa                  │ 46           │ 1.04M   │
├──────────────────────┼──────────────┼─────────┤
│ yargs                │ 37           │ 0.81M   │
├──────────────────────┼──────────────┼─────────┤
│ koa-static           │ 19           │ 0.57M   │
├──────────────────────┼──────────────┼─────────┤
│ koa-router           │ 9            │ 0.52M   │
├──────────────────────┼──────────────┼─────────┤
│ ssb-ref              │ 12           │ 0.48M   │
├──────────────────────┼──────────────┼─────────┤
│ ssb-config           │ 11           │ 0.21M   │
├──────────────────────┼──────────────┼─────────┤
│ ssb-thread-schema    │ 11           │ 0.16M   │
├──────────────────────┼──────────────┼─────────┤
│ hyperaxe             │ 7            │ 0.15M   │
├──────────────────────┼──────────────┼─────────┤
│ koa-mount            │ 5            │ 0.12M   │
├──────────────────────┼──────────────┼─────────┤
│ debug                │ 1            │ 0.09M   │
├──────────────────────┼──────────────┼─────────┤
│ pull-sort            │ 2            │ 0.08M   │
├──────────────────────┼──────────────┼─────────┤
│ pull-stream          │ 0            │ 0.07M   │
├──────────────────────┼──────────────┼─────────┤
│ @fraction/base16-css │ 0            │ 0.05M   │
├──────────────────────┼──────────────┼─────────┤
│ open                 │ 1            │ 0.04M   │
├──────────────────────┼──────────────┼─────────┤
│ ssb-msgs             │ 1            │ 0.04M   │
├──────────────────────┼──────────────┼─────────┤
│ pull-paramap         │ 1            │ 0.02M   │
├──────────────────────┼──────────────┼─────────┤
│ pretty-ms            │ 1            │ 0.02M   │
├──────────────────────┼──────────────┼─────────┤
│ 26 modules           │ 510 children │ 106.00M │
└──────────────────────┴──────────────┴─────────┘

christianbundy commented 4 years ago

Yep, I haven't spent any time focusing on performance and there are lots of low-hanging fruit. These low-hanging fruit have made development faster, but are definitely worth fixing. List of optimizations I'd like to make:

when we resize the image thumbnail it might be worth caching it so we don't resize every thumbnail a million times
await has been overused and has made parallelization a pain, we need Promise.all() pretty much everywhere
model methods pull completely new data every time instead of caching anything
- we could cache to the filesystem for SUPER SPEED but even just caching in memory would be cool
we should probably stream HTTP output instead of waiting for the full page to be finished

To be specific, the inbox is super slow because it's literally just streaming all private messages until it finds the latest message from the past ~60 threads. The more often you use private messages the faster the view is, but for me it's streaming 6 months of messages to find the oldest one. The 'popular' pages are doing similar work, so they're also super slow.

christianbundy commented 4 years ago

Also on the "HTTP requests are kinda slow" front, I've been trying to find a framework like this but I can't find one. Most of Oasis would work 100% fine if it was distributed as a single-page web app (plus it would be easy to demo!) without an actual HTTP server, but I want to leverage an existing technology instead of writing my own.

If you know of a tool that would let us port Oasis to an SPA, that might be super helpful.

christianbundy commented 4 years ago

Also, because I want to be super super super clear: I think we should prioritize a simple boring HTTP server and probably use it for debugging, but it would be cool to have the option of exporting some standalone index.html that runs Oasis too.

christianbundy commented 4 years ago

Relevant for optimizations: https://oasis-demo.fraction.io/thread/%250zK8uZhwMESGFkkf3svywT5cGe6V%2B9qIqHKW5ufLG00%3D.sha256#%250zK8uZhwMESGFkkf3svywT5cGe6V%2B9qIqHKW5ufLG00%3D.sha256

For example, on /public/latest:

Subscribe to the list of messages and hold the latest $max in memory
When the page is requested, respond with what we have in memory
When a new message comes through the stream, remove old messages to keep only $max in memory

Unfortunately this gets more complicated in /public/popular/day and such, because if Oasis is online for 2 days we want to make sure we aren't counting votes from previous days. The current implementation prefers simplicity over speed, but we can fix that. :~)

cinnamon-bun commented 4 years ago

If it was a SPA standalone index.html, would it still need an ssb-client outside the browser? Is it possible to run all of scuttlebutt in a browser?

cinnamon-bun commented 4 years ago

I added an experimental branch to mitigate page slowness using turbolinks.js #77

christianbundy commented 4 years ago

If it was a SPA standalone index.html, would it still need an ssb-client outside the browser? If it was a SPA standalone index.html, would it still need an ssb-client outside the browser?

I'm not sure that I understand the first question, could you rephrase or add more background info? Regarding the second question, I think yes, because I think that's what @arj03 is doing with SSB-Browser, but when I tried to browserify SSB-DB it blew up in my face. :man_shrugging: I think SSB is supposed to be able to be run in a browser, and I think my first comment about SSB on GitHub was about this use-case, but I don't know how things are going with that.

jedahan commented 4 years ago

I was thinking of https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ

christianbundy commented 4 years ago

I really like that idea, I'd be happy to add at least the navigation links to be pre-fetched.

arj03 commented 4 years ago

@christianbundy ssb-db takes a bit more work to run in the browser. There is a branch which was the starting point for ssb-browser-core. Also there is a lot of details like blobs that browser core takes care of. I'm quite happy that it made it to a point where I can add some documentation to make it easier for other people to experiment with clients. Browser demo is around 1500 lines js and that includes the html as its written in vue. Also PWA is great for startup performance because it will load things from cache always and then only afterwards see if the cache is stale.

And sorry for hijacking this thread :D

christianbundy commented 4 years ago

Awesome, thanks for that info! Do you think that SSB-DB will go back to being platform-agnostic? I could've sworn that we used to be able to browserify it, but it isn't working for me anymore. One of the things I'm trying to do is make sure I'm running the same code in both environments, so that Oasis contributors don't have to worry about whether it's over HTTP or an SPA, but it looks like maybe ssb-browser-core is an alternative to SSB-Server -- is that right?

arj03 commented 4 years ago

In time it will I think. I pushed a few fixes to some of the libraries needed, but on the other hand, having something that only runs in the browser makes it possible to run things like https://github.com/dominictarr/flumelog-aligned-offset without having to worry about backwards compatibility.

And yeah ssb-browser-core is probably closer to ssb-server than ssb-db.

christianbundy commented 4 years ago

Cool, thanks for all the info @arj03 -- I saw that you mentioned that you're working on something cool on SSB, I'm excited to see what it is. I'm suspicious that it has to do with SSB-Browser.

@jedahan Just improved the speed of the inbox page with #79, hope that helps a bit for you! Are there any other big performance hiccups that we should address before closing this issue?

jedahan commented 4 years ago

I spent some time trying to get prefetching working, but had zero success. Happy to close this issue since 'patchfox feels faster' is a bit too broad an issue, and I'd rather pinpoint specific places for performance improvment than something this general. Will test out #79 shortly!

christianbundy commented 4 years ago

Woop! Thanks for bringing this up, looking forward to future performance challenges. :eyes:

jedahan commented 4 years ago

wow that went from 15 seconds to <1s, awesome job!

fraction / oasis

Patchfox feels much faster #71