On Saturday, July 4, 2015 at 12:42:36 AM UTC+10, Russell Dunphy wrote: > Does anyone have any tips for performance tuning a reagent/re-frame > application they can share? We're running into very slow rendering > performance when changing pages on Firefox on Windows (ie sometimes several > seconds) which, though still noticeably laggy, don't seem to be anywhere near > as much of a problem in Chrome. > > Unfortunately I can't share the codebase, but here's what we've been trying > so far: > > Using React.addons.Perf to identify components that take more data than they > need as arguments - i.e their render function is called with changed data but > they don't end up generating different markup. This has helped us reduce > *re-render* performance, but doesn't help us much on initial page render, > where is where our performance problems mainly lie. > > Wrapping all our subscriptions using our own [custom register sub > function](https://gist.github.com/rsslldnphy/5c937167380dd3442076) to track > how many times each subscription is called, how long it takes etc, to reduce > duplicated work and highlight inefficiences. This has helped us a bit, but > slowness still remains. > > To give a slightly better UX when moving between pages, we first update the > app state with a key that causes a loading spinner to appear, then call > reagent/flush to make sure it's rendered, *then* update the app state again > to trigger the change to the new page. This still ends up being a bit jerky > however (the gif often freezes while the page is rendering, or itself takes a > while to appear) so any better suggestions would be very welcome. >
I'm wondering if clairvoyant might be useful to you in tracking this down. (I'm genuinely not sure, so just throwing it out there). https://github.com/spellhouse/clairvoyant Some time ago, I described the plan of attack for using clairvoyant with re-frame here: https://github.com/Day8/re-frame/issues/34#issuecomment-82967304 The key thing about that plan is that it allows you can then observe the entire flow. If you wanted to, you could probably hack clairvoyant to give you performance profiling on each step as well. In that github comment, it notes some problems. The good news is that two of them are fixed. We put in two PRs for clairvoyant: 1. one of them improves the display of functions in hiccup 2. one of them means you can switch off clairvoyant in production I think the output would be interesting. You'd be able to see exactly what event handlers are running, what subscriptions are firing as a result, and what views are re-rendering. The results can sometimes be surprising. Also, sorry to ask the obvious but: are you testing with devtools open? In some cases, that can massively slow things down, and can give you the impression of a dog slow app, when, in fact, with devtools closed speed is kinda acceptable. Just a thought. Cheers, Mike -- Note that posts from new members are moderated - please be patient with your first post. --- You received this message because you are subscribed to the Google Groups "ClojureScript" group. To unsubscribe from this group and stop receiving emails from it, send an email to clojurescript+unsubscr...@googlegroups.com. To post to this group, send email to clojurescript@googlegroups.com. Visit this group at http://groups.google.com/group/clojurescript.
