Benchmark: Destructuring test

Script Preparation code:

var a = {bla: 1, heyo: 2, afdsda: 3, innerRef: 4, ad: 5};
var b = {hasFocusPriority: 1, heyo: 2, afdsda: 3, innerRef: 4, ad: 5};
var c = {hasFocusPriority: 1, ref: 2, onFocus: 3, innerRef: 4, onNativeBlur: 5};

function _objectWithoutPropertiesLoose(source, excluded) {
    if (source == null) return {};
    var target = {};
    var sourceKeys = Object.keys(source);
    var key, i;
    for (i = 0; i < sourceKeys.length; i++) {
        key = sourceKeys[i];
        if (excluded.indexOf(key) >= 0) continue;
        target[key] = source[key];
    }
    return target;
}

function _altGenerated(target, source, excluded) {
    for (var key in source) {
        if (!excluded(key)) target[key] = source[key];
    }
    return target;
}

function destructure(props) {
    return Object.assign(
        {ref: 1, onFocus: 2, onBlur: 3},
        _objectWithoutPropertiesLoose(props, [
            'innerRef',
            'hasFocusPriority',
            'ref',
            'onFocus',
            'onBlur',
            'onNativeFocus',
            'onNativeBlur',
        ])
    );
}

function destructureAlt(props) {
    return _altGenerated(
        {ref: 1, onFocus: 2, onBlur: 3},
        props,
        key =>
            key === 'innerRef' ||
            key === 'hasFocusPriority' ||
            key === 'ref' ||
            key === 'onFocus' ||
            key === 'onBlur' ||
            key === 'onNativeFocus' ||
            key === 'onNativeBlur'
    );
}

function manual(props) {
    var childProps = {
        ref: 1,
        onFocus: 2,
        onBlur: 3,
    };

    for (let key in props) {
        switch (key) {
        case 'innerRef':
        case 'hasFocusPriority':
        case 'ref': // I do not know if this one could happen
        case 'onFocus':
        case 'onBlur':
        case 'onNativeFocus':
        case 'onNativeBlur':
            break;
        default:
            childProps[key] = props[key];
        }
    }

    return childProps;
}

function manual2(props) {
    var childProps = {
        ref: 1,
        onFocus: 2,
        onBlur: 3,
    };

    let keys = Object.keys(props);
    for (let i = 0; i < keys.length; i++) {
        let key = keys[i];
        switch (key) {
        case 'innerRef':
        case 'hasFocusPriority':
        case 'ref': // I do not know if this one could happen
        case 'onFocus':
        case 'onBlur':
        case 'onNativeFocus':
        case 'onNativeBlur':
            break;
        default:
            childProps[key] = props[key];
        }
    }

    return childProps;
}

Tests:

A
destructureAlt(a); destructureAlt(b); destructureAlt(c);
B
manual(a); manual(b); manual(c);
C
manual2(a); manual2(b); manual2(c);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
A
B
C

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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.87 Safari/537.36

Browser/OS: Chrome 78 on Linux

View result in a separate tab

Test name	Executions per second
A	934382.8 Ops/sec
B	1243361.0 Ops/sec
C	728943.3 Ops/sec

Destructuring test (version: 0)

Comparing performance of: A vs B vs C

Created: 4 years ago by: Guest

Jump to the latest result

A

B

C

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A