Benchmark: hasAncestor vs .contains()

HTML Preparation code:

<div class="sponscont">
    <div id="taboola-below-article-thumbnails 1" class=" trc_related_container trc_spotlight_widget">
        <div class="trc_rbox_container">
            <div>
                <div id="trc_wrapper_89945" class="trc_rbox"></div>
            </div>
        </div>
    </div>
</div>

<div class="gnt_tb gnt_tbb">
    <div id="gnt_tbw_1" class=" trc_related_container trc_spotlight_widget tbl-feed-container tbl-feed-frame-NONE  render-late-effect" data-feed-container-num="1" data-feed-main-container-id="gnt_tbw_1" data-parent-placement-name="Homepage Feed - Feed Redesign" data-pub-lang="en" observeid="tbl-observe-1" tbl-data-mutation-observer="true">
        <div data-card-index="1" id="gnt_tbw_1-pl1" data-batch-num="1" tbl-feed-card="" class=" trc_related_container trc_spotlight_widget trc_elastic trc_elastic_thumbnails-feed-original-05  tbl-feed-card " data-placement-name="Homepage Feed - Feed Redesign | Card 1" observeid="tbl-observe-8" style="padding: 0px;">
            <div class="trc_rbox_container"></div>
        </div>
        <div data-card-index="2" id="gnt_tbw_1-pl2" data-batch-num="1" tbl-feed-card="" class=" trc_related_container trc_spotlight_widget trc_elastic trc_elastic_thumbnails-feed-desktop-05  tbl-feed-card " data-placement-name="Homepage Feed - Feed Redesign | Card 2" observeid="tbl-observe-17" style="padding: 0px;">
            <div class="trc_rbox_container"></div>
        </div>
        <div data-card-index="3" id="gnt_tbw_1-pl3" data-batch-num="1" tbl-feed-card="" class=" trc_related_container trc_spotlight_widget trc_elastic trc_elastic_thumbnails-feed-desktop-05  tbl-feed-card " data-placement-name="Homepage Feed - Feed Redesign | Card 3" observeid="tbl-observe-22" style="padding: 0px;">
            <div class="trc_rbox_container"></div>
        </div>
    </div>
</div>

<div class="gnt_tb">
    <div id="gnt_tbw_2" class=" trc_related_container ">
        <div class="trc_rbox_container"></div>
    </div>
</div>

Script Preparation code:

var adsList = [];
var iterations = 100000;

// sel 1 - _taboola
var list1 = document.querySelectorAll("div.trc_related_container > div.trc_rbox_container");

// sel 2 - _taboola
var list2 = document.querySelectorAll("div[data-feed-main-container-id]");

var tmpFullList = [...list1, ...list2];

function getHighPrecisionTimestamp() {
    if (window.performance && window.performance.now) {
        return window.performance.now(); // Returns a DOMHighResTimeStamp value
    } else {
        return new Date().getTime(); // Fallback to millisecond precision if high-res timestamp is not supported
    }
}

// Function to compare one element to all others in the array
function compareElementsContains(arr) {
    var nCE = [];
    for (let i = 0; i < arr.length; i++) {
        const cE = arr[i];
        var iCEC = false;
        for (let j = 0; j < arr.length; j++) {
            if (i !== j) {
                const oE = arr[j];
                // If ad[i] is not contained by any of the others, then add to final list
                if ( oE.contains(cE) ) {
                    iCEC = true;
                    // debugger;
                } else {
                    // debugger;
                }
            }
        }
        if (!iCEC) {
            nCE.push(cE);
        }
    }
    return nCE;
}
// Function to find if an ad has another one as ancestor in its DOM branch
function hasAncestorInList(nL) {
    var nAE = [];
    for (let i = 0; i < nL.length; i++) {
        const eA = nL[i];
        let hA = false;
        for (let j = 0; j < nL.length; j++) {
            if (i !== j) {
                const eB = nL[j];
        
                let p = eA.parentElement;
                while (p !== null) {
                    if (p === eB) {
                        hA = true;
                        break;
                    }
                    p = p.parentElement;
                }                
            }
        }
        if (!hA) {
            nAE.push(eA);
        }    
    }
    return nAE;
}

Tests:

hasAncestorInList
var adsList = hasAncestorInList(tmpFullList);
compareElementsContains
var adsList = compareElementsContains(tmpFullList);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
hasAncestorInList
compareElementsContains

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Windows

View result in a separate tab

compareElementsContains

325K/s

hasAncestorInList

169K/s

View exact numbers

Test name	Executions per second
✓ compareElementsContains	324,695 Ops/sec
hasAncestorInList	169,300 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test case, specifically designed to compare the performance of two functions: `hasAncestorInList` and `compareElementsContains`. Both functions aim to find all elements in a given list that do not have an ancestor (direct parent) among other elements.

**Functionality Comparison**

1.  **`hasAncestorInList`**: This function iterates through the input list, checking if each element has another element as its direct parent by traversing up the DOM tree using `element.parentElement`. If no such ancestor is found, the element is added to a result list.
2.  **`compareElementsContains`**: This function compares each element in the input list with every other element to determine if one contains the other. If an element does not contain any other elements (i.e., they do not have an ancestor), it's added to a result list.

**Options Compared**

*   `hasAncestorInList`: uses the DOM tree traversal approach
*   `compareElementsContains`: uses a brute-force comparison approach

**Pros and Cons of Each Approach:**

*   **`hasAncestorInList`**: Pros:
    *   Less memory-intensive due to reduced number of comparisons
    *   Can be optimized for better performance using techniques like early return or caching
    *   More straightforward implementation (i.e., traversing the DOM tree)
*   Cons:
    *   Requires access to the DOM tree, which might not always be available or efficient in certain situations
    *   May require additional dependencies for proper function calls (e.g., `element.parentElement`)

*   **`compareElementsContains`**: Pros:
    *   Does not rely on the DOM tree structure and can work with flat arrays
    *   Simplistic implementation (i.e., comparing each element to every other element)
*   Cons:
    *   Requires more memory due to increased number of comparisons
    *   Can be slow for large input lists or complex data structures

**Performance Considerations**

Given the provided benchmark results, `compareElementsContains` seems to be faster for this specific test case, with an average execution rate of 324,695 executions per second. The performance difference between these two approaches will likely vary depending on the size and complexity of the input data.

**Conclusion**

The choice between `hasAncestorInList` and `compareElementsContains` ultimately depends on your specific requirements and constraints:

*   Use `hasAncestorInList` when:
    *   You need to work with DOM trees or require performance optimization
    *   Memory usage is a concern, but you can optimize the function for better performance
*   Use `compareElementsContains` when:
    *   You're working with flat arrays and don't rely on the DOM tree structure
    *   A simple, brute-force approach is acceptable

hasAncestor vs .contains() (version: 0) Benchmark.js

Comparing performance of: `hasAncestorInList vs compareElementsContains`

Created: 2 years ago by: Registered User

Go to the latest result

hasAncestorInList

compareElementsContains

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

hasAncestor vs .contains() (version: 0) Benchmark.js

Comparing performance of: hasAncestorInList vs compareElementsContains

Created: 2 years ago by: Registered User

Go to the latest result

hasAncestorInList

compareElementsContains

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `hasAncestorInList vs compareElementsContains`