Offloading Dynamic Facet Disjunction Logic and Product Count Math to Web Workers to Eliminate Processing Duration

The Hidden Execution Cost of Rich Faceted Navigation

Modern e-commerce architectures prioritize rich, desktop-grade filtering on mobile interfaces. Users expect instantaneous, multi-select filtering across brands, sizes, price ranges, ratings, and custom product tags. To deliver this experience without triggering full-page server roundtrips, frontend architectures frequently rely on client-side state engines that evaluate product availability and aggregate counts on the fly.

However, when client-side JavaScript recalculates dynamic facet disjunctions and prospective product counts for a catalog of 2,000 to 50,000 SKUs, it introduces substantial computational overhead. On mobile devices with constrained, thermally throttled CPUs, this calculation blocks the browser’s single main thread for 150ms to 600ms per interaction. This execution lock occurs during the critical window between a user tapping a facet checkbox and the browser committing the visual change to the screen.

Under Google’s Core Web Vitals framework, this delay manifests directly as high Processing Duration within Interaction to Next Paint (INP). When input handling exceeds the 200ms threshold, search engine ranking systems register degraded user engagement signals. Remediating these main-thread bottlenecks is an essential technical optimization to satisfy search quality benchmarks, improve organic click-through stickiness, and ultimately increase organic revenue. For a holistic view on mitigating these issues within mobile collection drawers, read our comprehensive architectural guide: Remediating Interaction to Next Paint (INP) on Mobile Facet Navigation Drawers to Protect Conversion Rates.

The Algorithmic Complexity of Dynamic Facet Disjunction

To understand why facet calculations exhaust the main thread, consider the underlying set theory required by standard e-commerce filtering. Faceted search operates on a mixed model of conjunction (AND) and disjunction (OR):

Intra-attribute Disjunction: Selecting multiple values within the same facet group operates as an OR condition. If a user selects “Red” and “Blue” under “Color”, the result set must include products that are either Red OR Blue.
Inter-attribute Conjunction: Selecting values across distinct facet groups operates as an AND condition. If a user selects “Color: Red” and “Size: Medium”, the catalog must yield products that satisfy both dimensions concurrently.

The mathematical complexity deepens significantly when calculating prospective facet counts. E-commerce design systems dictate that next to every unselected checkbox, a number indicates how many matching products will result if that specific checkbox is toggled. Determining these values requires the engine to evaluate hypothetical states:

For each unselected option $O$ in facet group $F$, the engine must compute:

Count(O) = | (Current Matches excluding constraints of F) ∩ Products(O) |

In a naive JavaScript implementation using object array filters (e.g., Array.prototype.filter() combined with Array.prototype.includes()), calculating these states over an array of 5,000 products with 8 facet groups and an average of 6 options per group requires millions of operations per tap:

Complexity = O( N * ( F_total * O_avg ) )
Where N = Catalog Size, F = Facet Groups, O = Options per Facet

Running this linear scanning math directly inside an input event handler guarantees that the main thread cannot parse tasks, initiate layout, or run paint cycles, causing catastrophic INP degradation.

Main Thread Contention and the INP Breakdown

INP quantifies latency across three distinct sub-phases:

Input Delay: The time between user hardware interaction and the execution of the bound JavaScript event listener.
Processing Duration: The time required to execute the synchronous callbacks associated with the interaction.
Presentation Delay: The time spent by the browser recalculating styles, running composite and layout passes, and rasterizing pixels to the display.

When dynamic facet math runs on the main thread, the entire computational cycle is added directly to Processing Duration. Furthermore, because JavaScript execution prevents the microtask checkpoint from clearing quickly, any scheduled DOM updates (such as visually checking the box, rendering the loading spinner, or updating disabled attributes) are delayed, artificially inflating the Presentation Delay.

Mobile processors feature heterogeneous core layouts (ARM big.LITTLE architectures). Secondary browser interactions, background service workers, and third-party tracking scripts typically execute on slower efficiency cores (such as Cortex-A55). When an intensive $O(N)$ facet scan hits an efficiency core, the CPU cannot clear the operation within the 50ms long-task ceiling, resulting in user-perceptible input freezing.

Architecting Off-Thread Computation via Web Workers

The solution to eliminating processing duration without stripping features from the user interface is completely decoupling collection data processing from UI layout orchestration. By offloading dynamic facet disjunction logic, matrix intersections, and count recalculations to a dedicated background Web Worker, the main thread’s responsibility is reduced to two micro-operations: dispatching the user input event and applying the computed state to the DOM.

1. Data Representation: Inverted Index via TypedArrays

Standard JSON objects with nested string arrays introduce massive overhead in message passing via the structured clone algorithm. Instead, the Web Worker should maintain an Inverted Index mapped through flat, typed arrays (Bitsets). Each product in the collection is assigned an integer index from 0 to N - 1.

Every facet value is represented as a bitset (using Uint32Array segments), where the bit at position i is 1 if product i possesses the attribute, and 0 if it does not.

2. Fast Bitwise Disjunction and Conjunction

Bitwise operations in WebAssembly or JavaScript TypedArrays execute at near-native CPU speeds. Set intersections become bitwise AND (&), and disjunctions become bitwise OR (|). A catalog of 32,000 products requires only 1,000 32-bit integers per facet attribute.

Production Implementation: The Off-Thread Facet Engine

The Worker Script (`facet.worker.js`)

// Bitset utility for 32-bit blocks
class BitSet {
  constructor(size) {
    this.words = new Uint32Array(Math.ceil(size / 32));
    this.size = size;
  }

  set(index) {
    this.words[index >>> 5] |= (1 << (index & 31));
  }

  get(index) {
    return (this.words[index >>> 5] & (1 << (index & 31))) !== 0;
  }

  clone() {
    const copy = new BitSet(this.size);
    copy.words.set(this.words);
    return copy;
  }

  and(other) {
    for (let i = 0; i < this.words.length; i++) {
      this.words[i] &= other.words[i];
    }
    return this;
  }

  or(other) {
    for (let i = 0; i < this.words.length; i++) {
      this.words[i] |= other.words[i];
    }
    return this;
  }

  count() {
    let total = 0;
    for (let i = 0; i < this.words.length; i++) {
      let x = this.words[i];
      // Hamming weight (popcount)
      x = x - ((x >>> 1) & 0x55555555);
      x = (x & 0x33333333) + ((x >>> 2) & 0x33333333);
      total += (((x + (x >>> 4)) & 0x0F0F0F0F) * 0x01010101) >>> 24;
    }
    return total;
  }
}

let catalogSize = 0;
let facetIndex = new Map(); // Key: 'facet:value' -> BitSet
let allProductsBitSet = null;

self.onmessage = function (e) {
  const { type, payload, id } = e.data;

  if (type === 'INIT') {
    catalogSize = payload.catalogSize;
    allProductsBitSet = new BitSet(catalogSize);
    for (let i = 0; i < catalogSize; i++) {
      allProductsBitSet.set(i);
    }

    facetIndex.clear();
    for (const [key, indices] of Object.entries(payload.facets)) {
      const bs = new BitSet(catalogSize);
      for (const idx of indices) {
        bs.set(idx);
      }
      facetIndex.set(key, bs);
    }

    self.postMessage({ type: 'INIT_COMPLETE' });
    return;
  }

  if (type === 'EVALUATE') {
    const { activeFilters, allFacetKeys } = payload;
    // activeFilters structure: { [facetGroup]: [values...] }
    
    // 1. Calculate the active selection mask for each facet group
    const groupMasks = new Map();
    const activeGroups = Object.keys(activeFilters).filter(
      (g) => activeFilters[g].length > 0
    );

    for (const group of activeGroups) {
      const groupBitSet = new BitSet(catalogSize);
      for (const val of activeFilters[group]) {
        const bs = facetIndex.get(`${group}:${val}`);
        if (bs) groupBitSet.or(bs);
      }
      groupMasks.set(group, groupBitSet);
    }

    // 2. Global conjunction across distinct groups
    let globalMatch = allProductsBitSet.clone();
    for (const [, mask] of groupMasks) {
      globalMatch.and(mask);
    }

    // 3. Compute prospective counts for every single option
    const prospectiveCounts = {};

    for (const facetKey of allFacetKeys) {
      const [group, val] = facetKey.split(':');
      const optBitSet = facetIndex.get(facetKey);

      if (!optBitSet) {
        prospectiveCounts[facetKey] = 0;
        continue;
      }

      // Conjunction of all OTHER groups excluding this option's group
      let baseline = allProductsBitSet.clone();
      for (const [otherGroup, mask] of groupMasks) {
        if (otherGroup !== group) {
          baseline.and(mask);
        }
      }

      // If the group is already active, disjunction applies inside the group
      if (activeFilters[group] && activeFilters[group].includes(val)) {
        // Unselecting it: compute current global match without this value
        let altGroupMask = new BitSet(catalogSize);
        for (const otherVal of activeFilters[group]) {
          if (otherVal !== val) {
            const obs = facetIndex.get(`${group}:${otherVal}`);
            if (obs) altGroupMask.or(obs);
          }
        }
        if (activeFilters[group].length > 1) {
          baseline.and(altGroupMask);
        }
        prospectiveCounts[facetKey] = baseline.count();
      } else {
        // Selecting it: intersect baseline with the option's bitset
        baseline.and(optBitSet);
        prospectiveCounts[facetKey] = baseline.count();
      }
    }

    // 4. Return matching product indices and prospective counts
    const matchingIndices = [];
    for (let i = 0; i < catalogSize; i++) {
      if (globalMatch.get(i)) {
        matchingIndices.push(i);
      }
    }

    self.postMessage({
      type: 'EVALUATE_COMPLETE',
      id,
      payload: {
        matchingIndices,
        prospectiveCounts,
      },
    });
  }
};

Main Thread Orchestration (`storefront-facets.js`)

class FacetManager {
  constructor(workerUrl, catalogData) {
    this.worker = new Worker(workerUrl);
    this.requestId = 0;
    this.pendingCallbacks = new Map();
    this.allFacetKeys = [];

    this.worker.onmessage = (e) => {
      const { type, id, payload } = e.data;
      if (type === 'EVALUATE_COMPLETE') {
        const resolve = this.pendingCallbacks.get(id);
        if (resolve) {
          this.pendingCallbacks.delete(id);
          resolve(payload);
        }
      }
    };

    this.initializeWorker(catalogData);
  }

  initializeWorker(catalogData) {
    // Collect all unique facet keys
    this.allFacetKeys = Object.keys(catalogData.facets);

    this.worker.postMessage({
      type: 'INIT',
      payload: {
        catalogSize: catalogData.catalogSize,
        facets: catalogData.facets,
      },
    });
  }

  evaluateFilters(activeFilters) {
    return new Promise((resolve) => {
      const id = ++this.requestId;
      this.pendingCallbacks.set(id, resolve);

      this.worker.postMessage({
        type: 'EVALUATE',
        id,
        payload: {
          activeFilters,
          allFacetKeys: this.allFacetKeys,
        },
      });
    });
  }
}

// UI Event Binding with INP Optimization
const facetUI = document.querySelector('.facet-drawer');
const manager = new FacetManager('/workers/facet.worker.js', window.__CATALOG_FACET_INDEX__);

let activeState = {
  brand: [],
  size: [],
  color: []
};

facetUI.addEventListener('change', async (event) => {
  const checkbox = event.target;
  const { group, value } = checkbox.dataset;

  // 1. Immediate visual response to eliminate Input Delay & Processing Duration
  // We allow the browser to paint the checked state immediately.
  if (checkbox.checked) {
    activeState[group].push(value);
  } else {
    activeState[group] = activeState[group].filter((v) => v !== value);
  }

  // Visual indication of non-blocking background synchronization
  facetUI.classList.add('evaluating');

  // 2. Offload heavy set theory to the Worker thread
  const result = await manager.evaluateFilters(activeState);

  // 3. Batch DOM updates inside a requestAnimationFrame to minimize Presentation Delay
  requestAnimationFrame(() => {
    // Update prospective count badges
    for (const [facetKey, count] of Object.entries(result.prospectiveCounts)) {
      const badge = document.querySelector(`[data-count-for="${facetKey}"]`);
      if (badge) {
        badge.textContent = `(${count})`;
        const parentLabel = badge.closest('.facet-label');
        if (count === 0) {
          parentLabel.classList.add('disabled');
        } else {
          parentLabel.classList.remove('disabled');
        }
      }
    }

    // Trigger grid update with matching indices
    window.dispatchEvent(
      new CustomEvent('catalog:filtered', {
        detail: { matchingIndices: result.matchingIndices }
      })
    );

    facetUI.classList.remove('evaluating');
  });
});

Handling Race Conditions and State Serialization

Decoupling state computation from UI loops introduces asynchronous race conditions. If a user rapidly taps multiple facet options (e.g., checking “Small”, “Medium”, and “Large” within 200ms), responses returning from the Web Worker out of sequential order can corrupt the UI state.

To eliminate this failure mode, implement strict request fencing using monotonic transaction tokens:

Monotonic Identification: Each computation payload sent to the Web Worker is stamped with an auto-incrementing integer (requestId).
State Discarding: The main thread maintains an internal pointer, latestProcessedId. If an incoming message contains an id that is less than or equal to latestProcessedId, the payload is immediately dropped via early return.
Structural Serialization Overhead: Even though structured cloning is fast, sending large raw nested JavaScript objects between threads incur serialization costs. Keeping message boundaries restricted to atomic typed identifiers, bitset arrays, or primitive ID arrays preserves sub-5ms transfer boundaries.

Technical Verification: Diagnosing INP with Long Animation Frames (LoAF)

To confirm that moving dynamic disjunction to Web Workers has eliminated interaction delays, configure the Long Animation Frames API (LoAF) directly within your staging environment. The following instrumentation captures any interaction with the facet drawer that blocks the pipeline:

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    for (const script of entry.scripts) {
      if (script.invoker.includes('.facet-drawer')) {
        console.warn('Long Animation Frame Detected in Facets:', {
          duration: entry.duration,
          cpuDuration: entry.cpuDuration,
          blockingDuration: entry.blockingDuration,
          source: script.sourceLocation,
          invoker: script.invoker,
        });
      }
    }
  }
});

observer.observe({ type: 'long-animation-frame', buffered: true });

When running facet selections against a catalog of 10,000 items with main-thread computations, Chrome DevTools performance traces consistently reveal long script execution periods spanning 120ms to 380ms, generating direct INP violations. After adopting the BitSet Web Worker pattern, the main-thread event listener execution drops below 4ms—the time necessary to dispatch the worker message. The entire heavy mathematical operation runs silently on a background thread.

Search Engine Performance and Organic Revenue Dividends

Search engines crawl and score websites on real-world Chrome User Experience Report (CrUX) data. Faceted collection pages represent high-intent landing pages across multi-category e-commerce sites. When internal page links, categorical tags, and filtering menus react instantaneously, several key metrics shift:

Passage of Core Web Vitals Thresholds: Maintaining INP within the 75th percentile of mobile sessions below 200ms protects against algorithm-level UX ranking demotions.
Reduced Interaction Abandonment: On mobile devices, when a user encounters a 300ms freeze while expanding a filter drawer, rage clicks multiply, bounce rates increase, and session depth drops.
Maximizing Organic Crawl Efficiency: Fast, client-side rendering backed by lightweight workers preserves DOM hydration cycles. This allows Googlebot to access dynamically rendered states without executing deep, blocking scripts that exhaust mobile render budgets.

By moving computationally heavy, combinatorial facet logic out of the main execution stream and into background worker threads, you protect the DOM render loop, secure near-zero INP Processing Duration, and maintain the performance standards necessary to increase organic revenue across mobile e-commerce storefronts.

Related Guides in This Series

Tagged shopify_seo_blog