@kylincloud/flamegraph 0.35.28 → 0.35.29

package/src/FlameGraph/FlameGraphComponent/index.tsx

@@ -1,6 +1,6 @@
 // src/FlameGraph/FlameGraphComponent/index.tsx
 /* eslint-disable no-unused-expressions, import/no-extraneous-dependencies */
-import React, { useCallback, useRef, useMemo } from 'react';
+import React, { useCallback, useRef, useMemo, useEffect } from 'react';
 import clsx from 'clsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
@@ -28,6 +28,8 @@ import type { ViewTypes } from './viewTypes';
 import { FitModes, HeadMode, TailMode } from '../../fitMode/fitMode';
 import indexStyles from './styles.module.scss';
 import { useFlamegraphI18n } from '../../i18n';
+import { createFlamegraphRenderWorker } from '../../workers/createFlamegraphRenderWorker';
+import type { CanvasI18nMessages } from './Flamegraph_render';
 
 interface FlamegraphProps {
   flamebearer: Flamebearer;
@@ -78,11 +80,20 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
   const textCanvasRef = React.useRef<HTMLCanvasElement>(null);
   const flamegraph = useRef<Flamegraph>();
   const flamegraphText = useRef<Flamegraph>();
+  const renderSeq = useRef(0);
+  const renderWorkerRef = useRef<Worker | null>(null);
+  const rectOffscreenRef = useRef<OffscreenCanvas | null>(null);
+  const textOffscreenRef = useRef<OffscreenCanvas | null>(null);
+  const workerReadyRef = useRef({ rect: false, text: false });
   const i18n = useFlamegraphI18n();
   const resizeLogRef = useRef({
     lastWidth: 0,
     lastHeight: 0,
   });
+  const useRenderWorker =
+    typeof window !== 'undefined' &&
+    typeof OffscreenCanvas !== 'undefined' &&
+    'transferControlToOffscreen' in HTMLCanvasElement.prototype;
 
   // ====== 新增：提取 canvas 渲染需要的 i18n messages ======
   const canvasMessages = useMemo(
@@ -94,6 +105,19 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     [i18n.collapsedLevelsSingular, i18n.collapsedLevelsPlural, i18n.location]
   );
 
+  const serializePalette = useCallback(
+    (p: FlamegraphPalette) => ({
+      name: p.name,
+      goodColor: p.goodColor.rgb().array() as [number, number, number],
+      neutralColor: p.neutralColor.rgb().array() as [number, number, number],
+      badColor: p.badColor.rgb().array() as [number, number, number],
+      colors: p.colors.map(
+        (c) => c.rgb().array() as [number, number, number]
+      ),
+    }),
+    []
+  );
+
   const [rightClickedNode, setRightClickedNode] = React.useState<
     Maybe<{ top: number; left: number; width: number }>
   >(Maybe.nothing());
@@ -129,6 +153,29 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     []
   );
 
+  useEffect(() => {
+    if (!useRenderWorker) {
+      return () => {};
+    }
+    const worker = createFlamegraphRenderWorker();
+    renderWorkerRef.current = worker;
+    // eslint-disable-next-line no-console
+    console.debug('[flamegraph] render worker created');
+    setTimeout(() => {
+      renderRectCanvas();
+      renderTextCanvas();
+    }, 0);
+    return () => {
+      worker.terminate();
+      renderWorkerRef.current = null;
+      rectOffscreenRef.current = null;
+      textOffscreenRef.current = null;
+      workerReadyRef.current = { rect: false, text: false };
+      // eslint-disable-next-line no-console
+      console.debug('[flamegraph] render worker terminated');
+    };
+  }, [useRenderWorker]);
+
   useResizeObserver(canvasRef, () => {
     if (flamegraph) {
       if (canvasRef.current) {
@@ -328,6 +375,10 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
   );
 
   const constructCanvas = () => {
+    const seq = renderSeq.current + 1;
+    renderSeq.current = seq;
+    // eslint-disable-next-line no-console
+    console.time(`[flamegraph] constructCanvas #${seq}`);
     if (canvasRef.current) {
       const f = new Flamegraph(
         flamebearer,
@@ -355,8 +406,49 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
       );
       flamegraphText.current = f;
     }
+    // eslint-disable-next-line no-console
+    console.timeEnd(`[flamegraph] constructCanvas #${seq}`);
   };
 
+  const ensureRenderWorkerCanvases = useCallback(() => {
+    if (!useRenderWorker || !renderWorkerRef.current) {
+      return false;
+    }
+    const worker = renderWorkerRef.current;
+
+    if (canvasRef.current && !rectOffscreenRef.current) {
+      try {
+        const offscreen = canvasRef.current.transferControlToOffscreen();
+        rectOffscreenRef.current = offscreen;
+        worker.postMessage(
+          { type: 'init', payload: { kind: 'rect', canvas: offscreen } },
+          [offscreen]
+        );
+        workerReadyRef.current.rect = true;
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.debug('[flamegraph] rect transfer failed', err);
+      }
+    }
+
+    if (textCanvasRef.current && !textOffscreenRef.current) {
+      try {
+        const offscreen = textCanvasRef.current.transferControlToOffscreen();
+        textOffscreenRef.current = offscreen;
+        worker.postMessage(
+          { type: 'init', payload: { kind: 'text', canvas: offscreen } },
+          [offscreen]
+        );
+        workerReadyRef.current.text = true;
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.debug('[flamegraph] text transfer failed', err);
+      }
+    }
+
+    return true;
+  }, [useRenderWorker]);
+
   // ====== 修改：添加 canvasMessages 依赖 ======
   React.useEffect(() => {
     constructCanvas();
@@ -382,16 +474,73 @@ export default function FlameGraphComponent(props: FlamegraphProps) {
     renderTextCanvas();
   }, [highlightQuery]);
 
+  const postWorkerRender = (
+    kind: 'rect' | 'text',
+    options: { renderRects?: boolean; renderText?: boolean }
+  ) => {
+    if (!useRenderWorker) {
+      return false;
+    }
+    if (!renderWorkerRef.current) {
+      // eslint-disable-next-line no-console
+      console.debug('[flamegraph] worker not ready yet');
+      return true;
+    }
+    if (!ensureRenderWorkerCanvases()) {
+      return true;
+    }
+    const canvasEl =
+      kind === 'rect' ? canvasRef.current : textCanvasRef.current;
+    const width = canvasEl?.clientWidth || canvasEl?.width || 0;
+    const payload = {
+      kind,
+      flamebearer,
+      focusedNode: focusedNode.isJust ? focusedNode.value : null,
+      fitMode,
+      highlightQuery,
+      zoom: zoom.isJust ? zoom.value : null,
+      palette: serializePalette(palette),
+      messages: canvasMessages as CanvasI18nMessages,
+      renderRects: options.renderRects,
+      renderText: options.renderText,
+      width,
+      devicePixelRatio:
+        typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1,
+    };
+    renderWorkerRef.current.postMessage({ type: 'render', payload });
+    return true;
+  };
+
   const renderRectCanvas = () => {
+    const seq = renderSeq.current;
+    if (postWorkerRender('rect', { renderText: false })) {
+      // eslint-disable-next-line no-console
+      console.debug(`[flamegraph] renderRects via worker #${seq}`);
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.time(`[flamegraph] renderRects #${seq}`);
     canvasRef?.current?.setAttribute('data-state', 'rendering');
     flamegraph?.current?.render({ renderText: false });
     canvasRef?.current?.setAttribute('data-state', 'rendered');
+    // eslint-disable-next-line no-console
+    console.timeEnd(`[flamegraph] renderRects #${seq}`);
   };
 
   const renderTextCanvas = () => {
+    const seq = renderSeq.current;
+    if (postWorkerRender('text', { renderRects: false })) {
+      // eslint-disable-next-line no-console
+      console.debug(`[flamegraph] renderText via worker #${seq}`);
+      return;
+    }
+    // eslint-disable-next-line no-console
+    console.time(`[flamegraph] renderText #${seq}`);
     textCanvasRef?.current?.setAttribute('data-state', 'rendering');
     flamegraphText?.current?.render({ renderRects: false });
     textCanvasRef?.current?.setAttribute('data-state', 'rendered');
+    // eslint-disable-next-line no-console
+    console.timeEnd(`[flamegraph] renderText #${seq}`);
   };
 
   const dataUnavailable =

package/src/FlameGraph/normalize.ts

@@ -14,16 +14,18 @@ export function normalize(p: {
   }
 
   if (p.profile) {
+    const profile = p.profile as Profile & { __kylinDecoded?: boolean };
     const copy = {
-      ...p.profile,
-      flamebearer: { ...p.profile.flamebearer },
+      ...profile,
+      flamebearer: { ...profile.flamebearer },
     };
 
-    // TODO: copy levels, since that's modified by decode
-    copy.flamebearer.levels = JSON.parse(
-      JSON.stringify(copy.flamebearer.levels)
-    );
-    decodeFlamebearer(copy);
+    // Avoid deep-cloning huge levels arrays; decode once in-place.
+    if (!profile.__kylinDecoded) {
+      decodeFlamebearer(copy);
+      profile.__kylinDecoded = true;
+      (copy as Profile & { __kylinDecoded?: boolean }).__kylinDecoded = true;
+    }
 
     const p2 = {
       ...copy,

package/src/FlameGraph/uniqueness.ts

@@ -4,81 +4,91 @@ export function isSameFlamebearer(
   prevFlame: Flamebearer,
   currFlame: Flamebearer
 ) {
-  // We first compare simple fields, since they are faster
-  if (prevFlame.format !== currFlame.format) {
-    return false;
-  }
+  const prevSig = getFlamebearerSignature(prevFlame);
+  const currSig = getFlamebearerSignature(currFlame);
+  return prevSig === currSig;
+}
 
-  if (prevFlame.numTicks !== currFlame.numTicks) {
-    return false;
+function hashNumbersSample(levels: Flamebearer['levels']) {
+  let hash = 2166136261;
+  const totalLevels = levels.length;
+  if (totalLevels === 0) {
+    return hash >>> 0;
   }
 
-  if (prevFlame.sampleRate !== currFlame.sampleRate) {
-    return false;
-  }
+  const sampleLevels = [0, Math.floor(totalLevels / 2), totalLevels - 1];
+  for (let s = 0; s < sampleLevels.length; s += 1) {
+    const idx = sampleLevels[s];
+    const level = levels[idx];
+    if (!level || level.length === 0) {
+      continue;
+    }
 
-  if (prevFlame.units !== currFlame.units) {
-    return false;
-  }
+    const take = Math.min(8, level.length);
+    for (let i = 0; i < take; i += 1) {
+      hash ^= level[i] | 0;
+      hash = Math.imul(hash, 16777619);
+    }
 
-  if (prevFlame.names?.length !== currFlame?.names.length) {
-    return false;
+    const tailStart = Math.max(0, level.length - take);
+    for (let i = tailStart; i < level.length; i += 1) {
+      hash ^= level[i] | 0;
+      hash = Math.imul(hash, 16777619);
+    }
   }
 
-  if (prevFlame.levels.length !== currFlame.levels.length) {
-    return false;
-  }
+  return hash >>> 0;
+}
 
-  // Most likely names is smaller, so let's start with it
-  // Are all names the same?
-  if (
-    !prevFlame.names.every((a, i) => {
-      return a === currFlame.names[i];
-    })
-  ) {
-    return false;
+function hashStringsSample(names: string[]) {
+  let hash = 2166136261;
+  const count = names.length;
+  if (count === 0) {
+    return hash >>> 0;
   }
 
-  if (!areLevelsTheSame(prevFlame.levels, currFlame.levels)) {
-    return false;
+  const take = Math.min(32, count);
+  const sampleIndices = [
+    ...Array.from({ length: take }, (_, i) => i),
+    ...Array.from({ length: take }, (_, i) => count - take + i),
+  ];
+
+  for (let i = 0; i < sampleIndices.length; i += 1) {
+    const name = names[sampleIndices[i]] || '';
+    for (let j = 0; j < name.length; j += 1) {
+      hash ^= name.charCodeAt(j);
+      hash = Math.imul(hash, 16777619);
+    }
   }
 
-  // Fallback in case new fields are added
-  return (
-    JSON.stringify({
-      ...prevFlame,
-      levels: undefined,
-      names: undefined,
-    }) ===
-    JSON.stringify({
-      ...currFlame,
-      levels: undefined,
-      names: undefined,
-    })
-  );
+  return hash >>> 0;
 }
 
-function areLevelsTheSame(
-  l1: Flamebearer['levels'],
-  l2: Flamebearer['levels']
-) {
-  if (l1.length !== l2.length) {
-    return false;
+function getFlamebearerSignature(flamebearer: Flamebearer) {
+  const cached = (flamebearer as any).__kylinSignature;
+  if (cached) {
+    return cached;
   }
 
-  // eslint-disable-next-line no-plusplus
-  for (let i = 0; i < l1.length; i++) {
-    if (l1[i].length !== l2[i].length) {
-      return false;
-    }
+  const extra = flamebearer as Flamebearer & {
+    leftTicks?: number;
+    rightTicks?: number;
+  };
 
-    // eslint-disable-next-line no-plusplus
-    for (let j = 0; j < l1[i].length; j++) {
-      if (l1[i][j] !== l2[i][j]) {
-        return false;
-      }
-    }
-  }
+  const signature = [
+    flamebearer.format,
+    flamebearer.numTicks,
+    flamebearer.sampleRate,
+    flamebearer.units,
+    flamebearer.maxSelf,
+    flamebearer.names?.length ?? 0,
+    flamebearer.levels?.length ?? 0,
+    extra.leftTicks ?? 'na',
+    extra.rightTicks ?? 'na',
+    hashNumbersSample(flamebearer.levels),
+    hashStringsSample(flamebearer.names || []),
+  ].join('|');
 
-  return true;
+  (flamebearer as any).__kylinSignature = signature;
+  return signature;
 }