ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Debug] Teact: Add benchmarks for effects

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-12-10 18:33:15 +01:00
parent ebf20fa013
commit 785ac3d11a
1 changed files with 39 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/lib/teact/teact.ts
View File

@ -98,6 +98,9 @@ export type VirtualElementChildren = VirtualElement[];
const Fragment = Symbol('Fragment'); const Fragment = Symbol('Fragment');
const DEBUG_RENDER_THRESHOLD = 7;
const DEBUG_EFFECT_THRESHOLD = 7;
let renderingInstance: ComponentInstance; let renderingInstance: ComponentInstance;
export function isEmptyElement($element: VirtualElement): $element is VirtualElementEmpty { export function isEmptyElement($element: VirtualElement): $element is VirtualElementEmpty {
@ -285,13 +288,13 @@ export function renderComponent(componentInstance: ComponentInstance) {
newRenderedValue = Component(props); newRenderedValue = Component(props);
if (DEBUG) { if (DEBUG) {
const renderTime = performance.now() - DEBUG_startAt!; const duration = performance.now() - DEBUG_startAt!;
const componentName = componentInstance.name; const componentName = componentInstance.name;
if (renderTime > 7) { if (duration > DEBUG_RENDER_THRESHOLD) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.warn(`[Teact] Slow component render: ${componentName}, ${Math.round(renderTime)} ms`); console.warn(`[Teact] Slow component render: ${componentName}, ${Math.round(duration)} ms`);
} }
DEBUG_components[componentName].renderTimes.push(renderTime); DEBUG_components[componentName].renderTimes.push(duration);
DEBUG_components[componentName].renderCount++; DEBUG_components[componentName].renderCount++;
} }
} catch (err) { } catch (err) {
@ -525,7 +528,24 @@ function useLayoutEffectBase(
const { cleanup } = byCursor[cursor]; const { cleanup } = byCursor[cursor];
if (typeof cleanup === 'function') { if (typeof cleanup === 'function') {
try { try {
// eslint-disable-next-line @typescript-eslint/naming-convention
let DEBUG_startAt: number | undefined;
if (DEBUG) {
DEBUG_startAt = performance.now();
}
cleanup(); cleanup();
if (DEBUG) {
const duration = performance.now() - DEBUG_startAt!;
const componentName = componentInstance.name;
if (duration > DEBUG_EFFECT_THRESHOLD) {
// eslint-disable-next-line no-console
console.warn(
`[Teact] Slow cleanup at effect cursor #${cursor}: ${componentName}, ${Math.round(duration)} ms`,
);
}
}
} catch (err) { } catch (err) {
handleError(err); handleError(err);
} }
@ -537,7 +557,22 @@ function useLayoutEffectBase(
return; return;
} }
// eslint-disable-next-line @typescript-eslint/naming-convention
let DEBUG_startAt: number | undefined;
if (DEBUG) {
DEBUG_startAt = performance.now();
}
byCursor[cursor].cleanup = effect() as Function; byCursor[cursor].cleanup = effect() as Function;
if (DEBUG) {
const duration = performance.now() - DEBUG_startAt!;
const componentName = componentInstance.name;
if (duration > DEBUG_EFFECT_THRESHOLD) {
// eslint-disable-next-line no-console
console.warn(`[Teact] Slow effect at cursor #${cursor}: ${componentName}, ${Math.round(duration)} ms`);
}
}
} }
if (byCursor[cursor] !== undefined && dependencies && byCursor[cursor].dependencies) { if (byCursor[cursor] !== undefined && dependencies && byCursor[cursor].dependencies) {