From d4687b49c8b343ee1527c43ccef69e83338f90a2 Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 14:47:17 +0200 Subject: [PATCH 01/15] feat(): add rxScheduleTask function --- .../cdk/render-strategies/rx-schedule-task.md | 112 ++++++++++++++++++ .../spec/rx-schedule-task.spec.ts | 67 +++++++++++ libs/cdk/render-strategies/src/index.ts | 35 ++++-- .../src/lib/rx-schedule-task.ts | 52 ++++++++ libs/cdk/tsconfig.spec.json | 8 +- 5 files changed, 260 insertions(+), 14 deletions(-) create mode 100644 apps/docs/docs/cdk/render-strategies/rx-schedule-task.md create mode 100644 libs/cdk/render-strategies/spec/rx-schedule-task.spec.ts create mode 100644 libs/cdk/render-strategies/src/lib/rx-schedule-task.ts diff --git a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md new file mode 100644 index 0000000000..e03d978ba5 --- /dev/null +++ b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md @@ -0,0 +1,112 @@ +# rxScheduleTask + +`rxScheduleTask` provides a helper function to schedule function execution. It is a minimal building block for making performance optimizations in your code. + +## Motivation + +Chromium based browsers considers all tasks that taking more than 50ms as long tasks. If task runs more than 50ms, users will start noticing lags. Optimally all user interactions should happen at 30 fps framerate with 32ms budget per browser task. In ideal world it should be 60 fps and 16ms budget. + +> 💡 In reality browser has a reserved overhead of 4ms, try to stick to 28ms of work for 30 fps and 12ms for 60 fps. + +## Scheduling mechanisms in browser + +Most common ways of delaying task execution are: + +- `setTimeout` +- `requestAnimationFrame` +- `requestIdleCallback` + +`rxScheduleTask` provides similar API but comes with huge benefits of notion of frame budget and priority configuration. + +## Concurrent strategies + +> 💡 Under the hood all our concurrent strategies are based on MessageChannel technology. + +To address the problem of long tasks and help browser split the work @rx-angular/cdk provides concurrent strategies. This strategies will help browser to chunk the work into non-blocking tasks whenever it's possible. + +You can read detailed information about concurrent strategies [here](https://github.com/rx-angular/rx-angular/blob/main/libs/cdk/render-strategies/docs/concurrent-strategies.md). + +## Usage examples + +### Input params + +- Just as common delaying apis this method `accepts` a work function that should be scheduled. +- It also accepts configuration object as an optional second parameter + - `strategy` which will be used for scheduling (`normal` is default, for full list of available strategies see [concurrent strategies documentation](https://github.com/rx-angular/rx-angular/blob/main/libs/cdk/render-strategies/docs/concurrent-strategies.md)) + - `delay` which is responsible for delaying the task execution (default is 0ms) + - `ngZone` if you want your function be executed withing ngzone (default scheduling runs out of zone) + +### Return type + +Function returns a callback that you can use to cancel already scheduled tasks. + +### Default usage + +```typescript +import { rxScheduleTask } from '@rx-angular/cdk/render-strategies'; +... + +function updateStateAndBackup(data: T) { + this.stateService.set(data); + + rxScheduleTask(() => localStorage.setItem('state', JSON.stringify(state))); +} +``` + +### Usage with non-default strategy + +```typescript +import { rxScheduleTask } from '@rx-angular/cdk/render-strategies'; +... + +function updateStateAndBackup(data: T) { + this.stateService.set(data); + + rxScheduleTask( + () => localStorage.setItem('state', JSON.stringify(state)), + {strategy: 'idle'} + ); +} +``` + +### Usage with options + +```typescript +import { rxScheduleTask } from '@rx-angular/cdk/render-strategies'; +... + +function updateStateAndBackup(data: T) { + this.stateService.set(data); + + rxScheduleTask( + () => localStorage.setItem('state', JSON.stringify(state)), + { delay: 200, zone: this.ngZone, strategy: 'idle' } + ); +} +``` + +### Cancel scheduled task + +```typescript +import { rxScheduleTask } from '@rx-angular/cdk/render-strategies'; +... + +let saveToLocalStorageCallback; + +function updateStateAndBackup(data: T) { + this.stateService.set(data); + + if (saveToLocalStorageCallback) { + saveToLocalStorageCallback(); + } + + saveToLocalStorageCallback = rxScheduleTask(() => + localStorage.setItem('state', JSON.stringify(state)) + ); +} +``` + +## Links + +- [Detailed information about strategies](https://github.com/rx-angular/rx-angular/tree/master/libs/cdk/render-strategies) +- [MessageChannel documentation](https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel) diff --git a/libs/cdk/render-strategies/spec/rx-schedule-task.spec.ts b/libs/cdk/render-strategies/spec/rx-schedule-task.spec.ts new file mode 100644 index 0000000000..795872c638 --- /dev/null +++ b/libs/cdk/render-strategies/spec/rx-schedule-task.spec.ts @@ -0,0 +1,67 @@ +import { NgZone } from '@angular/core'; +import * as scheduler from '@rx-angular/cdk/internals/scheduler'; +import { rxScheduleTask } from '../src'; + +describe('rxScheduleTask', () => { + let work: jest.Mock; + let ngZone: NgZone; + let scheduleSpy: jest.SpyInstance; + let cancelSpy: jest.SpyInstance; + + beforeEach(() => { + work = jest.fn(); + // Mocking NgZone + ngZone = { run: (fn: Function) => fn() } as any; + + // Spying on the scheduleCallback and cancelCallback functions + scheduleSpy = jest.spyOn(scheduler, 'scheduleCallback'); + cancelSpy = jest.spyOn(scheduler, 'cancelCallback'); + }); + + afterEach(() => { + jest.clearAllMocks(); + }); + + it('should use normal strategy as default', () => { + rxScheduleTask(work); + expect(scheduleSpy).toHaveBeenCalledWith( + expect.anything(), + expect.any(Function), + { delay: undefined, ngZone: undefined } + ); + }); + + it('should schedule work with the specified strategy', () => { + rxScheduleTask(work, { strategy: 'low' }); + expect(scheduleSpy).toHaveBeenCalledWith( + expect.anything(), + expect.any(Function), + { delay: undefined, ngZone: undefined } + ); + }); + + it('should schedule work with the specified delay', () => { + const delay = 200; + rxScheduleTask(work, { delay }); + expect(scheduleSpy).toHaveBeenCalledWith( + expect.anything(), + expect.any(Function), + { delay, ngZone: undefined } + ); + }); + + it('should schedule work inside the specified NgZone', () => { + rxScheduleTask(work, { ngZone }); + expect(scheduleSpy).toHaveBeenCalledWith( + expect.anything(), + expect.any(Function), + { delay: undefined, ngZone } + ); + }); + + it('should cancel the scheduled work', () => { + const cancel = rxScheduleTask(work); + cancel(); + expect(cancelSpy).toHaveBeenCalled(); + }); +}); diff --git a/libs/cdk/render-strategies/src/index.ts b/libs/cdk/render-strategies/src/index.ts index 34b64934dc..70d0aef34c 100644 --- a/libs/cdk/render-strategies/src/index.ts +++ b/libs/cdk/render-strategies/src/index.ts @@ -1,19 +1,28 @@ -export { RxStrategyProvider } from './lib/strategy-provider.service'; -export { ScheduleOnStrategyOptions } from './lib/model'; export { RX_CONCURRENT_STRATEGIES, RxConcurrentStrategies, } from './lib/concurrent-strategies'; -export { RX_NATIVE_STRATEGIES, RxNativeStrategies } from './lib/native-strategies'; +export { + RX_RENDER_STRATEGIES_CONFIG, + RxRenderStrategiesConfig, +} from './lib/config'; +export { + RxConcurrentStrategyNames, + RxCustomStrategyCredentials, + RxDefaultStrategyNames, + RxNativeStrategyNames, + RxRenderBehavior, + RxRenderWork, + RxStrategies, + RxStrategyCredentials, + RxStrategyNames, + ScheduleOnStrategyOptions, +} from './lib/model'; +export { + RX_NATIVE_STRATEGIES, + RxNativeStrategies, +} from './lib/native-strategies'; export { onStrategy } from './lib/onStrategy'; +export { rxScheduleTask } from './lib/rx-schedule-task'; export { strategyHandling } from './lib/strategy-handling'; -export { RxStrategies } from './lib/model'; -export { RxStrategyNames } from './lib/model'; -export { RxDefaultStrategyNames } from './lib/model'; -export { RxConcurrentStrategyNames } from './lib/model'; -export { RxNativeStrategyNames } from './lib/model'; -export { RxCustomStrategyCredentials } from './lib/model'; -export { RxStrategyCredentials } from './lib/model'; -export { RxRenderBehavior } from './lib/model'; -export { RxRenderWork } from './lib/model'; -export { RX_RENDER_STRATEGIES_CONFIG, RxRenderStrategiesConfig } from './lib/config'; +export { RxStrategyProvider } from './lib/strategy-provider.service'; diff --git a/libs/cdk/render-strategies/src/lib/rx-schedule-task.ts b/libs/cdk/render-strategies/src/lib/rx-schedule-task.ts new file mode 100644 index 0000000000..502d67642b --- /dev/null +++ b/libs/cdk/render-strategies/src/lib/rx-schedule-task.ts @@ -0,0 +1,52 @@ +import { NgZone } from '@angular/core'; +import { + PriorityLevel, + cancelCallback, + scheduleCallback, +} from '@rx-angular/cdk/internals/scheduler'; +import { RxConcurrentStrategyNames } from './model'; + +type StrategiesPriorityRecord = Record< + RxConcurrentStrategyNames, + PriorityLevel +>; + +const strategiesPrio: StrategiesPriorityRecord = { + immediate: PriorityLevel.ImmediatePriority, + userBlocking: PriorityLevel.UserBlockingPriority, + normal: PriorityLevel.NormalPriority, + low: PriorityLevel.LowPriority, + idle: PriorityLevel.IdlePriority, +}; + +const defaultStrategy: keyof StrategiesPriorityRecord = 'normal'; + +/** + * @description + * This function is used to schedule a task with a certain priority. + * It is useful for tasks that can be done asynchronously. + * + * ```ts + * const task = rxScheduleTask(() => localStorage.setItem(state, JSON.stringify(state)); + * ``` + */ +export const rxScheduleTask = ( + work: (...args: any[]) => void, + { + strategy = defaultStrategy, + delay, + ngZone, + }: { + strategy?: keyof StrategiesPriorityRecord; + delay?: number; + ngZone?: NgZone; + } = {} +) => { + const task = scheduleCallback(strategiesPrio[strategy], () => work(), { + delay, + ngZone, + }); + return () => { + cancelCallback(task); + }; +}; diff --git a/libs/cdk/tsconfig.spec.json b/libs/cdk/tsconfig.spec.json index b6347c6f66..c02bd8061d 100644 --- a/libs/cdk/tsconfig.spec.json +++ b/libs/cdk/tsconfig.spec.json @@ -6,5 +6,11 @@ "types": ["jest", "node"] }, "files": ["src/test-setup.ts"], - "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts", "jest.config.ts"] + "include": [ + "**/*.spec.ts", + "**/*.test.ts", + "**/*.d.ts", + "jest.config.ts", + "render-strategies/spec/rx-schedule-task.spec.ts" + ] } From db2d41423159c063037be5dcd7ad9ac85269a313 Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 14:52:20 +0200 Subject: [PATCH 02/15] chore(): revert tsconfig.spec.json --- libs/cdk/tsconfig.spec.json | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/libs/cdk/tsconfig.spec.json b/libs/cdk/tsconfig.spec.json index c02bd8061d..b6347c6f66 100644 --- a/libs/cdk/tsconfig.spec.json +++ b/libs/cdk/tsconfig.spec.json @@ -6,11 +6,5 @@ "types": ["jest", "node"] }, "files": ["src/test-setup.ts"], - "include": [ - "**/*.spec.ts", - "**/*.test.ts", - "**/*.d.ts", - "jest.config.ts", - "render-strategies/spec/rx-schedule-task.spec.ts" - ] + "include": ["**/*.spec.ts", "**/*.test.ts", "**/*.d.ts", "jest.config.ts"] } From 8ec92083a8cfdad22ca1f35a893697d8b3e7f763 Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 15:01:05 +0200 Subject: [PATCH 03/15] fix(): dead docs links --- apps/docs/docs/cdk/render-strategies/rx-schedule-task.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md index e03d978ba5..ef074966d0 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md +++ b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md @@ -24,7 +24,7 @@ Most common ways of delaying task execution are: To address the problem of long tasks and help browser split the work @rx-angular/cdk provides concurrent strategies. This strategies will help browser to chunk the work into non-blocking tasks whenever it's possible. -You can read detailed information about concurrent strategies [here](https://github.com/rx-angular/rx-angular/blob/main/libs/cdk/render-strategies/docs/concurrent-strategies.md). +You can read detailed information about concurrent strategies [here](strategies/concurrent-strategies.md). ## Usage examples @@ -32,7 +32,7 @@ You can read detailed information about concurrent strategies [here](https://git - Just as common delaying apis this method `accepts` a work function that should be scheduled. - It also accepts configuration object as an optional second parameter - - `strategy` which will be used for scheduling (`normal` is default, for full list of available strategies see [concurrent strategies documentation](https://github.com/rx-angular/rx-angular/blob/main/libs/cdk/render-strategies/docs/concurrent-strategies.md)) + - `strategy` which will be used for scheduling (`normal` is default, for full list of available strategies see [concurrent strategies documentation](strategies/concurrent-strategies.md)) - `delay` which is responsible for delaying the task execution (default is 0ms) - `ngZone` if you want your function be executed withing ngzone (default scheduling runs out of zone) From cdaa34ddc14633d4c8308ed4dc12031bb69ae44e Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 15:06:08 +0200 Subject: [PATCH 04/15] Update apps/docs/docs/cdk/render-strategies/rx-schedule-task.md Co-authored-by: Enea Jahollari --- apps/docs/docs/cdk/render-strategies/rx-schedule-task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md index ef074966d0..fbcd257090 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md +++ b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md @@ -22,7 +22,7 @@ Most common ways of delaying task execution are: > 💡 Under the hood all our concurrent strategies are based on MessageChannel technology. -To address the problem of long tasks and help browser split the work @rx-angular/cdk provides concurrent strategies. This strategies will help browser to chunk the work into non-blocking tasks whenever it's possible. +To address the problem of long tasks and help browser split the work @rx-angular/cdk provides concurrent strategies. These strategies will help browser to chunk the work into non-blocking tasks whenever it's possible. You can read detailed information about concurrent strategies [here](strategies/concurrent-strategies.md). From 18e9e4d192dd6f0bf24daff021e973452df1ab40 Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 15:06:33 +0200 Subject: [PATCH 05/15] Update apps/docs/docs/cdk/render-strategies/rx-schedule-task.md Co-authored-by: Enea Jahollari --- apps/docs/docs/cdk/render-strategies/rx-schedule-task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md index fbcd257090..a4c5ce5621 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md +++ b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md @@ -4,7 +4,7 @@ ## Motivation -Chromium based browsers considers all tasks that taking more than 50ms as long tasks. If task runs more than 50ms, users will start noticing lags. Optimally all user interactions should happen at 30 fps framerate with 32ms budget per browser task. In ideal world it should be 60 fps and 16ms budget. +Chromium based browsers consider all tasks that take more than 50ms as long tasks. If task runs for more than 50ms, users will start noticing lags. Optimally all user interactions should happen at 30 fps frame-rate with 32ms budget per browser task. In an ideal world, it should be 60 fps and 16ms budget. > 💡 In reality browser has a reserved overhead of 4ms, try to stick to 28ms of work for 30 fps and 12ms for 60 fps. From a7570a32ca676403080f15aaa545ac74577bbb9f Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 15:06:39 +0200 Subject: [PATCH 06/15] Update apps/docs/docs/cdk/render-strategies/rx-schedule-task.md Co-authored-by: Enea Jahollari --- apps/docs/docs/cdk/render-strategies/rx-schedule-task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md index a4c5ce5621..98042a3c13 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md +++ b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md @@ -10,7 +10,7 @@ Chromium based browsers consider all tasks that take more than 50ms as long task ## Scheduling mechanisms in browser -Most common ways of delaying task execution are: +Most common ways of delaying a task execution are: - `setTimeout` - `requestAnimationFrame` From 3f01a054f48076b031d53b4cc224b08bd54847d6 Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 15:06:46 +0200 Subject: [PATCH 07/15] Update apps/docs/docs/cdk/render-strategies/rx-schedule-task.md Co-authored-by: Enea Jahollari --- apps/docs/docs/cdk/render-strategies/rx-schedule-task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md index 98042a3c13..3f79b46e5c 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md +++ b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md @@ -16,7 +16,7 @@ Most common ways of delaying a task execution are: - `requestAnimationFrame` - `requestIdleCallback` -`rxScheduleTask` provides similar API but comes with huge benefits of notion of frame budget and priority configuration. +`rxScheduleTask` provides a similar API but comes with huge benefits of notion of frame budget and priority configuration. ## Concurrent strategies From 83dc4d5e872f79cba9ed36562991dcaf5dcf2f4f Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 15:09:09 +0200 Subject: [PATCH 08/15] Update apps/docs/docs/cdk/render-strategies/rx-schedule-task.md Co-authored-by: Enea Jahollari --- apps/docs/docs/cdk/render-strategies/rx-schedule-task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md index 3f79b46e5c..e4bdb3a275 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md +++ b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md @@ -31,7 +31,7 @@ You can read detailed information about concurrent strategies [here](strategies/ ### Input params - Just as common delaying apis this method `accepts` a work function that should be scheduled. -- It also accepts configuration object as an optional second parameter +- It also accepts a configuration object as an optional second parameter - `strategy` which will be used for scheduling (`normal` is default, for full list of available strategies see [concurrent strategies documentation](strategies/concurrent-strategies.md)) - `delay` which is responsible for delaying the task execution (default is 0ms) - `ngZone` if you want your function be executed withing ngzone (default scheduling runs out of zone) From 31e8c6ca02f73cc4c76a5c8c9cd0d0393e79c7b0 Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 15:12:41 +0200 Subject: [PATCH 09/15] Update libs/cdk/render-strategies/src/lib/rx-schedule-task.ts Co-authored-by: Enea Jahollari --- libs/cdk/render-strategies/src/lib/rx-schedule-task.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/cdk/render-strategies/src/lib/rx-schedule-task.ts b/libs/cdk/render-strategies/src/lib/rx-schedule-task.ts index 502d67642b..68ef8806bd 100644 --- a/libs/cdk/render-strategies/src/lib/rx-schedule-task.ts +++ b/libs/cdk/render-strategies/src/lib/rx-schedule-task.ts @@ -27,7 +27,7 @@ const defaultStrategy: keyof StrategiesPriorityRecord = 'normal'; * It is useful for tasks that can be done asynchronously. * * ```ts - * const task = rxScheduleTask(() => localStorage.setItem(state, JSON.stringify(state)); + * const task = rxScheduleTask(() => localStorage.setItem(state, JSON.stringify(state))); * ``` */ export const rxScheduleTask = ( From 7628ecb43e088b6f8124a3f71831c50af7b57a43 Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 15:12:57 +0200 Subject: [PATCH 10/15] Update apps/docs/docs/cdk/render-strategies/rx-schedule-task.md Co-authored-by: Enea Jahollari --- apps/docs/docs/cdk/render-strategies/rx-schedule-task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md index e4bdb3a275..24e75c7d65 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md +++ b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md @@ -46,7 +46,7 @@ Function returns a callback that you can use to cancel already scheduled tasks. import { rxScheduleTask } from '@rx-angular/cdk/render-strategies'; ... -function updateStateAndBackup(data: T) { +updateStateAndBackup(data: T) { this.stateService.set(data); rxScheduleTask(() => localStorage.setItem('state', JSON.stringify(state))); From bd65ad33f38c396bb3c392f1f05f1ba847baa1bb Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 15:40:49 +0200 Subject: [PATCH 11/15] Update apps/docs/docs/cdk/render-strategies/rx-schedule-task.md Co-authored-by: Julian Jandl --- apps/docs/docs/cdk/render-strategies/rx-schedule-task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md index 24e75c7d65..daee22f7ff 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md +++ b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md @@ -34,7 +34,7 @@ You can read detailed information about concurrent strategies [here](strategies/ - It also accepts a configuration object as an optional second parameter - `strategy` which will be used for scheduling (`normal` is default, for full list of available strategies see [concurrent strategies documentation](strategies/concurrent-strategies.md)) - `delay` which is responsible for delaying the task execution (default is 0ms) - - `ngZone` if you want your function be executed withing ngzone (default scheduling runs out of zone) + - `ngZone` if you want your function be executed within ngzone (default scheduling runs out of zone) ### Return type From 3607b3719b038896bb318d906efb47cf39396d8e Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 15:46:00 +0200 Subject: [PATCH 12/15] chore(): restructure docs --- .../cdk/render-strategies/rx-schedule-task.md | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md index daee22f7ff..112f5fdddc 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md +++ b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md @@ -15,6 +15,8 @@ Most common ways of delaying a task execution are: - `setTimeout` - `requestAnimationFrame` - `requestIdleCallback` +- `Promise.resolve` +- `queueMicrotask` `rxScheduleTask` provides a similar API but comes with huge benefits of notion of frame budget and priority configuration. @@ -28,18 +30,6 @@ You can read detailed information about concurrent strategies [here](strategies/ ## Usage examples -### Input params - -- Just as common delaying apis this method `accepts` a work function that should be scheduled. -- It also accepts a configuration object as an optional second parameter - - `strategy` which will be used for scheduling (`normal` is default, for full list of available strategies see [concurrent strategies documentation](strategies/concurrent-strategies.md)) - - `delay` which is responsible for delaying the task execution (default is 0ms) - - `ngZone` if you want your function be executed within ngzone (default scheduling runs out of zone) - -### Return type - -Function returns a callback that you can use to cancel already scheduled tasks. - ### Default usage ```typescript @@ -53,6 +43,18 @@ updateStateAndBackup(data: T) { } ``` +### Input params + +- Just as common delaying apis this method `accepts` a work function that should be scheduled. +- It also accepts configuration object as an optional second parameter + - `strategy` which will be used for scheduling (`normal` is default, for full list of available strategies see [concurrent strategies documentation](strategies/concurrent-strategies.md)) + - `delay` which is responsible for delaying the task execution (default is 0ms) + - `ngZone` if you want your function be executed withing ngzone (default scheduling runs out of zone) + +### Return type + +Function returns a callback that you can use to cancel already scheduled tasks. + ### Usage with non-default strategy ```typescript From 6603ea71803a10fa79f078729878734eb5820170 Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 15:46:57 +0200 Subject: [PATCH 13/15] chore(): fix docs typo --- apps/docs/docs/cdk/render-strategies/rx-schedule-task.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md index 112f5fdddc..0609d2a2b6 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md +++ b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md @@ -49,7 +49,7 @@ updateStateAndBackup(data: T) { - It also accepts configuration object as an optional second parameter - `strategy` which will be used for scheduling (`normal` is default, for full list of available strategies see [concurrent strategies documentation](strategies/concurrent-strategies.md)) - `delay` which is responsible for delaying the task execution (default is 0ms) - - `ngZone` if you want your function be executed withing ngzone (default scheduling runs out of zone) + - `ngZone` if you want your function be executed within ngzone (default scheduling runs out of zone) ### Return type From 1ab7c31ab96e0a11993f84a8043bea73c43992b6 Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 16:15:02 +0200 Subject: [PATCH 14/15] chore(): rephrase the tips --- apps/docs/docs/cdk/render-strategies/rx-schedule-task.md | 2 +- apps/docs/docs/cdk/render-strategies/rx-strategy-provider.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md index 0609d2a2b6..57468d8ec5 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md +++ b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md @@ -6,7 +6,7 @@ Chromium based browsers consider all tasks that take more than 50ms as long tasks. If task runs for more than 50ms, users will start noticing lags. Optimally all user interactions should happen at 30 fps frame-rate with 32ms budget per browser task. In an ideal world, it should be 60 fps and 16ms budget. -> 💡 In reality browser has a reserved overhead of 4ms, try to stick to 28ms of work for 30 fps and 12ms for 60 fps. +> 💡 To achieve 30 fps or 60 fps in web apps, you can't just focus on 16ms JavaScript execution time. Remember to account for the browser's other tasks, like style recalculations, layout, and painting. Aim for 28ms (30 fps) or 12ms (60 fps) of total JavaScript processing, keeping in mind the browser's overheads. ## Scheduling mechanisms in browser diff --git a/apps/docs/docs/cdk/render-strategies/rx-strategy-provider.md b/apps/docs/docs/cdk/render-strategies/rx-strategy-provider.md index f7a22cfd11..50c6c8dec5 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-strategy-provider.md +++ b/apps/docs/docs/cdk/render-strategies/rx-strategy-provider.md @@ -8,7 +8,7 @@ Chromium based browsers considers all tasks that taking more than 50ms as long tasks. If task runs more than 50ms, users will start noticing lags. Optimally all user interactions should happen at 30 fps framerate with 32ms budget per browser task. In ideal world it should be 60 fps and 16ms budget. -> 💡 In reality browser has a reserved overhead of 4ms, try to stick to 28ms of work for 30 fps and 12ms for 60 fps. +> 💡 To achieve 30 fps or 60 fps in web apps, you can't just focus on 16ms JavaScript execution time. Remember to account for the browser's other tasks, like style recalculations, layout, and painting. Aim for 28ms (30 fps) or 12ms (60 fps) of total JavaScript processing, keeping in mind the browser's overheads. ## Scheduling mechanisms in browser From e2ee520666e2a68f99fdac4c16a1e3e80ae3b895 Mon Sep 17 00:00:00 2001 From: Kirill Date: Mon, 30 Oct 2023 16:27:06 +0200 Subject: [PATCH 15/15] chore(): rephrase tip again --- apps/docs/docs/cdk/render-strategies/rx-schedule-task.md | 2 +- apps/docs/docs/cdk/render-strategies/rx-strategy-provider.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md index 57468d8ec5..8a0ca9ac27 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md +++ b/apps/docs/docs/cdk/render-strategies/rx-schedule-task.md @@ -6,7 +6,7 @@ Chromium based browsers consider all tasks that take more than 50ms as long tasks. If task runs for more than 50ms, users will start noticing lags. Optimally all user interactions should happen at 30 fps frame-rate with 32ms budget per browser task. In an ideal world, it should be 60 fps and 16ms budget. -> 💡 To achieve 30 fps or 60 fps in web apps, you can't just focus on 16ms JavaScript execution time. Remember to account for the browser's other tasks, like style recalculations, layout, and painting. Aim for 28ms (30 fps) or 12ms (60 fps) of total JavaScript processing, keeping in mind the browser's overheads. +> 💡 To achieve 30 fps or 60 fps in web apps, you can't just focus on JavaScript execution time. Remember to account for the browser's other tasks, like style recalculations, layout, and painting. ## Scheduling mechanisms in browser diff --git a/apps/docs/docs/cdk/render-strategies/rx-strategy-provider.md b/apps/docs/docs/cdk/render-strategies/rx-strategy-provider.md index 50c6c8dec5..94670b24b2 100644 --- a/apps/docs/docs/cdk/render-strategies/rx-strategy-provider.md +++ b/apps/docs/docs/cdk/render-strategies/rx-strategy-provider.md @@ -8,7 +8,7 @@ Chromium based browsers considers all tasks that taking more than 50ms as long tasks. If task runs more than 50ms, users will start noticing lags. Optimally all user interactions should happen at 30 fps framerate with 32ms budget per browser task. In ideal world it should be 60 fps and 16ms budget. -> 💡 To achieve 30 fps or 60 fps in web apps, you can't just focus on 16ms JavaScript execution time. Remember to account for the browser's other tasks, like style recalculations, layout, and painting. Aim for 28ms (30 fps) or 12ms (60 fps) of total JavaScript processing, keeping in mind the browser's overheads. +> 💡 To achieve 30 fps or 60 fps in web apps, you can't just focus on JavaScript execution time. Remember to account for the browser's other tasks, like style recalculations, layout, and painting. ## Scheduling mechanisms in browser