diff --git a/packages/plugin-autocapture-browser/src/helpers.ts b/packages/plugin-autocapture-browser/src/helpers.ts
index a94ebf447..00283d38a 100644
--- a/packages/plugin-autocapture-browser/src/helpers.ts
+++ b/packages/plugin-autocapture-browser/src/helpers.ts
@@ -181,26 +181,6 @@ export const removeEmptyProperties = (properties: { [key: string]: unknown }) =>
   }, {});
 };
 
-export const getNearestLabel = (element: Element): string => {
-  const parent = element.parentElement;
-  if (!parent) {
-    return '';
-  }
-  let labelElement;
-  try {
-    labelElement = parent.querySelector(':scope>span,h1,h2,h3,h4,h5,h6');
-  } catch (error) {
-    /* istanbul ignore next */
-    labelElement = null;
-  }
-  if (labelElement) {
-    /* istanbul ignore next */
-    const labelText = labelElement.textContent || '';
-    return isNonSensitiveString(labelText) ? labelText : '';
-  }
-  return getNearestLabel(parent);
-};
-
 export const querySelectUniqueElements = (root: Element | Document, selectors: string[]): Element[] => {
   if (root && 'querySelectorAll' in root && typeof root.querySelectorAll === 'function') {
     const elementSet = selectors.reduce((elements: Set<Element>, selector) => {
@@ -298,12 +278,12 @@ 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);
+  const { hierarchy, nearestLabel } = getHierarchy(element);
   /* istanbul ignore next */
   const properties: Record<string, any> = {
     [constants.AMPLITUDE_EVENT_PROP_ELEMENT_ID]: element.getAttribute('id') || '',
     [constants.AMPLITUDE_EVENT_PROP_ELEMENT_CLASS]: element.getAttribute('class'),
-    [constants.AMPLITUDE_EVENT_PROP_ELEMENT_HIERARCHY]: getHierarchy(element),
+    [constants.AMPLITUDE_EVENT_PROP_ELEMENT_HIERARCHY]: hierarchy,
     [constants.AMPLITUDE_EVENT_PROP_ELEMENT_TAG]: tag,
     [constants.AMPLITUDE_EVENT_PROP_ELEMENT_TEXT]: getText(element),
     [constants.AMPLITUDE_EVENT_PROP_ELEMENT_POSITION_LEFT]: rect.left == null ? null : Math.round(rect.left),
diff --git a/packages/plugin-autocapture-browser/src/hierarchy.ts b/packages/plugin-autocapture-browser/src/hierarchy.ts
index 5c534ba07..e8eea7322 100644
--- a/packages/plugin-autocapture-browser/src/hierarchy.ts
+++ b/packages/plugin-autocapture-browser/src/hierarchy.ts
@@ -1,6 +1,9 @@
-import { isNonSensitiveElement, JSONValue } from './helpers';
+import { getGlobalScope } from '@amplitude/analytics-core';
+import { isNonSensitiveElement, isNonSensitiveString, JSONValue } from './helpers';
 import { Hierarchy, HierarchyNode } from './typings/autocapture';
 
+const globalScope = getGlobalScope();
+
 const BLOCKED_ATTRIBUTES = [
   // Already captured elsewhere in the hierarchy object
   'id',
@@ -35,25 +38,58 @@ const HIGHLY_SENSITIVE_INPUT_TYPES = ['password', 'hidden'];
 const MAX_ATTRIBUTE_LENGTH = 128;
 const MAX_HIERARCHY_LENGTH = 1024;
 
-export function getElementProperties(element: Element | null): HierarchyNode | null {
+export function getElementProperties(element: Element | null, skipNearestLabel = false): {
+  properties: HierarchyNode | null;
+  nearestLabel: string;
+} {
   if (element === null) {
-    return null;
+    return { properties: null, nearestLabel: '' };
   }
 
+  let nearestLabel = '';
   const tagName = String(element.tagName).toLowerCase();
   const properties: HierarchyNode = {
     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 ?? [];
+  while (indexOfElement < siblings.length) {
+    const el = siblings[indexOfElement];
+    if (el === element) {
+      properties.index = indexOfElement;
+      properties.indexOfType = indexOfType;
+      if (skipNearestLabel) {
+        break;
+      }
+    }
+    indexOfElement++;
+    if (el.tagName === element.tagName) {
+      indexOfType++;
+    }
+    const tagName = el.tagName.toLowerCase();
+    let labelEl;
+    if (!nearestLabel && !skipNearestLabel) {
+      if (['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName)) {
+        labelEl = el;
+      } else {
+        labelEl = el.querySelector('h1,h2,h3,h4,h5,h6');
+      }
+    }
+
+    // TODO: DO NOT MERGE THE IGNORE!!! ADD A TEST!!!
+    /* istanbul ignore next */
+    if (labelEl) {
+      nearestLabel = labelEl.textContent || '';
+      nearestLabel = isNonSensitiveString(nearestLabel) ? nearestLabel : '';
+    }
   }
 
-  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,13 +103,17 @@ 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;
@@ -81,14 +121,15 @@ export function getElementProperties(element: Element | null): HierarchyNode | n
 
       // 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;
   }
 
-  return properties;
+  return { properties, nearestLabel };
 }
 
 export function getAncestors(targetEl: Element | null): Element[] {
@@ -108,21 +149,53 @@ export function getAncestors(targetEl: Element | null): Element[] {
   return ancestors;
 }
 
+type HierarchyResult = {
+  hierarchy: Hierarchy;
+  nearestLabel: string;
+};
+
+const hierarchyCache = new Map<Element, HierarchyResult>();
+
 // Get the DOM hierarchy of the element, starting from the target element to the root element.
-export const getHierarchy = (element: Element | null): Hierarchy => {
+export const getHierarchy = (element: Element | null): HierarchyResult => {
   let hierarchy: Hierarchy = [];
   if (!element) {
-    return [];
+    return { hierarchy: [], nearestLabel: '' };
+  }
+
+  if (hierarchyCache.has(element)) {
+    return hierarchyCache.get(element) as HierarchyResult;
   }
 
   // Get list of ancestors including itself and get properties at each level in the hierarchy
   const ancestors = getAncestors(element);
+  let nearestLabel = '';
   hierarchy = ensureListUnderLimit(
-    ancestors.map((el) => getElementProperties(el)),
+    ancestors.map((el) => {
+      const skipNearestLabel = nearestLabel !== '';
+      const { properties, nearestLabel: currNearestLabel } = getElementProperties(el, skipNearestLabel);
+      if (!nearestLabel && currNearestLabel) {
+        nearestLabel = currNearestLabel;
+      }
+      return properties;
+    }),
     MAX_HIERARCHY_LENGTH,
   ) as Hierarchy;
 
-  return hierarchy;
+  // memoize the results of this method so that if another handler calls this method
+  // on the same element and within the same event loop, we don't need to
+  // re-calculate the hierarchy
+  // (e.g.: clicking a "checkbox" will invoke a click and a change event)
+  // TODO: DO NOT MERGE THE IGNORE!!! ADD A TEST!!!
+  /* istanbul ignore next */
+  if (globalScope?.queueMicrotask) {
+    hierarchyCache.set(element, { hierarchy, nearestLabel });
+    globalScope.queueMicrotask(() => {
+      hierarchyCache.clear();
+    });
+  }
+
+  return { hierarchy, nearestLabel };
 };
 
 export function ensureListUnderLimit(list: Hierarchy | JSONValue[], bytesLimit: number): Hierarchy | JSONValue[] {
diff --git a/packages/plugin-autocapture-browser/test/helpers.test.ts b/packages/plugin-autocapture-browser/test/helpers.test.ts
index 0abfd8392..19927c4ff 100644
--- a/packages/plugin-autocapture-browser/test/helpers.test.ts
+++ b/packages/plugin-autocapture-browser/test/helpers.test.ts
@@ -1,3 +1,4 @@
+import { getHierarchy } from '../src/hierarchy';
 import {
   isNonSensitiveString,
   isTextNode,
@@ -7,7 +8,6 @@ import {
   getAttributesWithPrefix,
   isEmpty,
   removeEmptyProperties,
-  getNearestLabel,
   querySelectUniqueElements,
   getClosestElement,
   getEventTagProps,
@@ -299,7 +299,7 @@ describe('autocapture-plugin helpers', () => {
     });
   });
 
-  describe('getNearestLabel', () => {
+  describe('getHierarchy().nearestLabel', () => {
     test('should return nearest label of the element', () => {
       const div = document.createElement('div');
       const span = document.createElement('span');
@@ -308,7 +308,7 @@ describe('autocapture-plugin helpers', () => {
       div.appendChild(span);
       div.appendChild(input);
 
-      const result = getNearestLabel(input);
+      const result = getHierarchy(input).nearestLabel;
       expect(result).toEqual('nearest label');
     });
 
@@ -320,7 +320,7 @@ describe('autocapture-plugin helpers', () => {
       div.appendChild(span);
       div.appendChild(input);
 
-      const result = getNearestLabel(input);
+      const result = getHierarchy(input).nearestLabel;
       expect(result).toEqual('');
     });
 
@@ -334,14 +334,14 @@ describe('autocapture-plugin helpers', () => {
       const input = document.createElement('input');
       innerDiv.appendChild(input);
 
-      const result = getNearestLabel(input);
+      const result = getHierarchy(input).nearestLabel;
       expect(result).toEqual('parent label');
     });
 
     test('should return empty string when there is no parent', () => {
       const input = document.createElement('input');
 
-      const result = getNearestLabel(input);
+      const result = getHierarchy(input).nearestLabel;
       expect(result).toEqual('');
     });
   });
diff --git a/packages/plugin-autocapture-browser/test/hierarchy.test.ts b/packages/plugin-autocapture-browser/test/hierarchy.test.ts
index 90ce15572..f4534c655 100644
--- a/packages/plugin-autocapture-browser/test/hierarchy.test.ts
+++ b/packages/plugin-autocapture-browser/test/hierarchy.test.ts
@@ -19,7 +19,7 @@ describe('autocapture-plugin hierarchy', () => {
       `;
 
       const nullElement = document.getElementById('null-element');
-      expect(HierarchyUtil.getElementProperties(nullElement)).toEqual(null);
+      expect(HierarchyUtil.getElementProperties(nullElement).properties).toEqual(null);
     });
 
     test('should return tag and index information if element has siblings', () => {
@@ -41,7 +41,7 @@ describe('autocapture-plugin hierarchy', () => {
       `;
 
       const inner4 = document.getElementById('inner4');
-      expect(HierarchyUtil.getElementProperties(inner4)).toEqual({
+      expect(HierarchyUtil.getElementProperties(inner4).properties).toEqual({
         id: 'inner4',
         index: 3,
         indexOfType: 1,
@@ -63,7 +63,7 @@ describe('autocapture-plugin hierarchy', () => {
       `;
 
       const inner = document.getElementById('inner');
-      expect(HierarchyUtil.getElementProperties(inner)).toEqual({
+      expect(HierarchyUtil.getElementProperties(inner).properties).toEqual({
         id: 'inner',
         index: 0,
         indexOfType: 0,
@@ -81,7 +81,7 @@ describe('autocapture-plugin hierarchy', () => {
       `;
 
       const inner = document.getElementById('inner');
-      expect(HierarchyUtil.getElementProperties(inner)).toEqual({
+      expect(HierarchyUtil.getElementProperties(inner).properties).toEqual({
         id: 'inner',
         index: 0,
         indexOfType: 0,
@@ -94,7 +94,7 @@ describe('autocapture-plugin hierarchy', () => {
   test('should not fail when parent element is null', () => {
     const parentlessElement = document.createElement('div');
 
-    expect(HierarchyUtil.getElementProperties(parentlessElement)).toEqual({
+    expect(HierarchyUtil.getElementProperties(parentlessElement).properties).toEqual({
       tag: 'div',
     });
   });
@@ -106,7 +106,7 @@ describe('autocapture-plugin hierarchy', () => {
     `;
 
       const target = document.getElementById('target');
-      expect(HierarchyUtil.getElementProperties(target)).toEqual({
+      expect(HierarchyUtil.getElementProperties(target).properties).toEqual({
         id: 'target',
         index: 0,
         indexOfType: 0,
@@ -123,7 +123,7 @@ describe('autocapture-plugin hierarchy', () => {
     `;
 
       const target = document.getElementById('target');
-      expect(HierarchyUtil.getElementProperties(target)).toEqual({
+      expect(HierarchyUtil.getElementProperties(target).properties).toEqual({
         id: 'target',
         index: 0,
         indexOfType: 0,
@@ -140,7 +140,7 @@ describe('autocapture-plugin hierarchy', () => {
     `;
 
       const target = document.getElementById('target');
-      expect(HierarchyUtil.getElementProperties(target)).toEqual({
+      expect(HierarchyUtil.getElementProperties(target).properties).toEqual({
         id: 'target',
         index: 0,
         indexOfType: 0,
@@ -155,7 +155,7 @@ describe('autocapture-plugin hierarchy', () => {
     `;
 
       const target = document.getElementById('target');
-      expect(HierarchyUtil.getElementProperties(target)).toEqual({
+      expect(HierarchyUtil.getElementProperties(target).properties).toEqual({
         id: 'target',
         index: 0,
         indexOfType: 0,
@@ -210,7 +210,7 @@ describe('getHierarchy', () => {
 
     const inner2 = document.getElementById('inner2');
 
-    expect(HierarchyUtil.getHierarchy(inner2)).toEqual([
+    expect(HierarchyUtil.getHierarchy(inner2).hierarchy).toEqual([
       {
         id: 'inner2',
         index: 1,
@@ -241,7 +241,7 @@ describe('getHierarchy', () => {
 
   test('should not fail when element is null', () => {
     const nullElement = null;
-    expect(HierarchyUtil.getHierarchy(nullElement)).toEqual([]);
+    expect(HierarchyUtil.getHierarchy(nullElement).hierarchy).toEqual([]);
   });
 
   describe('[Amplitude] Element Hierarchy property:', () => {
@@ -264,7 +264,7 @@ describe('getHierarchy', () => {
     `;
 
       const inner12345 = document.getElementById('inner12345');
-      const innerHierarchy = HierarchyUtil.getHierarchy(inner12345);
+      const innerHierarchy = HierarchyUtil.getHierarchy(inner12345).hierarchy;
       // expect innerHierarchy to not have body to stay under 1024 chars
       expect(innerHierarchy).toEqual([
         {
diff --git a/test-server/autocapture/performance-test.html b/test-server/autocapture/performance-test.html
new file mode 100644
index 000000000..be8c6167a
--- /dev/null
+++ b/test-server/autocapture/performance-test.html
@@ -0,0 +1,529 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/amplitude.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Performance Test - Deep DOM Hierarchy</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        margin: 20px;
+        background-color: #f5f5f5;
+      }
+      
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        background: white;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+      }
+      
+      .performance-info {
+        background: #e3f2fd;
+        border: 1px solid #2196f3;
+        border-radius: 4px;
+        padding: 15px;
+        margin-bottom: 20px;
+      }
+      
+      .deep-nested-container {
+        border: 2px solid #ff9800;
+        padding: 10px;
+        margin: 10px 0;
+        background: #fff3e0;
+      }
+      
+      .nested-level {
+        border: 1px solid #ccc;
+        padding: 8px;
+        margin: 5px;
+        background: #fafafa;
+      }
+      
+      .checkbox-container {
+        background: #e8f5e8;
+        border: 2px solid #4caf50;
+        padding: 15px;
+        margin: 20px 0;
+        border-radius: 4px;
+      }
+      
+      .target-checkbox {
+        transform: scale(1.5);
+        margin: 10px;
+      }
+      
+      .performance-metrics {
+        background: #f0f8ff;
+        border: 1px solid #0066cc;
+        border-radius: 4px;
+        padding: 15px;
+        margin: 20px 0;
+        font-family: monospace;
+      }
+      
+      .btn {
+        background: #2196f3;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 4px;
+        cursor: pointer;
+        margin: 5px;
+      }
+      
+      .btn:hover {
+        background: #1976d2;
+      }
+      
+      .btn:active {
+        background: #0d47a1;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>Performance Test - Deep DOM Hierarchy</h1>
+      
+      <div class="performance-info">
+        <h3>Test Description</h3>
+        <p>This page creates a deeply nested DOM structure with many attributes, classes, and siblings to test the performance of the <code>getHierarchy</code> function. The target checkbox is nested 15 levels deep with 12 siblings at each level.</p>
+        <ul>
+          <li><strong>DOM Depth:</strong> 15 levels deep</li>
+          <li><strong>Siblings per level:</strong> 12 elements</li>
+          <li><strong>Attributes per element:</strong> 5-10 attributes</li>
+          <li><strong>Classes per element:</strong> 3-5 classes</li>
+          <li><strong>Total DOM operations:</strong> ~1000+ operations per hierarchy calculation</li>
+        </ul>
+      </div>
+
+      <div class="performance-metrics">
+        <h3>Performance Metrics</h3>
+        <div id="metrics">
+          <p>Click the checkbox below to trigger the performance test...</p>
+        </div>
+      </div>
+
+      <div class="checkbox-container">
+        <h3>Target Checkbox (Deeply Nested)</h3>
+        <p>This checkbox is nested 15 levels deep in the DOM. Clicking it will trigger <code>getHierarchy</code> to process the entire ancestor chain.</p>
+        
+        <div id="deep-hierarchy-container">
+          <!-- Deep hierarchy will be generated here -->
+        </div>
+      </div>
+
+      <div class="deep-nested-container">
+        <h3>Sibling Elements (Level 1)</h3>
+        <div id="siblings-level-1">
+          <!-- Siblings will be generated here -->
+        </div>
+      </div>
+
+      <div class="deep-nested-container">
+        <h3>Additional Sibling Elements (Level 2)</h3>
+        <div id="siblings-level-2">
+          <!-- Siblings will be generated here -->
+        </div>
+      </div>
+
+      <div class="deep-nested-container">
+        <h3>Control Buttons</h3>
+        <button class="btn" id="reset-test">Reset Test</button>
+        <button class="btn" id="run-benchmark">Run Benchmark (20 clicks)</button>
+        <button class="btn" id="clear-metrics">Clear Metrics</button>
+      </div>
+    </div>
+
+    <script type="module">
+      import * as amplitude from '@amplitude/analytics-browser';
+      import { frustrationPlugin } from '@amplitude/plugin-autocapture-browser';
+      
+      window.amplitude = amplitude;
+      const frustrationInteractions = {
+        deadClicks: true,
+        rageClicks: true,
+      };
+      //amplitude.add(frustrationPlugin(frustrationInteractions));
+      amplitude.init(
+        import.meta.env.VITE_AMPLITUDE_API_KEY,
+        import.meta.env.VITE_AMPLITUDE_USER_ID || 'amplitude-typescript performance test user',
+        {
+          autocapture: {
+            elementInteractions: true,
+          },
+        }
+      );
+
+      // Performance tracking variables
+      let clickCount = 0;
+      let totalTime = 0;
+      let startTime = 0;
+      let isTracking = false;
+      let clickTimes = []; // Array to store individual click times for median calculation
+
+      // Get the metrics div
+      const metricsDiv = document.getElementById('metrics');
+
+      // Function to update metrics display
+      function updateMetrics() {
+        const avgTime = clickCount > 0 ? (totalTime / clickCount).toFixed(2) : 0;
+        const medianTime = clickTimes.length > 0 ? calculateMedian(clickTimes).toFixed(2) : 0;
+        metricsDiv.innerHTML = `
+          <p><strong>Test Results:</strong></p>
+          <p>Total clicks: ${clickCount}</p>
+          <p>Total time: ${totalTime.toFixed(2)}ms</p>
+          <p>Average time per click: ${avgTime}ms</p>
+          <p>Median time per click: ${medianTime}ms</p>
+          <p>Last click time: ${startTime > 0 ? (Date.now() - startTime).toFixed(2) : 0}ms</p>
+          <p>Status: ${isTracking ? 'Tracking...' : 'Ready'}</p>
+        `;
+      }
+
+      // Function to calculate median
+      function calculateMedian(numbers) {
+        const sorted = numbers.slice().sort((a, b) => a - b);
+        const middle = Math.floor(sorted.length / 2);
+        
+        if (sorted.length % 2 === 0) {
+          return (sorted[middle - 1] + sorted[middle]) / 2;
+        } else {
+          return sorted[middle];
+        }
+      }
+
+      // Function to measure performance
+      function measurePerformance() {
+        startTime = Date.now();
+        isTracking = true;
+        
+        // Use requestAnimationFrame to ensure DOM operations are complete
+        requestAnimationFrame(() => {
+          const endTime = Date.now();
+          const duration = endTime - startTime;
+          
+          totalTime += duration;
+          clickCount++;
+          clickTimes.push(duration);
+          isTracking = false;
+          
+          updateMetrics();
+          console.log(`Performance test click ${clickCount}: ${duration}ms`);
+        });
+      }
+
+      // Initialize metrics display
+      updateMetrics();
+
+      // Generate the deep DOM hierarchy programmatically
+      function generateDeepHierarchy() {
+        const container = document.getElementById('deep-hierarchy-container');
+        const depth = 15;
+        const childrenPerLevel = 12;
+        
+        let currentElement = container;
+        
+        for (let level = 1; level <= depth; level++) {
+          const levelDiv = document.createElement('div');
+          levelDiv.className = 'nested-level';
+          levelDiv.setAttribute('data-level', level.toString());
+          levelDiv.setAttribute('data-test-id', `level-${level}`);
+          levelDiv.setAttribute('data-performance', 'test');
+          levelDiv.setAttribute('data-depth', (depth - level + 1).toString());
+          levelDiv.setAttribute('data-siblings', childrenPerLevel.toString());
+          levelDiv.setAttribute('data-generated', 'true');
+          
+          // Add many more attributes for maximum complexity
+          levelDiv.setAttribute('data-complexity', 'high');
+          levelDiv.setAttribute('data-stress-test', 'true');
+          levelDiv.setAttribute('data-hierarchy-level', level.toString());
+          levelDiv.setAttribute('data-element-type', 'container');
+          levelDiv.setAttribute('data-visibility', 'visible');
+          levelDiv.setAttribute('data-interactive', 'false');
+          levelDiv.setAttribute('data-semantic-role', 'generic');
+          levelDiv.setAttribute('data-accessibility-level', level.toString());
+          levelDiv.setAttribute('data-render-priority', 'normal');
+          levelDiv.setAttribute('data-layout-type', 'block');
+          levelDiv.setAttribute('data-styling-context', 'standard');
+          levelDiv.setAttribute('data-event-handlers', 'none');
+          levelDiv.setAttribute('data-animation-state', 'static');
+          levelDiv.setAttribute('data-responsive-breakpoint', 'desktop');
+          levelDiv.setAttribute('data-theme-context', 'default');
+          levelDiv.setAttribute('data-localization-key', `level_${level}_container`);
+          levelDiv.setAttribute('data-analytics-category', 'hierarchy-test');
+          levelDiv.setAttribute('data-performance-marker', `level-${level}-marker`);
+          levelDiv.setAttribute('data-debug-info', `Generated at ${Date.now()}`);
+          
+          currentElement.appendChild(levelDiv);
+          
+          // Add 12 siblings at this level (including the one that continues the path)
+          for (let siblingIndex = 1; siblingIndex <= childrenPerLevel; siblingIndex++) {
+            if (siblingIndex === 1) {
+              // The first sibling continues the path to the checkbox
+              currentElement = levelDiv;
+            } else {
+              // Create additional siblings at this level
+              const siblingDiv = document.createElement('div');
+              siblingDiv.className = 'nested-level sibling-element';
+              siblingDiv.setAttribute('data-level', level.toString());
+              siblingDiv.setAttribute('data-sibling', siblingIndex.toString());
+              siblingDiv.setAttribute('data-test-id', `sibling-${level}-${siblingIndex}`);
+              siblingDiv.setAttribute('data-performance', 'test');
+              siblingDiv.setAttribute('data-depth', (depth - level + 1).toString());
+              siblingDiv.setAttribute('data-siblings', childrenPerLevel.toString());
+              siblingDiv.setAttribute('data-generated', 'true');
+              siblingDiv.setAttribute('data-complexity', 'high');
+              siblingDiv.setAttribute('data-stress-test', 'true');
+              siblingDiv.setAttribute('data-sibling-index', siblingIndex.toString());
+              
+              // Add many more attributes for maximum complexity
+              siblingDiv.setAttribute('data-element-type', 'sibling');
+              siblingDiv.setAttribute('data-visibility', 'visible');
+              siblingDiv.setAttribute('data-interactive', 'false');
+              siblingDiv.setAttribute('data-semantic-role', 'generic');
+              siblingDiv.setAttribute('data-accessibility-level', level.toString());
+              siblingDiv.setAttribute('data-render-priority', 'low');
+              siblingDiv.setAttribute('data-layout-type', 'inline-block');
+              siblingDiv.setAttribute('data-styling-context', 'sibling');
+              siblingDiv.setAttribute('data-event-handlers', 'none');
+              siblingDiv.setAttribute('data-animation-state', 'static');
+              siblingDiv.setAttribute('data-responsive-breakpoint', 'desktop');
+              siblingDiv.setAttribute('data-theme-context', 'default');
+              siblingDiv.setAttribute('data-localization-key', `sibling_${level}_${siblingIndex}`);
+              siblingDiv.setAttribute('data-analytics-category', 'hierarchy-test-sibling');
+              siblingDiv.setAttribute('data-performance-marker', `sibling-${level}-${siblingIndex}-marker`);
+              siblingDiv.setAttribute('data-debug-info', `Generated at ${Date.now()}`);
+              siblingDiv.setAttribute('data-sibling-position', siblingIndex.toString());
+              siblingDiv.setAttribute('data-sibling-total', childrenPerLevel.toString());
+              siblingDiv.setAttribute('data-sibling-type', 'additional');
+              siblingDiv.setAttribute('data-sibling-role', 'test-element');
+              siblingDiv.setAttribute('data-sibling-complexity', 'high');
+              siblingDiv.setAttribute('data-sibling-stress-level', 'maximum');
+              siblingDiv.setAttribute('data-external-sibling', 'true');
+              siblingDiv.setAttribute('data-external-level', level.toString());
+              siblingDiv.setAttribute('data-external-index', siblingIndex.toString());
+              siblingDiv.setAttribute('data-external-complexity', 'extreme');
+              siblingDiv.setAttribute('data-external-attributes', '25');
+              siblingDiv.setAttribute('data-external-performance', 'stress-test');
+              
+              const span = document.createElement('span');
+              span.textContent = `Sibling ${level}-${siblingIndex}`;
+              siblingDiv.appendChild(span);
+              
+              currentElement.appendChild(siblingDiv);
+            }
+          }
+        }
+        
+        // Add the target checkbox at the deepest level
+        const label = document.createElement('label');
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.className = 'target-checkbox';
+        checkbox.id = 'performance-test-checkbox';
+        checkbox.setAttribute('data-test-id', 'target-checkbox');
+        checkbox.setAttribute('data-performance', 'test');
+        checkbox.setAttribute('data-depth', '0');
+        checkbox.setAttribute('data-expensive', 'true');
+        checkbox.setAttribute('data-complex', 'true');
+        checkbox.setAttribute('data-nested', 'deep');
+        checkbox.setAttribute('data-generated', 'true');
+        
+        // Add many more attributes to the checkbox for maximum complexity
+        checkbox.setAttribute('data-element-type', 'input');
+        checkbox.setAttribute('data-input-type', 'checkbox');
+        checkbox.setAttribute('data-visibility', 'visible');
+        checkbox.setAttribute('data-interactive', 'true');
+        checkbox.setAttribute('data-semantic-role', 'checkbox');
+        checkbox.setAttribute('data-accessibility-level', '0');
+        checkbox.setAttribute('data-render-priority', 'high');
+        checkbox.setAttribute('data-layout-type', 'inline');
+        checkbox.setAttribute('data-styling-context', 'form-control');
+        checkbox.setAttribute('data-event-handlers', 'click');
+        checkbox.setAttribute('data-animation-state', 'static');
+        checkbox.setAttribute('data-responsive-breakpoint', 'desktop');
+        checkbox.setAttribute('data-theme-context', 'form');
+        checkbox.setAttribute('data-localization-key', 'performance_test_checkbox');
+        checkbox.setAttribute('data-analytics-category', 'hierarchy-test-target');
+        checkbox.setAttribute('data-performance-marker', 'target-checkbox-marker');
+        checkbox.setAttribute('data-debug-info', `Generated at ${Date.now()}`);
+        checkbox.setAttribute('data-target-element', 'true');
+        checkbox.setAttribute('data-target-complexity', 'maximum');
+        checkbox.setAttribute('data-target-stress-level', 'extreme');
+        checkbox.setAttribute('data-target-hierarchy-depth', depth.toString());
+        checkbox.setAttribute('data-target-siblings-total', (depth * childrenPerLevel).toString());
+        checkbox.setAttribute('data-target-attributes-count', '25');
+        checkbox.setAttribute('data-target-performance-test', 'true');
+        checkbox.setAttribute('data-target-benchmark-element', 'true');
+        
+        label.appendChild(checkbox);
+        label.appendChild(document.createTextNode(' Performance Test Checkbox'));
+        currentElement.appendChild(label);
+        
+        return checkbox;
+      }
+
+      // Generate sibling elements for a specific level
+      function generateSiblings(containerId, level, count) {
+        const container = document.getElementById(containerId);
+        
+        for (let i = 1; i <= count; i++) {
+          const siblingDiv = document.createElement('div');
+          siblingDiv.className = 'nested-level sibling-element';
+          siblingDiv.setAttribute('data-level', level.toString());
+          siblingDiv.setAttribute('data-sibling', i.toString());
+          siblingDiv.setAttribute('data-test-id', `sibling-${level}-${i}`);
+          siblingDiv.setAttribute('data-performance', 'test');
+          siblingDiv.setAttribute('data-depth', (15 - level + 1).toString());
+          siblingDiv.setAttribute('data-siblings', count.toString());
+          siblingDiv.setAttribute('data-generated', 'true');
+          siblingDiv.setAttribute('data-complexity', 'high');
+          siblingDiv.setAttribute('data-stress-test', 'true');
+          siblingDiv.setAttribute('data-sibling-index', i.toString());
+          
+          // Add many more attributes for maximum complexity
+          siblingDiv.setAttribute('data-element-type', 'sibling');
+          siblingDiv.setAttribute('data-visibility', 'visible');
+          siblingDiv.setAttribute('data-interactive', 'false');
+          siblingDiv.setAttribute('data-semantic-role', 'generic');
+          siblingDiv.setAttribute('data-accessibility-level', level.toString());
+          siblingDiv.setAttribute('data-render-priority', 'low');
+          siblingDiv.setAttribute('data-layout-type', 'inline-block');
+          siblingDiv.setAttribute('data-styling-context', 'sibling');
+          siblingDiv.setAttribute('data-event-handlers', 'none');
+          siblingDiv.setAttribute('data-animation-state', 'static');
+          siblingDiv.setAttribute('data-responsive-breakpoint', 'desktop');
+          siblingDiv.setAttribute('data-theme-context', 'default');
+          siblingDiv.setAttribute('data-localization-key', `sibling_${level}_${i}`);
+          siblingDiv.setAttribute('data-analytics-category', 'hierarchy-test-sibling');
+          siblingDiv.setAttribute('data-performance-marker', `sibling-${level}-${i}-marker`);
+          siblingDiv.setAttribute('data-debug-info', `Generated at ${Date.now()}`);
+          siblingDiv.setAttribute('data-sibling-position', i.toString());
+          siblingDiv.setAttribute('data-sibling-total', count.toString());
+          siblingDiv.setAttribute('data-sibling-type', 'additional');
+          siblingDiv.setAttribute('data-sibling-role', 'test-element');
+          siblingDiv.setAttribute('data-sibling-complexity', 'high');
+          siblingDiv.setAttribute('data-sibling-stress-level', 'maximum');
+          siblingDiv.setAttribute('data-external-sibling', 'true');
+          siblingDiv.setAttribute('data-external-level', level.toString());
+          siblingDiv.setAttribute('data-external-index', i.toString());
+          siblingDiv.setAttribute('data-external-complexity', 'extreme');
+          siblingDiv.setAttribute('data-external-attributes', '25');
+          siblingDiv.setAttribute('data-external-performance', 'stress-test');
+          
+          const span = document.createElement('span');
+          span.textContent = `Sibling ${level}-${i}`;
+          siblingDiv.appendChild(span);
+          
+          container.appendChild(siblingDiv);
+        }
+      }
+
+      // Generate all DOM elements
+      function generateAllElements() {
+        console.log('Generating deep DOM hierarchy...');
+        
+        // Generate the deep hierarchy and get the checkbox reference
+        const generatedCheckbox = generateDeepHierarchy();
+        
+        // Generate siblings for level 1 (12 siblings)
+        generateSiblings('siblings-level-1', 1, 12);
+        
+        // Generate siblings for level 2 (12 siblings)
+        generateSiblings('siblings-level-2', 2, 12);
+        
+        console.log('DOM hierarchy generation completed');
+        console.log('Target checkbox DOM depth:', getElementDepth(generatedCheckbox));
+        console.log('Total sibling elements at level 1:', document.querySelectorAll('[data-level="1"]').length);
+        console.log('Total sibling elements at level 2:', document.querySelectorAll('[data-level="2"]').length);
+        
+        return generatedCheckbox;
+      }
+
+      // Generate the DOM structure when the page loads
+      const targetCheckbox = generateAllElements();
+
+      // Add click event listener to the target checkbox
+      targetCheckbox.addEventListener('click', measurePerformance);
+
+      // Reset test button
+      document.getElementById('reset-test').addEventListener('click', () => {
+        clickCount = 0;
+        totalTime = 0;
+        startTime = 0;
+        isTracking = false;
+        clickTimes = [];
+        updateMetrics();
+        console.log('Performance test reset');
+      });
+
+      // Run benchmark button
+      document.getElementById('run-benchmark').addEventListener('click', () => {
+        console.log('Starting benchmark test...');
+        let benchmarkCount = 0;
+        const maxBenchmark = 20; // Increased from 10 to 20
+        
+        function runBenchmarkClick() {
+          if (benchmarkCount < maxBenchmark) {
+            targetCheckbox.click();
+            benchmarkCount++;
+            setTimeout(runBenchmarkClick, 100); // Small delay between clicks
+          } else {
+            // Calculate and display final statistics
+            const avgTime = (totalTime / clickCount).toFixed(2);
+            const medianTime = calculateMedian(clickTimes).toFixed(2);
+            const minTime = Math.min(...clickTimes).toFixed(2);
+            const maxTime = Math.max(...clickTimes).toFixed(2);
+            
+            console.log('=== BENCHMARK COMPLETED ===');
+            console.log(`Total clicks: ${clickCount}`);
+            console.log(`Total time: ${totalTime.toFixed(2)}ms`);
+            console.log(`Average time: ${avgTime}ms`);
+            console.log(`Median time: ${medianTime}ms`);
+            console.log(`Min time: ${minTime}ms`);
+            console.log(`Max time: ${maxTime}ms`);
+            console.log('==========================');
+            
+            // Update the metrics display with final results
+            metricsDiv.innerHTML = `
+              <p><strong>BENCHMARK COMPLETED (${clickCount} clicks)</strong></p>
+              <p>Total time: ${totalTime.toFixed(2)}ms</p>
+              <p>Average time per click: ${avgTime}ms</p>
+              <p>Median time per click: ${medianTime}ms</p>
+              <p>Min time: ${minTime}ms</p>
+              <p>Max time: ${maxTime}ms</p>
+              <p>Status: Completed</p>
+            `;
+          }
+        }
+        
+        runBenchmarkClick();
+      });
+
+      // Clear metrics button
+      document.getElementById('clear-metrics').addEventListener('click', () => {
+        metricsDiv.innerHTML = '<p>Click the checkbox below to trigger the performance test...</p>';
+      });
+
+      // Log the DOM structure for debugging
+      console.log('Performance test page loaded');
+      console.log('Target checkbox DOM depth:', getElementDepth(targetCheckbox));
+      console.log('Total sibling elements at level 1:', document.querySelectorAll('[data-level="1"]').length);
+      console.log('Total sibling elements at level 2:', document.querySelectorAll('[data-level="2"]').length);
+
+      // Helper function to get element depth
+      function getElementDepth(element) {
+        let depth = 0;
+        let current = element;
+        while (current.parentElement) {
+          depth++;
+          current = current.parentElement;
+        }
+        return depth;
+      }
+    </script>
+  </body>
+</html> 
\ No newline at end of file