```
/**
 * Finds the most ancestral DOM elements enclosed within a specified rectangle in page coordinates
 * with an allowed percentage error. Uses BFS for traversal with performance optimizations.
 *
 * @param {number} x - The X-coordinate of the target rectangle (relative to the viewport).
 * @param {number} y - The Y-coordinate of the target rectangle (relative to the viewport).
 * @param {number} width - The width of the target rectangle.
 * @param {number} height - The height of the target rectangle.
 * @param {number} errorPercent - The allowed percentage error (z%) for matching.
 * @param {boolean} [exhaustive=true] - If true, performs an exhaustive search.
 * @returns {Element[]} An array of the most ancestral DOM elements matching the criteria.
 */
function findMostAncestralElements(x, y, width, height, errorPercent, exhaustive = true) {
    // Convert error percentage to a decimal
    const z = errorPercent / 100;

    // Define the target rectangle
    const target = { x, y, width, height };

    // Array to store the resulting elements
    const results = [];

    // Initialize the queue with document.body
    const queue = [document.body];
    let head = 0; // Pointer to the current head of the queue

    // Precompute target boundaries for overlap checks
    const targetRight = target.x + target.width;
    const targetBottom = target.y + target.height;

    /**
     * Checks if two rectangles overlap.
     *
     * @param {DOMRect} rect - The bounding rectangle of a DOM element.
     * @param {Object} target - The target rectangle with properties x, y, width, height.
     * @returns {boolean} True if rectangles overlap, false otherwise.
     */
    function isOverlapping(rect, target) {
        return (
            rect.left < target.x + target.width &&
            rect.left + rect.width > target.x &&
            rect.top < target.y + target.height &&
            rect.top + rect.height > target.y
        );
    }

    /**
     * Checks if the element's rectangle matches the target rectangle within the allowed error margin.
     *
     * @param {DOMRect} rect - The bounding rectangle of the DOM element.
     * @param {Object} target - The target rectangle with properties x, y, width, height.
     * @param {number} z - The error margin as a decimal.
     * @returns {boolean} True if the element matches within the error margin, false otherwise.
     */
    function matchesTarget(rect, target, z) {
        return (
            Math.abs(rect.left - target.x) <= target.width * z &&
            Math.abs(rect.top - target.y) <= target.height * z &&
            Math.abs(rect.width - target.width) <= target.width * z &&
            Math.abs(rect.height - target.height) <= target.height * z
        );
    }

    // BFS Loop
    while (head < queue.length) {
        const elem = queue[head++]; // Dequeue the next element

        // Get the bounding rectangle once
        const rect = elem.getBoundingClientRect();

        // Check if the element's rectangle matches the target within the allowed error
        if (matchesTarget(rect, target, z)) {
            results.push(elem);
            // Do not enqueue children since we want the most ancestral elements
            continue;
        }

        // Determine whether to enqueue child elements
        if (exhaustive) {
            // Exhaustive mode: enqueue all children regardless of overlap
            const children = elem.children;
            for (let i = 0, len = children.length; i < len; i++) {
                queue.push(children[i]);
            }
        } else {
            // Non-exhaustive mode: enqueue children only if overlapping with target
            if (isOverlapping(rect, target)) {
                const children = elem.children;
                for (let i = 0, len = children.length; i < len; i++) {
                    queue.push(children[i]);
                }
            }
            // If not overlapping, skip enqueuing children to prune the search space
        }
    }

    return results;
}
```
do these changes:
1. change errorPercent to errorRatio (0 to 1, and clamp to 0 to 1, 0 means no error allowed)
2. inline isOverlapping and matchesTarget
3. allow async option, with specified iteration 
which dispatches custom event/callback for progress (which one is better?)
 4. use set for results instead of array to avoid duplicates