[PERF DEBUG]

src/components/App.tsx

@@ -476,6 +476,8 @@ class App extends React.Component<AppProps, AppState> {
     );
   }
 
+  private __renderUI = true;
+
   public render() {
     const selectedElement = getSelectedElements(
       this.scene.getNonDeletedElements(),
@@ -505,43 +507,45 @@ class App extends React.Component<AppProps, AppState> {
           value={this.excalidrawContainerValue}
         >
           <DeviceContext.Provider value={this.device}>
-            <LayerUI
+            {this.__renderUI && (
-              canvas={this.canvas}
+              <LayerUI
-              appState={this.state}
+                canvas={this.canvas}
-              files={this.files}
+                appState={this.state}
-              setAppState={this.setAppState}
+                files={this.files}
-              actionManager={this.actionManager}
+                setAppState={this.setAppState}
-              elements={this.scene.getNonDeletedElements()}
+                actionManager={this.actionManager}
-              onCollabButtonClick={onCollabButtonClick}
+                elements={this.scene.getNonDeletedElements()}
-              onLockToggle={this.toggleLock}
+                onCollabButtonClick={onCollabButtonClick}
-              onPenModeToggle={this.togglePenMode}
+                onLockToggle={this.toggleLock}
-              onInsertElements={(elements) =>
+                onPenModeToggle={this.togglePenMode}
-                this.addElementsFromPasteOrLibrary({
+                onInsertElements={(elements) =>
-                  elements,
+                  this.addElementsFromPasteOrLibrary({
-                  position: "center",
+                    elements,
-                  files: null,
+                    position: "center",
-                })
+                    files: null,
-              }
+                  })
-              langCode={getLanguage().code}
+                }
-              isCollaborating={this.props.isCollaborating}
+                langCode={getLanguage().code}
-              renderTopRightUI={renderTopRightUI}
+                isCollaborating={this.props.isCollaborating}
-              renderCustomFooter={renderFooter}
+                renderTopRightUI={renderTopRightUI}
-              renderCustomStats={renderCustomStats}
+                renderCustomFooter={renderFooter}
-              showExitZenModeBtn={
+                renderCustomStats={renderCustomStats}
-                typeof this.props?.zenModeEnabled === "undefined" &&
+                showExitZenModeBtn={
-                this.state.zenModeEnabled
+                  typeof this.props?.zenModeEnabled === "undefined" &&
-              }
+                  this.state.zenModeEnabled
-              showThemeBtn={
+                }
-                typeof this.props?.theme === "undefined" &&
+                showThemeBtn={
-                this.props.UIOptions.canvasActions.theme
+                  typeof this.props?.theme === "undefined" &&
-              }
+                  this.props.UIOptions.canvasActions.theme
-              libraryReturnUrl={this.props.libraryReturnUrl}
+                }
-              UIOptions={this.props.UIOptions}
+                libraryReturnUrl={this.props.libraryReturnUrl}
-              focusContainer={this.focusContainer}
+                UIOptions={this.props.UIOptions}
-              library={this.library}
+                focusContainer={this.focusContainer}
-              id={this.id}
+                library={this.library}
-              onImageAction={this.onImageAction}
+                id={this.id}
-            />
+                onImageAction={this.onImageAction}
+              />
+            )}
             <div className="excalidraw-textEditorContainer" />
             <div className="excalidraw-contextMenuContainer" />
             {selectedElement.length === 1 && this.state.showHyperlinkPopup && (
@@ -820,7 +824,8 @@ class App extends React.Component<AppProps, AppState> {
 
     if (
       process.env.NODE_ENV === ENV.TEST ||
-      process.env.NODE_ENV === ENV.DEVELOPMENT
+      process.env.NODE_ENV === ENV.DEVELOPMENT ||
+      process.env.REACT_APP_VERCEL_ENV === "preview"
     ) {
       const setState = this.setState.bind(this);
       Object.defineProperties(window.h, {
@@ -6203,7 +6208,8 @@ declare global {
 
 if (
   process.env.NODE_ENV === ENV.TEST ||
-  process.env.NODE_ENV === ENV.DEVELOPMENT
+  process.env.NODE_ENV === ENV.DEVELOPMENT ||
+  process.env.REACT_APP_VERCEL_ENV === "preview"
 ) {
   window.h = window.h || ({} as Window["h"]);
 

src/excalidraw-app/collab/Collab.tsx

@@ -169,7 +169,8 @@ class Collab extends PureComponent<Props, CollabState> {
 
     if (
       process.env.NODE_ENV === ENV.TEST ||
-      process.env.NODE_ENV === ENV.DEVELOPMENT
+      process.env.NODE_ENV === ENV.DEVELOPMENT ||
+      process.env.REACT_APP_VERCEL_ENV === "preview"
     ) {
       window.collab = window.collab || ({} as Window["collab"]);
       Object.defineProperties(window, {

src/excalidraw-app/index.tsx

@@ -84,6 +84,53 @@ import { jotaiStore, useAtomWithInitialValue } from "../jotai";
 import { reconcileElements } from "./collab/reconciliation";
 import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
 
+const TIMES_AGGR: Record<string, { t: number; times: number[] }> = {};
+const TIMES_AVG: Record<string, { times: number[] }> = {};
+
+window.DEBUG_LOG_TIMES = true;
+
+setInterval(() => {
+  if (window.DEBUG_LOG_TIMES) {
+    for (const [name, { t, times }] of Object.entries(TIMES_AGGR)) {
+      if (times.length) {
+        console.info(
+          name,
+          times.reduce((a, b) => a + b),
+          times.sort((a, b) => a - b),
+        );
+        TIMES_AGGR[name] = { t, times: [] };
+      }
+    }
+    for (const [name, { times }] of Object.entries(TIMES_AVG)) {
+      if (times.length) {
+        console.info(
+          name,
+          parseFloat(
+            (times.reduce((a, b) => a + b) / times.length).toPrecision(5),
+          ),
+          times.sort((a, b) => a - b),
+        );
+        TIMES_AVG[name] = { times: [] };
+      }
+    }
+  }
+}, 1000);
+
+window.logTime = (name: string, time?: number) => {
+  const { t, times } = (TIMES_AGGR[name] = TIMES_AGGR[name] || {
+    t: 0,
+    times: [],
+  });
+  if (t) {
+    times.push(time != null ? time : Date.now() - t);
+  }
+  TIMES_AGGR[name].t = Date.now();
+};
+window.logTimeAverage = (name: string, time: number) => {
+  const { times } = (TIMES_AVG[name] = TIMES_AVG[name] || { times: [] });
+  times.push(time);
+};
+
 polyfill();
 window.EXCALIDRAW_THROTTLE_RENDER = true;
 

src/global.d.ts

@@ -16,6 +16,9 @@ interface Window {
   EXCALIDRAW_EXPORT_SOURCE: string;
   EXCALIDRAW_THROTTLE_RENDER: boolean | undefined;
   gtag: Function;
+  logTime: (name: string, time?: number) => void;
+  logTimeAverage: (name: string, time: number) => void;
+  DEBUG_LOG_TIMES: boolean;
 }
 
 // https://github.com/facebook/create-react-app/blob/ddcb7d5/packages/react-scripts/lib/react-app.d.ts

src/renderer/renderScene.ts

@@ -310,6 +310,8 @@ const renderLinearElementPointHighlight = (
   context.restore();
 };
 
+let t = performance.now();
+
 export const _renderScene = ({
   elements,
   appState,
@@ -330,6 +332,8 @@ export const _renderScene = ({
     if (canvas === null) {
       return { atLeastOneVisibleElement: false };
     }
+    window.logTimeAverage("renderScene", performance.now() - t);
+    t = performance.now();
     const {
       renderScrollbars = true,
       renderSelection = true,