Run results for: hasAncestor vs .contains()

Run details:

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: Chrome 119

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

compareElementsContains

325K/s

hasAncestorInList

169K/s

View exact numbers

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

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);