From b7e1e54a922dfc01f7b272cd72a88042104b4661 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Sun, 14 May 2023 18:55:11 +0200 Subject: [PATCH] :zap: Add general performance micro optimizations --- frontend/src/app/main/ui/shapes/frame.cljs | 26 +++++++++--------- .../shapes/frame/thumbnail_render.cljs | 9 +++---- frontend/src/app/util/time.cljs | 27 ++++++++++++++++--- frontend/src/app/worker/thumbnails.cljs | 8 +++--- 4 files changed, 45 insertions(+), 25 deletions(-) diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs index a8e4a43b1..61afbb1ad 100644 --- a/frontend/src/app/main/ui/shapes/frame.cljs +++ b/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") - children (obj/get props "children") + (let [shape (unchecked-get props "shape") + 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) - (obj/merge! - #js {:x x - :y y - :transform transform - :width width - :height height - :className "frame-background"})) + props (-> (attrs/extract-style-attrs shape render-id) + (obj/merge! + #js {:x x + :y y + :transform transform + :width width + :height height + :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])]])) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs index 8dbf52544..3c658bdcb 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs +++ b/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 - (= "data-loading" (.-attributeName change)) - (and (= "attributes" (.-type change)) - (= "href" (.-attributeName change)) - (str/starts-with? (.-oldValue change) "http")))))) + (or (= "data-loading" (.-attributeName change)) + (and (= "attributes" (.-type change)) + (= "href" (.-attributeName change)) + (str/starts-with? (.-oldValue change) "http")))))) [value])) (defn- create-svg-blob-uri-from diff --git a/frontend/src/app/util/time.cljs b/frontend/src/app/util/time.cljs index eb604af39..3e9d02092 100644 --- a/frontend/src/app/util/time.cljs +++ b/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) - (.date v))] - (dateFnsFormat v f #js {:locale locale}))))) + f (.date (.-formatLong locale) v)] + (->> #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))) diff --git a/frontend/src/app/worker/thumbnails.cljs b/frontend/src/app/worker/thumbnails.cljs index e67004fd6..327d24666 100644 --- a/frontend/src/app/worker/thumbnails.cljs +++ b/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))))))