perf: use charWidthCache to improve performance by 1.5% (#1978)

* perf: 避免重复dirty父级元素提升2%性能

* perf: accept gemini review

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

* refactor: 修复eslint

* perf: use charWidthCache to improve performance by 1.5%

* refactor: 修复评审意见

* refactor: 修复评审意见

* refactor: 使用LRU

* refactor: 使用LRU

* chore: add changeset

---------

Co-authored-by: huiyu.zjt <huiyu.zjt@antgroup.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: wang1212 <mrwang1212@126.com>

Author: 3 people

.changeset/fast-ads-flash.md

@@ -0,0 +1,5 @@
+---
+'@antv/g-lite': patch
+---
+
+perf: use charWidthCache to improve performance by 1.5%

packages/g-lite/src/Canvas.ts

@@ -417,6 +417,7 @@ export class Canvas extends EventTarget implements ICanvas {
     clearEventRetain(insertedEventCache);
     clearEventRetain(removedEventCache);
     clearEventRetain(destroyEventCache);
+    runtime.textService.clearCache();
   }
 
   /**

packages/g-lite/src/services/TextService.ts

@@ -2,6 +2,7 @@ import { CanvasLike, GlobalRuntime } from '..';
 import type { ParsedTextStyleProps } from '../display-objects';
 import { Rectangle } from '../shapes';
 import { toFontString } from '../utils';
+import LRU from '../utils/LRU';
 
 export interface TextMetrics {
   font: string;
@@ -20,7 +21,6 @@ interface IFontMetrics {
   descent: number;
   fontSize: number;
 }
-type CharacterWidthCache = Record<string, number>;
 
 const TEXT_METRICS = {
   MetricsString: '|ÉqÅ',
@@ -78,13 +78,21 @@ const regexCannotEnd = new RegExp(
  * Borrow from pixi/packages/text/src/TextMetrics.ts
  */
 export class TextService {
-  constructor(private runtime: GlobalRuntime) {}
+  constructor(private runtime: GlobalRuntime) {
+    this.charWidthCache = new LRU<LRU<number>>(100);
+  }
 
   /**
    * font metrics cache
    */
   private fontMetricsCache: Record<string, IFontMetrics> = {};
 
+  /**
+   * A global cache for character widths, keyed by font string.
+   * e.g. { '16px Arial': { 'a': 8, 'b': 9 } }
+   */
+  private charWidthCache: LRU<LRU<number>>;
+
   /**
    * Calculates the ascent, descent and fontSize of a given font-style.
    */
@@ -367,12 +375,21 @@ export class TextService {
     // @see https://github.com/antvis/G/issues/1932
     let prevLineLastCharIndex = -1;
 
-    const cache: { [key in string]: number } = {};
-    const calcWidth = (txt: string): number => {
+    // --- 优化核心 ---
+    // 1. 获取或创建当前字体对应的字符缓存
+    const font = toFontString(parsedStyle);
+    let charCache = this.charWidthCache.get(font);
+    if (!charCache) {
+      charCache = new LRU<number>(500);
+      this.charWidthCache.put(font, charCache);
+    }
+
+    // 2. calcWidth 现在直接使用持久化的 charCache
+    const calcWidth = (char: string): number => {
       return this.getFromCache(
-        txt,
+        char,
         letterSpacing,
-        cache,
+        charCache,
         context as CanvasRenderingContext2D,
       );
     };
@@ -615,17 +632,22 @@ export class TextService {
   private getFromCache(
     key: string,
     letterSpacing: number,
-    cache: CharacterWidthCache,
+    cache: LRU<number>,
     context: CanvasRenderingContext2D,
   ): number {
-    let width = cache[key];
+    let width = cache.get(key);
     if (typeof width !== 'number') {
       const spacing = key.length * letterSpacing;
       const metrics = context.measureText(key);
 
       width = metrics.width + spacing;
-      cache[key] = width;
+      cache.put(key, width);
     }
     return width;
   }
+
+  public clearCache() {
+    this.fontMetricsCache = {};
+    this.charWidthCache.clear();
+  }
 }

packages/g-lite/src/utils/LRU.ts

@@ -0,0 +1,81 @@
+/**
+ * A classic LRU (Least Recently Used) cache implementation.
+ * It evicts the least recently used item when the cache is full.
+ *
+ * It uses a Map for O(1) key-based access
+ * to maintain the usage order of items.
+ *
+ * 通过利用 JavaScript 内置 Map 的特性（按插入顺序迭代），我们不再需要手动维护一个双向链表
+ */
+export default class LRU<T> {
+  private readonly capacity: number;
+  private cache: Map<string | number, T>;
+
+  constructor(capacity: number) {
+    if (capacity <= 0) {
+      throw new Error('LRU capacity must be a positive number.');
+    }
+    this.capacity = capacity;
+    // Using a Map directly simplifies the implementation significantly.
+    // A Map in modern JS engines iterates in insertion order, which is exactly what we need.
+    this.cache = new Map<string | number, T>();
+  }
+
+  /**
+   * Retrieves an item from the cache. Marks the item as recently used.
+   * @param key The key of the item to retrieve.
+   * @returns The value of the item, or undefined if not found.
+   */
+  public get(key: string | number): T | undefined {
+    if (!this.cache.has(key)) {
+      return undefined;
+    }
+
+    // Get the value.
+    const value = this.cache.get(key);
+
+    // Mark as recently used by deleting and re-setting the key.
+    // This moves the key to the end of the Map's internal order.
+    this.cache.delete(key);
+    this.cache.set(key, value);
+
+    return value;
+  }
+
+  /**
+   * Adds or updates an item in the cache. Marks the item as recently used.
+   * If the cache is full, it removes the least recently used item.
+   * @param key The key of the item.
+   * @param value The value of the item.
+   */
+  public put(key: string | number, value: T): void {
+    // If the key already exists, delete it first to ensure it's moved to the end.
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    }
+
+    // Add the new item. It will be the most recently used.
+    this.cache.set(key, value);
+
+    // Check if the cache has exceeded its capacity.
+    if (this.cache.size > this.capacity) {
+      // Evict the least recently used item, which is the first one in the Map's iteration order.
+      const leastRecentlyUsedKey = this.cache.keys().next().value;
+      this.cache.delete(leastRecentlyUsedKey);
+    }
+  }
+
+  /**
+   * Returns the current number of items in the cache.
+   */
+  public len(): number {
+    return this.cache.size;
+  }
+
+  /**
+   * Clears all items from the cache.
+   */
+  public clear(): void {
+    this.cache.clear();
+  }
+}

packages/g-lite/src/utils/text.ts

@@ -1,5 +1,6 @@
 import { isNumber } from '@antv/util';
 import type { ParsedTextStyleProps } from '../display-objects/Text';
+import { memoize } from './memoize';
 
 const genericFontFamilies = [
   'serif',
@@ -11,37 +12,50 @@ const genericFontFamilies = [
 ];
 const stringRegExp = /([\"\'])[^\'\"]+\1/;
 
-export function toFontString(attributes: Partial<ParsedTextStyleProps>) {
+function getFontAttr(attributes: Partial<ParsedTextStyleProps>) {
   const {
     fontSize = 16,
     fontFamily = 'sans-serif',
     fontStyle = 'normal',
     fontVariant = 'normal',
     fontWeight = 'normal',
   } = attributes;
+  return { fontSize, fontFamily, fontStyle, fontVariant, fontWeight };
+}
+
+export const toFontString = memoize(
+  function toFontStringRaw(attributes: Partial<ParsedTextStyleProps>) {
+    const { fontSize, fontFamily, fontStyle, fontVariant, fontWeight } =
+      getFontAttr(attributes);
 
-  // build canvas api font setting from individual components. Convert a numeric this.fontSize to px
-  // const fontSizeString: string = isNumber(fontSize) ? `${fontSize}px` : fontSize.toString();
-  const fontSizeString: string =
-    (isNumber(fontSize) && `${fontSize}px`) || '16px';
-  // Clean-up fontFamily property by quoting each font name
-  // this will support font names with spaces
+    // build canvas api font setting from individual components. Convert a numeric this.fontSize to px
+    // const fontSizeString: string = isNumber(fontSize) ? `${fontSize}px` : fontSize.toString();
+    const fontSizeString: string =
+      (isNumber(fontSize) && `${fontSize}px`) || '16px';
+    // Clean-up fontFamily property by quoting each font name
+    // this will support font names with spaces
 
-  const fontFamilies: string[] = fontFamily.split(',');
+    const fontFamilies: string[] = fontFamily.split(',');
 
-  for (let i = fontFamilies.length - 1; i >= 0; i--) {
-    // Trim any extra white-space
-    let fontFamily = fontFamilies[i].trim();
-    // Check if font already contains strings
-    if (
-      !stringRegExp.test(fontFamily) &&
-      genericFontFamilies.indexOf(fontFamily) < 0
-    ) {
-      fontFamily = `"${fontFamily}"`;
+    for (let i = fontFamilies.length - 1; i >= 0; i--) {
+      // Trim any extra white-space
+      let fontFamily = fontFamilies[i].trim();
+      // Check if font already contains strings
+      if (
+        !stringRegExp.test(fontFamily) &&
+        genericFontFamilies.indexOf(fontFamily) < 0
+      ) {
+        fontFamily = `"${fontFamily}"`;
+      }
+      fontFamilies[i] = fontFamily;
     }
-    fontFamilies[i] = fontFamily;
-  }
-  return `${fontStyle} ${fontVariant} ${fontWeight} ${fontSizeString} ${fontFamilies.join(
-    ',',
-  )}`;
-}
+    return `${fontStyle} ${fontVariant} ${fontWeight} ${fontSizeString} ${fontFamilies.join(
+      ',',
+    )}`;
+  },
+  (attributes: Partial<ParsedTextStyleProps>) => {
+    const { fontSize, fontFamily, fontStyle, fontVariant, fontWeight } =
+      getFontAttr(attributes);
+    return `${fontStyle}_${fontVariant}_${fontWeight}_${fontSize}_${fontFamily}`;
+  },
+);