fix: add caching + reduce redundant array creation in getHierarchy

packages/plugin-autocapture-browser/src/helpers.ts

@@ -1,6 +1,9 @@
 /* eslint-disable no-restricted-globals */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
 import * as constants from './constants';
-import { ElementInteractionsOptions, ActionType } from '@amplitude/analytics-core';
+import { ElementInteractionsOptions, ActionType, getGlobalScope } from '@amplitude/analytics-core';
 import { getHierarchy } from './hierarchy';
 
 export type JSONValue = string | number | boolean | null | { [x: string]: JSONValue } | Array<JSONValue>;
@@ -289,6 +292,42 @@ export const filterOutNonTrackableEvents = (event: ElementBasedTimestampedEvent<
   return true;
 };
 
+const globalScope = getGlobalScope();
+
+// data structure that caches getNearestLabel results and invalidates the cache
+// after the current event loop is empty
+// TODO: ignoring this for now, the plan is to merge getNearestLabel and getHierarchy
+//       so this will become redundant and be removed in a future PR
+/* istanbul ignore next */
+const nearestLabelCache = {
+  cache: new Map<Element, string>(),
+  isScheduledToClear: false,
+  messageChannel: globalScope?.MessageChannel ? new globalScope.MessageChannel() : null,
+  has(element: Element) {
+    return this.cache.has(element);
+  },
+  get(element: Element) {
+    return this.cache.get(element);
+  },
+  set(element: Element, value: string) {
+    if (!this.messageChannel) {
+      return;
+    }
+    this.cache.set(element, value);
+
+    // schedule the cache to be cleared right after the current event loop is empty
+    if (!this.isScheduledToClear) {
+      this.isScheduledToClear = true;
+      // use message channel to schedule the cache clear
+      this.messageChannel.port1.onmessage = () => {
+        this.cache.clear();
+        this.isScheduledToClear = false;
+      };
+      this.messageChannel.port2.postMessage(null);
+    }
+  },
+};
+
 // Returns the Amplitude event properties for the given element.
 export const getEventProperties = (actionType: ActionType, element: Element, dataAttributePrefix: string) => {
   /* istanbul ignore next */
@@ -298,7 +337,15 @@ export const getEventProperties = (actionType: ActionType, element: Element, dat
     typeof element.getBoundingClientRect === 'function' ? element.getBoundingClientRect() : { left: null, top: null };
   const ariaLabel = element.getAttribute('aria-label');
   const attributes = getAttributesWithPrefix(element, dataAttributePrefix);
-  const nearestLabel = getNearestLabel(element);
+  let nearestLabel = '';
+
+  /* istanbul ignore if */
+  if (nearestLabelCache.has(element)) {
+    nearestLabel = nearestLabelCache.get(element) as string;
+  } else {
+    nearestLabel = getNearestLabel(element);
+    nearestLabelCache.set(element, nearestLabel);
+  }
   /* istanbul ignore next */
   const properties: Record<string, any> = {
     [constants.AMPLITUDE_EVENT_PROP_ELEMENT_ID]: element.getAttribute('id') || '',

packages/plugin-autocapture-browser/src/hierarchy.ts

@@ -1,3 +1,4 @@
+import { getGlobalScope } from '@amplitude/analytics-core';
 import { isNonSensitiveElement, JSONValue } from './helpers';
 import { Hierarchy, HierarchyNode } from './typings/autocapture';
 
@@ -45,15 +46,27 @@ export function getElementProperties(element: Element | null): HierarchyNode | n
     tag: tagName,
   };
 
-  const siblings = Array.from(element.parentElement?.children ?? []);
-  if (siblings.length) {
-    properties.index = siblings.indexOf(element);
-    properties.indexOfType = siblings.filter((el) => el.tagName === element.tagName).indexOf(element);
+  // Get index of element in parent's children and index of type of element in parent's children
+  let indexOfType = 0,
+    indexOfElement = 0;
+  const siblings = element.parentElement?.children ?? [];
+  const siblingsLength = siblings.length;
+  while (indexOfElement < siblingsLength) {
+    const el = siblings[indexOfElement];
+    if (el === element) {
+      properties.index = indexOfElement;
+      properties.indexOfType = indexOfType;
+      break;
+    }
+    indexOfElement++;
+    if (el.tagName === element.tagName) {
+      indexOfType++;
+    }
   }
 
-  const prevSiblingTag = element.previousElementSibling?.tagName?.toLowerCase();
-  if (prevSiblingTag) {
-    properties.prevSib = String(prevSiblingTag);
+  const previousElement = element.previousElementSibling;
+  if (previousElement) {
+    properties.prevSib = String(previousElement.tagName).toLowerCase();
   }
 
   const id = element.getAttribute('id');
@@ -67,24 +80,29 @@ export function getElementProperties(element: Element | null): HierarchyNode | n
   }
 
   const attributes: Record<string, string> = {};
-  const attributesArray = Array.from(element.attributes);
-  const filteredAttributes = attributesArray.filter((attr) => !BLOCKED_ATTRIBUTES.includes(attr.name));
   const isSensitiveElement = !isNonSensitiveElement(element);
 
   // if input is hidden or password or for SVGs, skip attribute collection entirely
+  let hasAttributes = false;
   if (!HIGHLY_SENSITIVE_INPUT_TYPES.includes(String(element.getAttribute('type'))) && !SVG_TAGS.includes(tagName)) {
-    for (const attr of filteredAttributes) {
+    for (let i = 0; i < element.attributes.length; i++) {
+      const attr = element.attributes[i];
+      if (BLOCKED_ATTRIBUTES.includes(attr.name)) {
+        continue;
+      }
+
       // If sensitive element, only allow certain attributes
       if (isSensitiveElement && !SENSITIVE_ELEMENT_ATTRIBUTE_ALLOWLIST.includes(attr.name)) {
         continue;
       }
 
       // Finally cast attribute value to string and limit attribute value length
       attributes[attr.name] = String(attr.value).substring(0, MAX_ATTRIBUTE_LENGTH);
+      hasAttributes = true;
     }
   }
 
-  if (Object.keys(attributes).length) {
+  if (hasAttributes) {
     properties.attrs = attributes;
   }
 
@@ -108,20 +126,62 @@ export function getAncestors(targetEl: Element | null): Element[] {
   return ancestors;
 }
 
+// data structure that caches getHierarchy results so that results can be memoized
+// if it's called on the same element and within the same event loop
+const globalScope = getGlobalScope();
+/* istanbul ignore next */
+
+const hierarchyCache = {
+  cache: new Map<Element, Hierarchy>(),
+  isScheduledToClear: false,
+  /* istanbul ignore next */
+  messageChannel: globalScope?.MessageChannel ? new globalScope.MessageChannel() : null,
+  has(element: Element) {
+    return this.cache.has(element);
+  },
+  get(element: Element) {
+    return this.cache.get(element);
+  },
+  set(element: Element, value: Hierarchy) {
+    /* istanbul ignore next */
+    if (!this.messageChannel) {
+      return;
+    }
+    this.cache.set(element, value);
+
+    // schedule the cache to be cleared right after the current macrotask is done
+    // this is to avoid recalculating getHierarchy for the same element within the same
+    if (!this.isScheduledToClear) {
+      this.isScheduledToClear = true;
+      this.messageChannel.port1.onmessage = () => {
+        this.cache.clear();
+        this.isScheduledToClear = false;
+      };
+      this.messageChannel.port2.postMessage(null);
+    }
+  },
+};
+
 // Get the DOM hierarchy of the element, starting from the target element to the root element.
 export const getHierarchy = (element: Element | null): Hierarchy => {
   let hierarchy: Hierarchy = [];
   if (!element) {
     return [];
   }
 
+  if (hierarchyCache.has(element)) {
+    return hierarchyCache.get(element) as Hierarchy;
+  }
+
   // Get list of ancestors including itself and get properties at each level in the hierarchy
   const ancestors = getAncestors(element);
   hierarchy = ensureListUnderLimit(
     ancestors.map((el) => getElementProperties(el)),
     MAX_HIERARCHY_LENGTH,
   ) as Hierarchy;
 
+  hierarchyCache.set(element, hierarchy);
+
   return hierarchy;
 };
 

packages/plugin-autocapture-browser/test/hierarchy.test.ts

@@ -1,6 +1,64 @@
+/* eslint-disable no-restricted-globals */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
 import * as HierarchyUtil from '../src/hierarchy';
 
+jest.mock('@amplitude/analytics-core', () => {
+  return {
+    getGlobalScope: () => {
+      const globalThis = global as any;
+      class MessageChannel {
+        port1 = {
+          onmessage: null,
+        };
+        port2 = {
+          postMessage: () => {
+            setTimeout(() => {
+              (this.port1.onmessage as any)?.();
+            }, 0);
+          },
+        };
+      }
+      return {
+        MessageChannel,
+        ...globalThis,
+      };
+    },
+  };
+});
+
 describe('autocapture-plugin hierarchy', () => {
+  // beforeAll(() => {
+  //   // mock getGlobalScope
+  //   jest.spyOn(AnalyticsCore, 'getGlobalScope').mockImplementation(() => {
+  //     const globalThis = global as any;
+  //     console.log("RETURNING GLOBAL SCOPE");
+  //     return {
+  //       MessageChannel: function () {
+  //         return {
+  //           port1: {
+  //             onmessage: () => {},
+  //           },
+  //           port2: {
+  //             postMessage: () => {},
+  //           },
+  //         };
+  //       },
+  //       ...globalThis,
+  //     };
+  //   });
+  //   // (global as any).MessageChannel = function () {
+  //   //   return {
+  //   //     port1: {
+  //   //       onmessage: () => {},
+  //   //     },
+  //   //     port2: {
+  //   //       postMessage: () => {},
+  //   //     },
+  //   //   };
+  //   // };
+  // });
   afterEach(() => {
     document.getElementsByTagName('body')[0].innerHTML = '';
     jest.clearAllMocks();
@@ -244,6 +302,24 @@ describe('getHierarchy', () => {
     expect(HierarchyUtil.getHierarchy(nullElement)).toEqual([]);
   });
 
+  test('should re-use cached hierarchy', async () => {
+    document.getElementsByTagName('body')[0].innerHTML = `
+      <div id="parent2">
+        <div id="parent1">
+          <div id="inner">
+            xxx
+          </div>
+        </div>
+      </div>
+    `;
+
+    const inner = document.getElementById('inner');
+    const hierarchy = HierarchyUtil.getHierarchy(inner);
+    const hierarchy2 = HierarchyUtil.getHierarchy(inner);
+    expect(hierarchy2).toBe(hierarchy);
+    await new Promise((resolve) => setTimeout(resolve, 1));
+  });
+
   describe('[Amplitude] Element Hierarchy property:', () => {
     test('should cut off hierarchy output nodes to stay less than or equal to 1024 chars', () => {
       document.getElementsByTagName('body')[0].innerHTML = `