From 41200ea28d90d9d54d1af66d2d7a2126bd8cff51 Mon Sep 17 00:00:00 2001 From: dwelle Date: Sat, 20 Aug 2022 11:53:05 +0200 Subject: [PATCH] [PERF DEBUG] --- src/components/App.tsx | 84 +++++++++++++++------------- src/excalidraw-app/collab/Collab.tsx | 3 +- src/excalidraw-app/index.tsx | 47 ++++++++++++++++ src/global.d.ts | 3 + src/renderer/renderScene.ts | 4 ++ 5 files changed, 101 insertions(+), 40 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index 4314c3d35..8b2689ce1 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -476,6 +476,8 @@ class App extends React.Component { ); } + private __renderUI = true; + public render() { const selectedElement = getSelectedElements( this.scene.getNonDeletedElements(), @@ -505,43 +507,45 @@ class App extends React.Component { value={this.excalidrawContainerValue} > - - this.addElementsFromPasteOrLibrary({ - elements, - position: "center", - files: null, - }) - } - langCode={getLanguage().code} - isCollaborating={this.props.isCollaborating} - renderTopRightUI={renderTopRightUI} - renderCustomFooter={renderFooter} - renderCustomStats={renderCustomStats} - showExitZenModeBtn={ - typeof this.props?.zenModeEnabled === "undefined" && - this.state.zenModeEnabled - } - showThemeBtn={ - typeof this.props?.theme === "undefined" && - this.props.UIOptions.canvasActions.theme - } - libraryReturnUrl={this.props.libraryReturnUrl} - UIOptions={this.props.UIOptions} - focusContainer={this.focusContainer} - library={this.library} - id={this.id} - onImageAction={this.onImageAction} - /> + {this.__renderUI && ( + + this.addElementsFromPasteOrLibrary({ + elements, + position: "center", + files: null, + }) + } + langCode={getLanguage().code} + isCollaborating={this.props.isCollaborating} + renderTopRightUI={renderTopRightUI} + renderCustomFooter={renderFooter} + renderCustomStats={renderCustomStats} + showExitZenModeBtn={ + typeof this.props?.zenModeEnabled === "undefined" && + this.state.zenModeEnabled + } + showThemeBtn={ + typeof this.props?.theme === "undefined" && + this.props.UIOptions.canvasActions.theme + } + libraryReturnUrl={this.props.libraryReturnUrl} + UIOptions={this.props.UIOptions} + focusContainer={this.focusContainer} + library={this.library} + id={this.id} + onImageAction={this.onImageAction} + /> + )}
{selectedElement.length === 1 && this.state.showHyperlinkPopup && ( @@ -820,7 +824,8 @@ class App extends React.Component { 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"]); diff --git a/src/excalidraw-app/collab/Collab.tsx b/src/excalidraw-app/collab/Collab.tsx index 7112671c4..320cd50ef 100644 --- a/src/excalidraw-app/collab/Collab.tsx +++ b/src/excalidraw-app/collab/Collab.tsx @@ -169,7 +169,8 @@ class Collab extends PureComponent { 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, { diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx index 3f059e6d8..07bfac1fc 100644 --- a/src/excalidraw-app/index.tsx +++ b/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 = {}; +const TIMES_AVG: Record = {}; + +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; diff --git a/src/global.d.ts b/src/global.d.ts index 266957cf9..3f8856c6a 100644 --- a/src/global.d.ts +++ b/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 diff --git a/src/renderer/renderScene.ts b/src/renderer/renderScene.ts index 8ac1e1ab7..ab66c903e 100644 --- a/src/renderer/renderScene.ts +++ b/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,