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: 4 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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

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

Browser/OS: Chrome 76 on Windows

View result in a separate tab

Test name	Executions per second
inline getElementById	1637.0 Ops/sec
fnArrowLightest	2108.3 Ops/sec
fnArrowLight	2094.9 Ops/sec
fnArrowFat	2057.3 Ops/sec
fnArrowFatter	2071.5 Ops/sec
fnExpression	2071.7 Ops/sec
fnExpressionNamed	2073.8 Ops/sec
fnDeclaration	1762.3 Ops/sec
inline getElementById (2nd time, control for test #1 , no penalty for going first)	1663.1 Ops/sec

getElementById vs id function (version: 0)

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: 4 years ago by: Registered User

Jump to the latest result

inline getElementById

fnArrowLightest

fnArrowLight

fnArrowFat

fnArrowFatter

fnExpression

fnExpressionNamed

fnDeclaration

inline getElementById (2nd time, control for test #1 , no penalty for going first)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A