Benchmark: getElementById vs id function

getElementById vs id function (version: 0)

document.getElementById() versus id wrapper function Performance comparison of inline use of the browser native DOM method document.getElementById() vs javascript wrapper functions in various forms (declaration, expression, arrow). As expected there are not big differences, but it is interesting that calling the JS wrapper function can be faster in some cases.

Comparing performance of: inline getElementById vs fnArrowLightest vs fnArrowLight vs fnArrowFat vs fnArrowFatter vs fnExpression vs fnExpressionNamed vs fnDeclaration vs inline getElementById (2nd time, control for test #1 , no penalty for going first)

Created: 6 years ago by: Registered User

Jump to the latest result

HTML Preparation code:

<div>
    <a href="#"><h1>document.getElementById() vs id wrapper function</h1></a>
    <p>
        Performance comparison of inline use of the browser native DOM method document.getElementById() vs javascript wrapper functions in various forms (declaration, expression, arrow).
        As expected there are not big differences, but it is interesting that calling the JS wrapper function can be faster in some cases. 1
    </p>
</div>

<div id="divContainer"></div>

<script>
    /* document.getElementById() vs. id wrapper function
     *
     * Performance comparison of inline use of the browser native DOM method document.getElementById() vs javascript wrapper functions in various forms (declaration, expression, arrow).
     * As expected there are not big differences, but it is interesting that calling the JS wrapper function can be faster in some cases. 
    */
    console.time('* Timer test setup');

    const divContainerId = 'divContainer';

    const testSetSize = 1000;
    const divTreeWeight = [
        [
            1,
            1
        ],
        [
            3,
            [
                4,
                5,
                4
            ],
            3
        ],
        [
            1,
            1
        ]
    ];
    const sleepTimeBeforeTests = 2000;
    const sleepTimeAfterTests = 1000;


    const divIds = Array(testSetSize).fill('');
    const resultIds = Array(testSetSize).fill('');
    let runningTestCounter = 0;

    const fnArrowLightest = id_ => document.getElementById(id_);
    const fnArrowLight = (id_) => document.getElementById(id_);
    const fnArrowFat = id_ => { return document.getElementById(id_); }
    const fnArrowFatter = (id_) => { return document.getElementById(id_); }
    const fnExpression = function (id_) { return document.getElementById(id_); }
    const fnExpressionNamed = function fnExpressionName(id_) { return document.getElementById(id_); }
    function fnDeclaration(id_) { return document.getElementById(id_); }


    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    if (!Array.prototype.flat) Object.defineProperty(Array.prototype, 'flat', {
        value: function flat(depth = 1) {
            // * Array.prototype.flat polyfill using Array.prototype.reduce 
            // * (ↄ) 2019 Michel.Sijmons.net. Use freely, but note: This material is provided "as is", with absolutely no warranty expressed or implied. ANY USE IS AT YOUR OWN RISK!
            if (this === null) throw new TypeError('Array.prototype.flat ' + 'called on null or undefined');
            else {
                const flat = (arr_, depth_) => (depth_ > 0) ? arr_.reduce((_acc, _val) => _acc.concat((depth_ > 0 && Array.isArray(_val)) ? flat(_val, depth_ - 1) : _val), []) : arr_;
                return flat(this, depth);
            }
        }
    });

    ((divContainerId_, testSetSize_, divIds_, divTreeWeight_) => {

        function shuffleArray(array_) {
            const _array = array_;
            for (let i = _array.length - 1; i > 0; i--) {
                const j = ~~((window.crypto.getRandomValues(new Uint32Array(1))[0] / 4294967295) * (i + 1));
                [_array[i], _array[j]] = [_array[j], _array[i]];
            }
        }

        for (let i = 0; i < testSetSize_; i++) { divIds_[i] = 'div' + window.crypto.getRandomValues(new Uint32Array(4)).reduce((a, e) => a + e.toString(36), '') + i }
        shuffleArray(divIds_);

        const _flatdivTreeWeight = divTreeWeight_.flat(Infinity);
        const _divTreeTotalBranches = _flatdivTreeWeight.length;
        const _divTreeTotalWeight = _flatdivTreeWeight.reduce((a, e) => a + e, 0);
        const _weightMultiplier = ~~(testSetSize_ / _divTreeTotalWeight);
        const _restWeight = testSetSize_ % _weightMultiplier;


        let _divContainer = document.getElementById(divContainerId_);
        if (!_divContainer) {
            _divContainer = document.createElement('div');
            _divContainer.id = divContainerId_;
            document.getElementsByTagName('body')[0].appendChild(_divContainer);
        }

        let divIdx = 0;
        let treeLevel = 0;
        let branchCount = 0;

        function getDivBranch(div_, branch_) {
            const _div = div_;
            const _branch = branch_;
            if (Array.isArray(_branch)) {
                treeLevel++;
                for (let i = 0; i < _branch.length; i++) {
                    console.log(`* creating branch #${branchCount} at level ${treeLevel}.`);
                    const _branchDiv = document.createElement('div');
                    _branchDiv.classList = `branch branch${branchCount} treeLevel${treeLevel}`;
                    _branchDiv.appendChild(getDivBranch(document.createDocumentFragment(), _branch[i]));
                    _div.appendChild(_branchDiv);
                }
                treeLevel--;
            } else {
                const _setSize = (++branchCount !== _divTreeTotalBranches)
                    ? _branch * _weightMultiplier
                    : (_branch * _weightMultiplier) + _restWeight
                    ;
                console.log(`* filling branch #${branchCount} at level ${treeLevel} with ${_setSize} divs.`);
                for (let i = 0; i < _setSize; i++) {
                    const _leafDiv = document.createElement('div');
                    _leafDiv.id = divIds_[divIdx++];
                    _leafDiv.classList = classList = `leaf branch${branchCount} treeLevel${treeLevel}`;
                    _div.appendChild(_leafDiv);
                }
            }
            return _div;
        }

        _divContainer.appendChild(getDivBranch(document.createDocumentFragment(), divTreeWeight_));

        console.log(`* created ${branchCount} branches with a total of ${divIdx} divs.`);

        console.log('_divContainer:', _divContainer);
        console.dir(_divContainer);

        shuffleArray(divIds_);
    })(divContainerId, testSetSize, divIds, divTreeWeight);

    console.timeEnd('* Timer test setup');

    (async (sleepTime_) => {
        console.log(`* Clearing result array and sleeping for ${sleepTimeBeforeTests / 1000} seconds before test.`);
        resultIds.fill('');
        await sleep(sleepTime_);
        console.log('* Continuing... ');
    })(sleepTimeBeforeTests);

</script>

Tests:

inline getElementById
for (let i = 0; i < testSetSize; i++) { resultIds[i] = document.getElementById(divIds[i]); }
fnArrowLightest
for (let i = 0; i < testSetSize; i++) { resultIds[i] = fnArrowLightest(divIds[i]); }
fnArrowLight
for (let i = 0; i < testSetSize; i++) { resultIds[i] = fnArrowLight(divIds[i]); }
fnArrowFat
for (let i = 0; i < testSetSize; i++) { resultIds[i] = fnArrowFat(divIds[i]); }
fnArrowFatter
for (let i = 0; i < testSetSize; i++) { resultIds[i] = fnArrowFatter(divIds[i]); }
fnExpression
for (let i = 0; i < testSetSize; i++) { resultIds[i] = fnExpression(divIds[i]); }
fnExpressionNamed
for (let i = 0; i < testSetSize; i++) { resultIds[i] = fnExpressionNamed(divIds[i]); }
fnDeclaration
for (let i = 0; i < testSetSize; i++) { resultIds[i] = fnDeclaration(divIds[i]); }
inline getElementById (2nd time, control for test #1 , no penalty for going first)
for (let i = 0; i < testSetSize; i++) { resultIds[i] = document.getElementById(divIds[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
inline getElementById
fnArrowLightest
fnArrowLight
fnArrowFat
fnArrowFatter
fnExpression
fnExpressionNamed
fnDeclaration
inline getElementById (2nd time, control for test #1 , no penalty for going first)

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Related benchmarks: