jQuery vs BestJS (v4)

Revision 4 of this benchmark created on

Preparation HTML

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><script src="https://code.jquery.com/jquery-3.7.1.js"></script></head><body><div class="nav"><h1>Home</h1><a href="about.php">About</a><a href="contact.php">Contact</a></div><div class="main"><div id="section1" class="section"><h1>Section 1</h1><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p></div><div id="section2" class="section"><h1>Section 2</h1><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p><p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p></div></div><div class="comments"><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div><div class="comment"><h1>Comment Title</h1><h2><a href="./author">Author</a></h2><h3>Date</h3><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p><p class="text comment-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.<a href="link">Quisquam</a>, quos.</p></div></div></body></html>

Setup

"use strict";

(function() {

const SYMBOL = Symbol();

class BestJS
{
    static allowArrayAccess = true;

    constructor(symbol, elements)
    {
        if (symbol != SYMBOL)
            throw new Error("Cannot create a BestJS Object via constructor");

        this.elements = elements;
        this.length = elements.length;
    }

    /**
     * Construct a BestJS object based on the given selector.
     * 
     * Construct a BestJS object quering the DOM to get the elements matching the given selector.
     * It can also be used to create new DOM elements or wrapping the given DOM Element.
     * 
     * @param {string|Element|Array|NodeList|HTMLCollection|BestJS} selector string containing the selector to retrieve the Element from the DOM,
     *                                            the Element from the DOM,
     *                                            or an array of DOM Elements
     * @return {BestJS} The BestJS object wrapping the queried or given DOM elements.
     */
    static fromSelector(selector)
    {
        if (typeof selector === "string")
        {
            let elements;

            if (selector[0] === "<" && selector[selector.length - 1] === ">")
                elements = [document.createElement(selector)];
            else
                elements = selectElements(document, selector);

            return new BestJS(SYMBOL, elements);
        }
        else if (selector instanceof Element)
        {
            return new BestJS(SYMBOL, [selector]);
        }
        else if (selector instanceof Array || selector instanceof NodeList || selector instanceof HTMLCollection)
        {
            return new BestJS(SYMBOL, selector);
        }
        else if (selector instanceof BestJS)
        {
            return new BestJS(SYMBOL, selector.elements);
        }
        else
        {
            throw new Error("Invalid object type");
        }
    }

    static fromId(id)
    {
        const element = document.getElementById(id);

        if (element)
            return new BestJS(SYMBOL, [element]);
        return new BestJS(SYMBOL, []);
    }

    static fromClass(className)
    {
        const elements = document.getElementsByClassName(className);
        return new BestJS(SYMBOL, elements);
    }

    static fromTag(tagName)
    {
        const elements = document.getElementsByTagName(tagName);
        return new BestJS(SYMBOL, elements);
    }

    *[Symbol.iterator]() {
        for (const item of this.elements) {
            yield item;
        }
    }

    each(callback)
    {
        for (let i = 0; i < this.length; i++)
            if (callback.call(this.elements[i], i) === false)
                break;

        return this;
    }

    async eachAsync(callback)
    {
        for (let i = 0; i < this.length; i++)
            if ((await callback.call(this.elements[i], i)) === false)
                break;

        return this;
    }
}

function isSubArray(array, master)
{
	let isSubArray;

	for (let i = 0; i < array.length; i++)
	{
		isSubArray = false;
		for (let j = 0; j < master.length; j++)
			if (array[i] === master[j])
			{
				isSubArray = true;
				break;
			}
			
		if (!isSubArray)
			return false;
	}
	
	return true;
}

function selectElements(root, selector)
{
    if (selector.includes(" ") || selector.includes(">") || selector.includes("+") || selector.includes("~")
        || selector.includes(":") || selector.includes("["))
        return document.querySelectorAll(selector);

    // Simple selector
    const noFirstChar = selector.substring(1);
    if (!noFirstChar.includes("#") && !noFirstChar.includes("."))
    {
        if (selector[0] === "#")
        {
            const element = root.getElementById(noFirstChar);
            if (element)
                return [element];
            return [];
        }

        if (selector[0] === ".")
            return root.getElementsByClassName(noFirstChar);

        return root.getElementsByTagName(selector);
    }

    let indexOfId = noFirstChar.indexOf("#");
    let indexOfClass = noFirstChar.indexOf(".");
    let startIndex = indexOfClass === -1 || indexOfId !== -1 && indexOfId < indexOfClass ? indexOfId : indexOfClass;
    const elements = selector[0] === "#" ? [root.getElementById(noFirstChar.substring(0, startIndex))] :
                     selector[0] === "." ? root.getElementsByClassName(noFirstChar.substring(0, startIndex)) :
                                           root.getElementsByTagName(selector.substring(0, startIndex));

    if (elements.length === 0 || elements[0] === null)
        return [];
    
    let id = undefined;
    const classes = [];
    
    indexOfId = noFirstChar.indexOf("#", startIndex + 1);
    indexOfClass = noFirstChar.indexOf(".", startIndex + 1);
    let nextIndex = indexOfClass === -1 || indexOfId !== -1 && indexOfId < indexOfClass ? indexOfId : indexOfClass;

    while (nextIndex !== -1)
    {
        if (noFirstChar[startIndex] === "#")
        {
            const newId = noFirstChar.substring(startIndex + 1, nextIndex);
            if (id && id !== newId) return [];
            id = newId;
        }
        else if (noFirstChar[startIndex] === ".")
            classes.push(noFirstChar.substring(startIndex + 1, nextIndex));

        startIndex = nextIndex;
        indexOfId = noFirstChar.indexOf("#", startIndex + 1);
        indexOfClass = noFirstChar.indexOf(".", startIndex + 1);
        nextIndex = indexOfClass === -1 || indexOfId !== -1 && indexOfId < indexOfClass ? indexOfId : indexOfClass;
    }
        
    if (noFirstChar[startIndex] === "#")
    {
        const newId = noFirstChar.substring(startIndex + 1);
        if (id && id !== newId) return [];
        id = newId;
    }
    else if (noFirstChar[startIndex] === ".")
        classes.push(noFirstChar.substring(startIndex + 1));

    const finalElements = new Array(elements.length);
    let index = 0;

    if (id === undefined)
        for (let i = 0; i < elements.length; i++)
        {
            if (isSubArray(classes, elements[i].classList))
                finalElements[index++] = elements[i];
        }
    else if (classes.length === 0)
        for (let i = 0; i < elements.length; i++)
        {
            if (elements[i].id === id)
                finalElements[index++] = elements[i];
        }
    else
        for (let i = 0; i < elements.length; i++)
        {
            if (elements[i].id === id && !isSubArray(classes, elements[i].classList))
                finalElements[index++] = elements[i];
        }

    finalElements.length = index;
    return finalElements;
}

const configuration = {
    allowArrayAccess: true,
    useProxy: true,
}

const getElement = {
    get: function(target, pos)
    {
        if (typeof pos == "symbol")
            return target[pos];
        if (isNaN(parseInt(pos)))
            return target[pos];
        return target.elements[pos];
    }
}

function wrap(obj)
{
    if (configuration.allowArrayAccess)
        if (configuration.useProxy)
            return new Proxy(obj, getElement);
        else
        {
            for (let i = 0; i < obj.length; i++)
                obj[i] = obj.elements[i];
        }

    return obj;
}

const creator = function(selector)
{
    return wrap(BestJS.fromSelector(selector));
}

function creatorI(id)
{
    return wrap(BestJS.fromId(id));
}

function creatorC(className)
{
    return wrap(BestJS.fromClass(className));
}

function creatorT(tagName)
{
    return wrap(BestJS.fromTag(tagName));
}

creator.configure = function(configs)
{
    configuration.allowArrayAccess = configs.allowArrayAccess || configuration.allowArrayAccess;
    configuration.useProxy = configs.useProxy || configuration.useProxy;
}

if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
{
    module.exports = BestJS
}
else
{
    window.BestJS = creator;
    window.$ = creator;
    window.$i = creatorI;
    window.$c = creatorC;
    window.$t = creatorT;
}

})();


const loopSize = 100;
window.$$ = jQuery;

Test runner

Ready to run.

Testing in
TestOps/sec
Simple id jQuery
for (let i = 0; i < loopSize; i++)
	x = $$("#section1");
ready
Simple id BestJS
for (let i = 0; i < loopSize; i++)
	x = $("#section1");
ready
Simple id getElementById
for (let i = 0; i < loopSize; i++)
	x = document.getElementById("section1");
ready
Simple class jQuery
for (let i = 0; i < loopSize; i++)
	x = $$(".text");
ready
Simple class BestJS
for (let i = 0; i < loopSize; i++)
	x = $(".text");
ready
Simple class getElementsByClassName
for (let i = 0; i < loopSize; i++)
	x = document.getElementsByClassName("text");
ready
Complex query jQuery
for (let i = 0; i < loopSize; i++)
	x = $$(".comments > .comment .text.comment-text");
ready
Complex query BestJS
for (let i = 0; i < loopSize; i++)
	x = $(".comments > .comment .text.comment-text");
ready
Complex query querySelectorAll
for (let i = 0; i < loopSize; i++)
	x = document.querySelectorAll(".comments > .comment .text.comment-text");
ready
Subsequent siblings selector jQuery
for (let i = 0; i < loopSize; i++)
	x = $$("h2 ~ p");
ready
Subsequent siblings selector BestJS
for (let i = 0; i < loopSize; i++)
	x = $("h2 ~ p");
ready
Subsequent siblings selector querySelectorAll
for (let i = 0; i < loopSize; i++)
	x = document.querySelectorAll("h2 ~ p");
ready
Simple id BestJs 2
for (let i = 0; i < loopSize; i++)
	x = $i("section1");
ready
Simple class BestJs 2
for (let i = 0; i < loopSize; i++)
	x = $c("text");
ready
Access element jQuery
const element = $$("h2 ~ p");
for (let i = 0; i < loopSize; i++)
	x = element[i];
ready
Access element BestJS
const element = $("h2 ~ p");
for (let i = 0; i < loopSize; i++)
	x = element[i];
ready
For of jQuery
const element = $$("h2 ~ p");
for (const el of element)
	x = el;
ready
For of BestJS
const element = $("h2 ~ p");
for (const el of element)
	x = el;
ready
Access element BestJS noProxy
$.configure({useProxy: false});
const element = $("h2 ~ p");
for (let i = 0; i < loopSize; i++)
	x = element[i];
ready
For of BestJS noArrayAccess
$.configure({allowArrayAccess: false});
const element = $("h2 ~ p");
for (const el of element)
	x = el;
ready
each jQuery
const element = $$("h2 ~ p");
element.each(e => x = e);
ready
each BestJS
const element = $("h2 ~ p");
element.each(e => x = e);
ready
each BestJS noProxy
$.configure({useProxy: false});
const element = $("h2 ~ p");
element.each(e => x = e);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.