From c56055cc72e5c88c7a2fa42ac00ea4518c381dfe Mon Sep 17 00:00:00 2001 From: bonkalol Date: Tue, 13 Aug 2024 18:50:06 +0300 Subject: [PATCH 1/5] issues/1389 --- src/core/component/engines/vue3/config.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/core/component/engines/vue3/config.ts b/src/core/component/engines/vue3/config.ts index 08e4a9a192..6d1a71662f 100644 --- a/src/core/component/engines/vue3/config.ts +++ b/src/core/component/engines/vue3/config.ts @@ -23,6 +23,8 @@ Vue.config.warnHandler = (msg, vm, trace) => { logger.warn('warnHandler', msg, trace, getComponentInfo(vm)); }; +Vue.config.performance = !IS_PROD; + const UNRECOGNIZED_COMPONENT_NAME = 'unrecognized-component', ROOT_COMPONENT_NAME = 'root-component'; From d762d0eb9b0977b28167a320010fd4f59981e46f Mon Sep 17 00:00:00 2001 From: bonkalol Date: Tue, 13 Aug 2024 18:51:20 +0300 Subject: [PATCH 2/5] :art: changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index cdeaaf05db..d1c32454c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,12 @@ Changelog _Note: Gaps between patch versions are faulty, broken or test releases._ +## v4.0.0-beta.?? (2024-??-??) + +#### :house: Internal + +* [The performance option is enabled in the Vue3 config](https://github.com/V4Fire/Client/issues/1389) + ## v4.0.0-beta.125 (2024-08-12) #### :bug: Bug Fix From a8485762b3fdc59121897ac393323e91796c2095 Mon Sep 17 00:00:00 2001 From: bonkalol Date: Tue, 13 Aug 2024 18:53:59 +0300 Subject: [PATCH 3/5] :art: --- CHANGELOG.md | 2 +- src/core/component/engines/vue3/CHANGELOG.md | 6 ++++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d1c32454c6..b5e0fed77d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,7 @@ _Note: Gaps between patch versions are faulty, broken or test releases._ #### :house: Internal -* [The performance option is enabled in the Vue3 config](https://github.com/V4Fire/Client/issues/1389) +* [The `performance` option in the Vue engine config is set to true by default for the dev build `core/component/engines/vue3/config.ts`](https://github.com/V4Fire/Client/issues/1389) ## v4.0.0-beta.125 (2024-08-12) diff --git a/src/core/component/engines/vue3/CHANGELOG.md b/src/core/component/engines/vue3/CHANGELOG.md index 9fad77dd7b..f0954f8dec 100644 --- a/src/core/component/engines/vue3/CHANGELOG.md +++ b/src/core/component/engines/vue3/CHANGELOG.md @@ -9,6 +9,12 @@ Changelog > - :house: [Internal] > - :nail_care: [Polish] +## v4.0.0-beta.?? (2024-??-??) + +#### :house: Internal + +* [The `performance` option in the Vue engine config is set to true by default for the dev build](https://github.com/V4Fire/Client/issues/1389) + ## v4.0.0-beta.112 (2024-07-22) #### :bug: Bug Fix From 2eea6c1cbf0d2bd34b02ad5d735aa5ee2eed79c1 Mon Sep 17 00:00:00 2001 From: bonkalol Date: Fri, 16 Aug 2024 14:29:36 +0300 Subject: [PATCH 4/5] Added measure of createBlock and renderList --- CHANGELOG.md | 1 + src/core/component/render/CHANGELOG.md | 6 ++++ src/core/component/render/wrappers.ts | 33 ++++++++++++++++++++- src/core/performance/CHANGELOG.md | 16 ++++++++++ src/core/performance/README.md | 3 ++ src/core/performance/index.ts | 9 ++++++ src/core/performance/measure/engines/web.ts | 20 +++++++++++++ src/core/performance/measure/index.ts | 22 ++++++++++++++ 8 files changed, 109 insertions(+), 1 deletion(-) create mode 100644 src/core/performance/CHANGELOG.md create mode 100644 src/core/performance/README.md create mode 100644 src/core/performance/index.ts create mode 100644 src/core/performance/measure/engines/web.ts create mode 100644 src/core/performance/measure/index.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index b5e0fed77d..42a397d186 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ _Note: Gaps between patch versions are faulty, broken or test releases._ #### :house: Internal * [The `performance` option in the Vue engine config is set to true by default for the dev build `core/component/engines/vue3/config.ts`](https://github.com/V4Fire/Client/issues/1389) +* [Now key functions such as `createBlock` and `renderList` are being measured using the Performance API and will be available on the timeline `core/component/render/wrappers`](https://github.com/V4Fire/Client/issues/1389) ## v4.0.0-beta.125 (2024-08-12) diff --git a/src/core/component/render/CHANGELOG.md b/src/core/component/render/CHANGELOG.md index 57ed1e7686..05d31c6b30 100644 --- a/src/core/component/render/CHANGELOG.md +++ b/src/core/component/render/CHANGELOG.md @@ -9,6 +9,12 @@ Changelog > - :house: [Internal] > - :nail_care: [Polish] +## v4.0.0-beta.?? (2024-??-??) + +#### :house: Internal + +* [Now key functions such as `createBlock` and `renderList` are being measured using the Performance API and will be available on the timeline](https://github.com/V4Fire/Client/issues/1389) + ## v4.0.0-beta.107 (2024-07-10) #### :bug: Bug Fix diff --git a/src/core/component/render/wrappers.ts b/src/core/component/render/wrappers.ts index 2f373912ab..ceb96c5262 100644 --- a/src/core/component/render/wrappers.ts +++ b/src/core/component/render/wrappers.ts @@ -8,6 +8,8 @@ /* eslint-disable prefer-spread */ +import { measure } from 'core/performance'; + import { app, isComponent, componentRenderFactories, destroyedHooks, ASYNC_RENDER_ID } from 'core/component/const'; import { attachTemplatesToMeta, ComponentMeta } from 'core/component/meta'; @@ -83,6 +85,8 @@ export function wrapCreateElementVNode(orig */ export function wrapCreateBlock(original: T): T { return Object.cast(function wrapCreateBlock(this: ComponentInterface, ...args: Parameters) { + const start = performance.now(); + let [ name, attrs, @@ -238,6 +242,13 @@ export function wrapCreateBlock(original: T): T { functionalVNode.children = []; functionalVNode.dynamicChildren = []; + if (!IS_PROD) { + measure(`<${this.componentName.camelize(true)}> create block`, { + start, + end: performance.now() + }); + } + return vnode; }); } @@ -248,8 +259,19 @@ export function wrapCreateBlock(original: T): T { */ export function wrapCreateElementBlock(original: T): T { return Object.cast(function createElementBlock(this: ComponentInterface, ...args: Parameters) { + const start = performance.now(); + args[3] = normalizePatchFlagUsingProps.call(this, args[3], args[1]); - return resolveAttrs.call(this, original.apply(null, args)); + const result = resolveAttrs.call(this, original.apply(null, args)); + + if (!IS_PROD) { + measure(`<${this.componentName.camelize(true)}> create element block`, { + start, + end: performance.now() + }); + } + + return result; }); } @@ -324,6 +346,8 @@ export function wrapRenderList | Dictionary | number | undefined | null, cb: AnyFunction ) { + const start = performance.now(); + const ctx = this.$renderEngine.r.getCurrentInstance(), @@ -345,6 +369,13 @@ export function wrapRenderList render list`, { + start, + end: performance.now() + }); + } + return vnodes; }); } diff --git a/src/core/performance/CHANGELOG.md b/src/core/performance/CHANGELOG.md new file mode 100644 index 0000000000..e884a88aa1 --- /dev/null +++ b/src/core/performance/CHANGELOG.md @@ -0,0 +1,16 @@ +Changelog +========= + +> **Tags:** +> - :boom: [Breaking Change] +> - :rocket: [New Feature] +> - :bug: [Bug Fix] +> - :memo: [Documentation] +> - :house: [Internal] +> - :nail_care: [Polish] + +## 4.0.0-beta.?? (2024-??-??) + +#### :rocket: New Feature + +* Initial release diff --git a/src/core/performance/README.md b/src/core/performance/README.md new file mode 100644 index 0000000000..c84e3de5f5 --- /dev/null +++ b/src/core/performance/README.md @@ -0,0 +1,3 @@ +# core/performance + +The module provides an API for monitoring application performance at runtime. diff --git a/src/core/performance/index.ts b/src/core/performance/index.ts new file mode 100644 index 0000000000..94b04fe06b --- /dev/null +++ b/src/core/performance/index.ts @@ -0,0 +1,9 @@ +/*! + * V4Fire Client Core + * https://github.com/V4Fire/Client + * + * Released under the MIT license + * https://github.com/V4Fire/Client/blob/master/LICENSE + */ + +export * from 'core/performance/measure'; diff --git a/src/core/performance/measure/engines/web.ts b/src/core/performance/measure/engines/web.ts new file mode 100644 index 0000000000..f5256c1981 --- /dev/null +++ b/src/core/performance/measure/engines/web.ts @@ -0,0 +1,20 @@ +/*! + * V4Fire Client Core + * https://github.com/V4Fire/Client + * + * Released under the MIT license + * https://github.com/V4Fire/Client/blob/master/LICENSE + */ + +/** + * {@link Performance.measure} + * @param args + */ +export function measure(...args: Parameters): CanUndef> { + if ( + 'performance' in globalThis && + Object.isFunction(Object.get(globalThis, 'performance.measure')) + ) { + return performance.measure(...args); + } +} diff --git a/src/core/performance/measure/index.ts b/src/core/performance/measure/index.ts new file mode 100644 index 0000000000..06e8161453 --- /dev/null +++ b/src/core/performance/measure/index.ts @@ -0,0 +1,22 @@ +/*! + * V4Fire Client Core + * https://github.com/V4Fire/Client + * + * Released under the MIT license + * https://github.com/V4Fire/Client/blob/master/LICENSE + */ + +//#unless node_js +import { measure as webMeasure } from 'core/performance/measure/engines/web'; +//#endunless + +/** + * The measure method creates a named `PerformanceMeasure` object representing a time measurement between two marks + * @param args + */ +export function measure(...args: Parameters): CanUndef> { + //#unless node_js + return webMeasure(...args); + //#endif +} + From 278e109e76e2f7a817c908686a7ebd8e321618cd Mon Sep 17 00:00:00 2001 From: bonkalol Date: Fri, 16 Aug 2024 15:35:54 +0300 Subject: [PATCH 5/5] fix component name --- src/core/component/render/wrappers.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/component/render/wrappers.ts b/src/core/component/render/wrappers.ts index ceb96c5262..6395742671 100644 --- a/src/core/component/render/wrappers.ts +++ b/src/core/component/render/wrappers.ts @@ -243,7 +243,7 @@ export function wrapCreateBlock(original: T): T { functionalVNode.dynamicChildren = []; if (!IS_PROD) { - measure(`<${this.componentName.camelize(true)}> create block`, { + measure(`<${componentName.camelize(true)}> create block`, { start, end: performance.now() });