lynaghk / cljs-react-perf Goto Github PK

Benchmark script should run scenarios under both :simple and :advanced optimizations.

Probably the easiest way to do this is to setup a second html page that invokes the advanced complied js, and have the benchmark script reference that page.

Didn't have time to look at your full benchmark setup but you are missing two very important compiler options in your build.clj. In anything performance sensitive you want to have :static-fns true and :optimize-constants true.

Without those I get

app-2
94 ± 16

with

app-2
69 ± 17

I suppose that is a gain, don't exactly sure what the numbers stand for.

Might have some more suggestions tomorrow.

The sablono wiki suggests that Sablono can emit faster code when an element has an unambiguous attribute map.
That:

[:div {} (foo)]

is faster than

[:div (foo)]

It'd be great to:

1. Measure this difference
2. See if there's a way to have Sablono tell us when it's emitting sub-optimal code at compile time --- something like clojure's *warn-on-reflection*.

Consider a UI is derived entirely from a single state atom, where all updates go through the same codepath.

(def !state 
  (atom {}))

(rum/defc *app [app-state] ...)

(defn trigger! 
  [event]

  ;;update the application state
  (swap! !state update-state-fn event)

  ;;re-render the application state
  (.render js/ReactDOM 
           (*app trigger! @!state) 
           (.getElementById js/document "my-app")))

(trigger! :first-event-to-start-app)

One benefit of this rendering approach is that there is no distinction between the initial render and subsequent renders.
No need to keep track of a React component, add watches to the state atom, or anything like that.

One downside is that if trigger! is called multiple times within a single frame, the React render function will run needlessly multiple times, when it really only needs to run once on the latest application state for a given frame.

Would it be better to do use requestAnimationFrame or mount the component once and then call rum/request-render?
What would that look like?

Does it make a difference if you know that the *app template will or will not execute within the 16ms frame limit?

Here's a repo with some macros to optimize Rum & Sablono https://github.com/funcool/rumext
Basically there are a couple of additional compile forms for Sablono and lazy-component function which delays Rum component instantiation which improves start up time.

This perf tip comes from the sablono wiki. Would be great to have numbers.