Patchfox feels much faster

[jedahan]

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]

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

[jedahan]

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]

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]

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]

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]

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]

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]

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

[christianbundy]

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. 🤷‍♂️ 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]

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

[christianbundy]

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

[arj03]

@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]

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]

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]

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]

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]

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

[jedahan]

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