[Enhancement] Optimize tween, animate and RafService for browser performance

CHANGELOG.md

@@ -8,6 +8,18 @@ All notable changes to this project will be documented in this file. The format
 
 - Add browser storage utilities: `createStorage`, `useLocalStorage`, `useSessionStorage`, `useUrlSearchParams`, `useUrlSearchParamsInHash` ([#671](https://github.com/studiometa/js-toolkit/pull/671))
 - Add `logTree` helper to inspect the component tree from the console ([#654](https://github.com/studiometa/js-toolkit/pull/654))
+- Add performance benchmarks for tween, animate, transform, services and Base internals ([#722](https://github.com/studiometa/js-toolkit/pull/722))
+- Add CodSpeed CI integration for continuous performance tracking ([#723](https://github.com/studiometa/js-toolkit/pull/723))
+
+### Changed
+
+- **Performance**
+  - Improve `animate` progress updates by pre-computing keyframe deltas at creation time ([#721](https://github.com/studiometa/js-toolkit/pull/721), [ca72182c](https://github.com/studiometa/js-toolkit/commit/ca72182c))
+  - Improve `RafService.trigger` by batching scheduler calls, reducing closure creation from 2N to 2 per cycle ([#721](https://github.com/studiometa/js-toolkit/pull/721), [d4f96331](https://github.com/studiometa/js-toolkit/commit/d4f96331))
+  - Improve `ScrollService.updateProps` by caching scroll max values and updating on resize only ([#721](https://github.com/studiometa/js-toolkit/pull/721), [d5939211](https://github.com/studiometa/js-toolkit/commit/d5939211))
+  - Improve `transform` and `tween` by replacing `isDefined()` with inline `!== undefined` checks ([#721](https://github.com/studiometa/js-toolkit/pull/721), [e580bfee](https://github.com/studiometa/js-toolkit/commit/e580bfee), [1fc79012](https://github.com/studiometa/js-toolkit/commit/1fc79012))
+  - Improve `getAllProperties` by replacing O(n²) array spread with O(n) push ([#721](https://github.com/studiometa/js-toolkit/pull/721), [3dea1808](https://github.com/studiometa/js-toolkit/commit/3dea1808))
+  - Improve `getInstances` by returning storage Set directly instead of copying ([#721](https://github.com/studiometa/js-toolkit/pull/721), [221be81e](https://github.com/studiometa/js-toolkit/commit/221be81e))
 
 ### Fixed
 

packages/js-toolkit/Base/utils.ts

@@ -129,13 +129,13 @@ function getElementsStorage(): Set<HTMLElement & { __base__: Map<string, Base>}>
  * Get all mounted instances or the ones from a given component.
  * @link https://js-toolkit.studiometa.dev/api/helpers/getInstances.html
  */
-export function getInstances(): Set<Base>;
+export function getInstances(): ReadonlySet<Base>;
 export function getInstances<T extends BaseConstructor = BaseConstructor>(
   ctor: T,
 ): Set<InstanceType<T>>;
 export function getInstances<T extends BaseConstructor = BaseConstructor>(
   ctor?: T,
-): Set<InstanceType<T>> | Set<Base> {
+): ReadonlySet<InstanceType<T>> | ReadonlySet<Base> {
   if (isDefined(ctor)) {
     const filteredInstances = new Set<InstanceType<T>>();
     for (const instance of getInstancesStorage()) {
@@ -144,9 +144,9 @@ export function getInstances<T extends BaseConstructor = BaseConstructor>(
       }
     }
     return filteredInstances;
-  } else {
-    return new Set(getInstancesStorage());
   }
+
+  return new Set(getInstancesStorage());
 }
 
 export function getElements() {

packages/js-toolkit/helpers/queryComponent.ts

@@ -55,7 +55,7 @@ export function queryComponent<T extends Base = Base>(
 ): T | undefined {
   const parsedQuery = parseQuery(query);
   const { from = document } = options;
-  const instances = getInstances() as Set<T>;
+  const instances = getInstances() as ReadonlySet<T>;
 
   for (const instance of instances) {
     if (!instanceIsMatching(instance, parsedQuery)) continue;
@@ -74,7 +74,7 @@ export function queryComponentAll<T extends Base = Base>(
 ): T[] {
   const parsedQuery = parseQuery(query);
   const { from = document } = options;
-  const instances = getInstances() as Set<T>;
+  const instances = getInstances() as ReadonlySet<T>;
   const selectedInstances = new Set<T>();
 
   for (const instance of instances) {

packages/js-toolkit/services/RafService.ts

@@ -27,17 +27,24 @@ export class RafService extends AbstractService<RafServiceProps> {
   };
 
   trigger(props: RafServiceProps) {
-    for (const callback of this.callbacks.values()) {
-      this.scheduler.read(() => {
-        const render = callback(props) as (() => unknown) | void;
+    this.scheduler.read(() => {
+      const writeQueue: Array<(props: RafServiceProps) => unknown> = [];
+
+      for (const callback of this.callbacks.values()) {
+        const render = callback(props) as ((props: RafServiceProps) => unknown) | void;
         if (isFunction(render)) {
-          this.scheduler.write(() => {
-            // @ts-ignore
-            render(props);
-          });
+          writeQueue.push(render);
         }
-      });
-    }
+      }
+
+      if (writeQueue.length > 0) {
+        this.scheduler.write(() => {
+          for (let i = 0; i < writeQueue.length; i++) {
+            writeQueue[i](props);
+          }
+        });
+      }
+    });
   }
 
   loop() {

packages/js-toolkit/services/ScrollService.ts

@@ -32,7 +32,23 @@ export interface ScrollServiceProps {
 export type ScrollServiceInterface = ServiceInterface<ScrollServiceProps>;
 
 export class ScrollService extends AbstractService<ScrollServiceProps> {
-  static config: ServiceConfig = [[() => document, [['scroll', PASSIVE_CAPTURE_EVENT_OPTIONS]]]];
+  static config: ServiceConfig = [
+    [() => document, [['scroll', PASSIVE_CAPTURE_EVENT_OPTIONS]]],
+    [() => window, [['resize', PASSIVE_CAPTURE_EVENT_OPTIONS]]],
+  ];
+
+  /**
+   * Cached scroll max values, updated on resize and first scroll.
+   * @private
+   */
+  __maxX: number | null = null;
+  __maxY: number | null = null;
+
+  /**
+   * Observe scroll container size changes that do not trigger window resize.
+   * @private
+   */
+  __resizeObserver: ResizeObserver | null = null;
 
   props: ScrollServiceProps = {
     x: window.scrollX,
@@ -90,8 +106,11 @@ export class ScrollService extends AbstractService<ScrollServiceProps> {
     props.last.y = props.lastY = yLast;
     props.delta.x = props.deltaX = props.x - xLast;
     props.delta.y = props.deltaY = props.y - yLast;
-    props.max.x = props.maxX = document.scrollingElement.scrollWidth - window.innerWidth;
-    props.max.y = props.maxY = document.scrollingElement.scrollHeight - window.innerHeight;
+    if (this.__maxX === null || this.__maxY === null) {
+      this.__updateMaxValues();
+    }
+    props.max.x = props.maxX = this.__maxX;
+    props.max.y = props.maxY = this.__maxY;
     props.progress.x = props.progressX = props.max.x === 0 ? 1 : props.x / props.max.x;
     props.progress.y = props.progressY = props.max.y === 0 ? 1 : props.y / props.max.y;
     props.isUp = props.y < yLast;
@@ -106,21 +125,57 @@ export class ScrollService extends AbstractService<ScrollServiceProps> {
     return props;
   }
 
-  update() {
-    nextTick(() => this.updateProps()).then(() => this.trigger(this.props));
+  update(trigger = true) {
+    nextTick(() => this.updateProps()).then(() => {
+      if (trigger) {
+        this.trigger(this.props);
+      }
+    });
   }
 
   onScrollDebounced = debounce(() => {
     this.update();
   }, 100);
 
   /**
-   * Scroll handler.
+   * Update cached max scroll values on resize.
+   * @private
+   */
+  __updateMaxValues() {
+    this.__maxX = document.scrollingElement.scrollWidth - window.innerWidth;
+    this.__maxY = document.scrollingElement.scrollHeight - window.innerHeight;
+  }
+
+  /**
+   * Scroll and resize handler.
    */
-  handleEvent() {
+  handleEvent(event: Event) {
+    if (event.type === 'resize') {
+      this.__updateMaxValues();
+      this.update(false);
+      return;
+    }
+
     this.update();
     this.onScrollDebounced();
   }
+
+  init() {
+    super.init();
+
+    if (typeof ResizeObserver === 'function' && document.scrollingElement) {
+      this.__resizeObserver = new ResizeObserver(() => {
+        this.__updateMaxValues();
+      });
+      this.__resizeObserver.observe(document.scrollingElement);
+    }
+  }
+
+  kill() {
+    this.__resizeObserver?.disconnect();
+    this.__resizeObserver = null;
+    super.kill();
+  }
 }
 
 /**