Skip to content

Commit

Permalink
add perf demo
Browse files Browse the repository at this point in the history
  • Loading branch information
roman01la committed Jul 19, 2018
1 parent ed0f439 commit f416156
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 2 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ Thease are some resources that can give you more context:
- Nested CSS selectors
- Injects styles into `<style>` tag at run-time
- Debuggable styles in development (set via `goog.DEBUG`)
- Fast, 10000 insertions in ~200ms
- Fast, 1000 insertions in under 100ms

## How it works

Expand Down
51 changes: 51 additions & 0 deletions example/src/example/perf.cljs
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
(ns example.perf
(:require-macros [cljss.core])
(:require [cljss.core :as css :refer-macros [defstyles]]
[rum.core :as rum]
[goog.dom :as gdom]))

(defstyles button [font-size]
{:color "#fff"
:background-color "rgb(0, 0, 255)"
:border-radius "5px"
:padding "8px 24px"
:border "none"
:font-size (str font-size "px")
:&:hover {:background-color "rgb(0, 0, 230)"
:font-size (str (* 1.2 font-size) "px")}
"span" {:vertical-align "middle"}})

(println "compute defstyles")
(simple-benchmark [] (button (js/Math.random)) 1000)

(rum/defc NoStylesButton []
[:button {} "button"])

(rum/defc InlineButton []
(let [font-size (* 10 (js/Math.random))]
[:button {:style {:color "#fff"
:background-color "rgb(0, 0, 255)"
:border-radius "5px"
:padding "8px 24px"
:border "none"
:font-size (str font-size "px")}}
"button"]))

(rum/defc CSSAttrButton []
(let [font-size (* 10 (js/Math.random))]
[:button {:css {:color "#fff"
:background-color "rgb(0, 0, 255)"
:border-radius "5px"
:padding "8px 24px"
:border "none"
:font-size (str font-size "px")}}
"button"]))

(println "render NoStylesButton")
(simple-benchmark [] (rum/mount (NoStylesButton) (gdom/getElement "NoStylesButton")) 1000)

(println "render InlineButton")
(simple-benchmark [] (rum/mount (InlineButton) (gdom/getElement "InlineButton")) 1000)

(println "render CSSAttrButton")
(simple-benchmark [] (rum/mount (CSSAttrButton) (gdom/getElement "CSSAttrButton")) 1000)
13 changes: 12 additions & 1 deletion project.clj
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,15 @@
:closure-defines {"goog.DEBUG" false}
:pseudo-names true
:verbose true
:pretty-print false}}]})
:pretty-print false}}
{:id "perf"
:source-paths ["src" "example/src" "example/resources"]
:compiler {:output-to "example/resources/public/js/compiled/perf.js"
:output-dir "example/resources/public/js/compiled/out-perf"
:main example.perf
:optimizations :advanced
:closure-defines {"goog.DEBUG" false}
:static-fns true
:fn-invoke-direct true
:verbose true
:pretty-print false}}]})

0 comments on commit f416156

Please sign in to comment.