⚡ Add general performance micro optimizations

frontend/src/app/main/ui/shapes/frame.cljs

@@ -41,7 +41,7 @@
                           :transform transform}))
           path? (some? (.-d props))]
       [:clipPath.frame-clip-def {:id (frame-clip-id shape render-id) :class "frame-clip"}
-       (if path?
+       (if ^boolean path?
          [:> :path props]
          [:> :rect props])])))
 
@@ -51,36 +51,36 @@
   {::mf/wrap-props false}
   [props]
 
-  (let [shape (obj/get props "shape")
+  (let [shape     (unchecked-get props "shape")
-        children (obj/get props "children")
+        children  (unchecked-get props "children")
 
         {:keys [x y width height show-content]} shape
         transform (gsh/transform-str shape)
 
         render-id (mf/use-ctx muc/render-id)
 
-        props (-> (attrs/extract-style-attrs shape render-id)
+        props     (-> (attrs/extract-style-attrs shape render-id)
-                  (obj/merge!
+                      (obj/merge!
-                   #js {:x x
+                       #js {:x x
-                        :y y
+                            :y y
-                        :transform transform
+                            :transform transform
-                        :width width
+                            :width width
-                        :height height
+                            :height height
-                        :className "frame-background"}))
+                            :className "frame-background"}))
         path? (some? (.-d props))]
     [:*
      [:g {:clip-path (when (not show-content) (frame-clip-url shape render-id))}
       [:& frame-clip-def {:shape shape :render-id render-id}]
 
       [:& shape-fills {:shape shape}
-       (if path?
+       (if ^boolean path?
          [:> :path props]
          [:> :rect props])]
 
       children]
 
      [:& shape-strokes {:shape shape}
-      (if path?
+      (if ^boolean path?
         [:> :path props]
         [:> :rect props])]]))
 

frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs

@@ -31,11 +31,10 @@
   (if (.isArray js/Array value)
     (->> value
          (remove (fn [change]
-                   (or
+                   (or (= "data-loading" (.-attributeName change))
-                    (= "data-loading" (.-attributeName change))
+                       (and (= "attributes" (.-type change))
-                    (and (= "attributes" (.-type change))
+                            (= "href" (.-attributeName change))
-                         (= "href" (.-attributeName change))
+                            (str/starts-with? (.-oldValue change) "http"))))))
-                         (str/starts-with? (.-oldValue change) "http"))))))
     [value]))
 
 (defn- create-svg-blob-uri-from

frontend/src/app/util/time.cljs

@@ -48,7 +48,7 @@
 (defn duration
   [o]
   (cond
-    (integer? o)  (.fromMillis Duration o)
+    (number? o)   (.fromMillis Duration o)
     (duration? o) o
     (string? o)   (.fromISO Duration o)
     (map? o)      (.fromObject Duration (clj->js o))
@@ -239,6 +239,25 @@
    (when v
      (let [v (if (datetime? v) (format v :date) v)
            locale (obj/get locales locale)
-           f (-> (.-formatLong ^js locale)
+           f (.date (.-formatLong locale) v)]
-                 (.date v))]
+       (->> #js {:locale locale}
-       (dateFnsFormat v f #js {:locale locale})))))
+            (dateFnsFormat v f))))))
+
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Measurement Helpers
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn tpoint
+  "Create a measurement checkpoint for time measurement of potentially
+  asynchronous flow."
+  []
+  (let [p1 (.now js/performance)]
+    #(duration (- (.now js/performance) p1))))
+
+(defn tpoint-ms
+  "Create a measurement checkpoint for time measurement of potentially
+  asynchronous flow."
+  []
+  (let [p1 (.now js/performance)]
+    #(- (.now js/performance) p1)))

frontend/src/app/worker/thumbnails.cljs

@@ -7,12 +7,14 @@
 (ns app.worker.thumbnails
   (:require
    ["react-dom/server" :as rds]
+   [app.common.data.macros :as dm]
    [app.common.logging :as log]
    [app.common.uri :as u]
    [app.config :as cf]
    [app.main.fonts :as fonts]
    [app.main.render :as render]
    [app.util.http :as http]
+   [app.util.time :as ts]
    [app.worker.impl :as impl]
    [beicon.core :as rx]
    [debug :refer [debug?]]
@@ -21,7 +23,6 @@
 
 (log/set-level! :trace)
 
-
 (defn- handle-response
   [{:keys [body status] :as response}]
   (cond
@@ -135,14 +136,15 @@
 (defmethod impl/handler :thumbnails/render-offscreen-canvas
   [_ ibpm]
   (let [canvas (js/OffscreenCanvas. (.-width ^js ibpm) (.-height ^js ibpm))
-        ctx    (.getContext ^js canvas "bitmaprenderer")]
+        ctx    (.getContext ^js canvas "bitmaprenderer")
+        tp     (ts/tpoint-ms)]
 
     (.transferFromImageBitmap ^js ctx ibpm)
 
     (->> (.convertToBlob ^js canvas #js {:type "image/png"})
          (p/fmap (fn [blob]
-                   (js/console.log "[worker]: generated thumbnail")
                    {:result (.createObjectURL js/URL blob)}))
          (p/fnly (fn [_]
+                   (log/debug :hint "generated thumbnail" :elapsed (dm/str (tp) "ms"))
                    (.close ^js ibpm))))))