Benchmark: Clean props array vs object

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

const DOM_ATTRIBUTES = [
    'children',
    'dangerouslySetInnerHTML',

    // Clipboard Events
    'onCopy',
    'onCopyCapture',
    'onCut',
    'onCutCapture',
    'onPaste',
    'onPasteCapture',

    // Composition Events
    'onCompositionEnd',
    'onCompositionEndCapture',
    'onCompositionStart',
    'onCompositionStartCapture',
    'onCompositionUpdate',
    'onCompositionUpdateCapture',

    // Focus Events
    'onFocus',
    'onFocusCapture',
    'onBlur',
    'onBlurCapture',

    // Form Events
    'onChange',
    'onChangeCapture',
    'onBeforeInput',
    'onBeforeInputCapture',
    'onInput',
    'onInputCapture',
    'onReset',
    'onResetCapture',
    'onSubmit',
    'onSubmitCapture',
    'onInvalid',
    'onInvalidCapture',

    // Image Events
    'onLoad',
    'onLoadCapture',
    'onError',
    'onErrorCapture',

    // Keyboard Events
    'onKeyDown',
    'onKeyDownCapture',
    'onKeyUp',
    'onKeyUpCapture',

    // Media Events
    'onAbort',
    'onAbortCapture',
    'onCanPlay',
    'onCanPlayCapture',
    'onCanPlayThrough',
    'onCanPlayThroughCapture',
    'onDurationChange',
    'onDurationChangeCapture',
    'onEmptied',
    'onEmptiedCapture',
    'onEncrypted',
    'onEncryptedCapture',
    'onEnded',
    'onEndedCapture',
    'onLoadedData',
    'onLoadedDataCapture',
    'onLoadedMetadata',
    'onLoadedMetadataCapture',
    'onLoadStart',
    'onLoadStartCapture',
    'onPause',
    'onPauseCapture',
    'onPlay',
    'onPlayCapture',
    'onPlaying',
    'onPlayingCapture',
    'onProgress',
    'onProgressCapture',
    'onRateChange',
    'onRateChangeCapture',
    'onResize',
    'onResizeCapture',
    'onSeeked',
    'onSeekedCapture',
    'onSeeking',
    'onSeekingCapture',
    'onStalled',
    'onStalledCapture',
    'onSuspend',
    'onSuspendCapture',
    'onTimeUpdate',
    'onTimeUpdateCapture',
    'onVolumeChange',
    'onVolumeChangeCapture',
    'onWaiting',
    'onWaitingCapture',

    // MouseEvents
    'onAuxClick',
    'onAuxClickCapture',
    'onClick',
    'onClickCapture',
    'onContextMenu',
    'onContextMenuCapture',
    'onDoubleClick',
    'onDoubleClickCapture',
    'onDrag',
    'onDragCapture',
    'onDragEnd',
    'onDragEndCapture',
    'onDragEnter',
    'onDragEnterCapture',
    'onDragExit',
    'onDragExitCapture',
    'onDragLeave',
    'onDragLeaveCapture',
    'onDragOver',
    'onDragOverCapture',
    'onDragStart',
    'onDragStartCapture',
    'onDrop',
    'onDropCapture',
    'onMouseDown',
    'onMouseDownCapture',
    'onMouseEnter',
    'onMouseLeave',
    'onMouseMove',
    'onMouseMoveCapture',
    'onMouseOut',
    'onMouseOutCapture',
    'onMouseOver',
    'onMouseOverCapture',
    'onMouseUp',
    'onMouseUpCapture',

    // Selection Events
    'onSelect',
    'onSelectCapture',

    // Touch Events
    'onTouchCancel',
    'onTouchCancelCapture',
    'onTouchEnd',
    'onTouchEndCapture',
    'onTouchMove',
    'onTouchMoveCapture',
    'onTouchStart',
    'onTouchStartCapture',

    // Pointer Events
    'onPointerDown',
    'onPointerDownCapture',
    'onPointerMove',
    'onPointerMoveCapture',
    'onPointerUp',
    'onPointerUpCapture',
    'onPointerCancel',
    'onPointerCancelCapture',
    'onPointerEnter',
    'onPointerLeave',
    'onPointerOver',
    'onPointerOverCapture',
    'onPointerOut',
    'onPointerOutCapture',
    'onGotPointerCapture',
    'onGotPointerCaptureCapture',
    'onLostPointerCapture',
    'onLostPointerCaptureCapture',

    // UI Events
    'onScroll',
    'onScrollCapture',
    'onScrollEnd',
    'onScrollEndCapture',

    // Wheel Events
    'onWheel',
    'onWheelCapture',

    // Animation Events
    'onAnimationStart',
    'onAnimationStartCapture',
    'onAnimationEnd',
    'onAnimationEndCapture',
    'onAnimationIteration',
    'onAnimationIterationCapture',

    // Toggle Events
    'onToggle',
    'onBeforeToggle',

    // Transition Events
    'onTransitionCancel',
    'onTransitionCancelCapture',
    'onTransitionEnd',
    'onTransitionEndCapture',
    'onTransitionRun',
    'onTransitionRunCapture',
    'onTransitionStart',
    'onTransitionStartCapture',
];

const HTML_ATTRIBUTES = [
    'abbr',
    'about',
    'accentHeight',
    'accept',
    'acceptCharset',
    'accessKey',
    'accumulate',
    'action',
    'additive',
    'align',
    'alignmentBaseline',
    'allow',
    'allowFullScreen',
    'allowReorder',
    'allowTransparency',
    'allowpopups',
    'alphabetic',
    'alt',
    'amplitude',
    'arabicForm',
    'as',
    'ascent',
    'async',
    'attributeName',
    'attributeType',
    'autoCapitalize',
    'autoComplete',
    'autoCorrect',
    'autoFocus',
    'autoPlay',
    'autoReverse',
    'autoSave',
    'autosize',
    'azimuth',
    'baseFrequency',
    'baseProfile',
    'baselineShift',
    'bbox',
    'begin',
    'bgcolor',
    'bias',
    'blinkfeatures',
    'border',
    'by',
    'calcMode',
    'capHeight',
    'capture',
    'cellPadding',
    'cellSpacing',
    'challenge',
    'charSet',
    'checked',
    'cite',
    'classID',
    'className',
    'clip',
    'clipPath',
    'clipPathUnits',
    'clipRule',
    'colSpan',
    'color',
    'colorInterpolation',
    'colorInterpolationFilters',
    'colorProfile',
    'colorRendering',
    'cols',
    'content',
    'contentEditable',
    'contentScriptType',
    'contentStyleType',
    'contextMenu',
    'controls',
    'controlsList',
    'coords',
    'crossOrigin',
    'cursor',
    'cx',
    'cy',
    'd',
    'data',
    'datatype',
    'dateTime',
    'decelerate',
    'decoding',
    'default',
    'defaultChecked',
    'defaultValue',
    'defer',
    'descent',
    'diffuseConstant',
    'dir',
    'dirName',
    'direction',
    'disablePictureInPicture',
    'disableRemotePlayback',
    'disableblinkfeatures',
    'disabled',
    'disableguestresize',
    'disablewebsecurity',
    'display',
    'divisor',
    'dominantBaseline',
    'download',
    'draggable',
    'dur',
    'dx',
    'dy',
    'edgeMode',
    'elevation',
    'enableBackground',
    'encType',
    'end',
    'enterKeyHint',
    'exponent',
    'exportparts',
    'externalResourcesRequired',
    'fetchPriority',
    'fill',
    'fillOpacity',
    'fillRule',
    'filter',
    'filterRes',
    'filterUnits',
    'floodColor',
    'floodOpacity',
    'focusable',
    'fontFamily',
    'fontSize',
    'fontSizeAdjust',
    'fontStretch',
    'fontStyle',
    'fontVariant',
    'fontWeight',
    'form',
    'formAction',
    'formEncType',
    'formMethod',
    'formNoValidate',
    'formTarget',
    'format',
    'fr',
    'frame',
    'frameBorder',
    'from',
    'fx',
    'fy',
    'g',
    'glyphName',
    'glyphOrientationHorizontal',
    'glyphOrientationVertical',
    'glyphRef',
    'gradientTransform',
    'gradientUnits',
    'guestinstance',
    'hanging',
    'headers',
    'height',
    'hidden',
    'high',
    'horizAdvX',
    'horizOriginX',
    'href',
    'hrefLang',
    'htmlFor',
    'httpEquiv',
    'httpreferrer',
    'id',
    'ideographic',
    'imageRendering',
    'imageSizes',
    'imageSrcSet',
    'in',
    'inert',
    'inlist',
    'inputMode',
    'integrity',
    'intercept',
    'is',
    'itemID',
    'itemProp',
    'itemRef',
    'itemScope',
    'itemType',
    'k',
    'kernelMatrix',
    'kernelUnitLength',
    'kerning',
    'keyParams',
    'keyPoints',
    'keySplines',
    'keyTimes',
    'keyType',
    'kind',
    'label',
    'lang',
    'lengthAdjust',
    'letterSpacing',
    'lightingColor',
    'limitingConeAngle',
    'list',
    'loading',
    'local',
    'loop',
    'low',
    'manifest',
    'marginHeight',
    'marginWidth',
    'markerEnd',
    'markerHeight',
    'markerMid',
    'markerStart',
    'markerUnits',
    'markerWidth',
    'mask',
    'maskContentUnits',
    'maskUnits',
    'mathematical',
    'max',
    'maxLength',
    'media',
    'mediaGroup',
    'method',
    'min',
    'minLength',
    'mode',
    'multiple',
    'muted',
    'name',
    'noModule',
    'noValidate',
    'nodeintegration',
    'nonce',
    'numOctaves',
    'offset',
    'onCancel',
    'onChange',
    'onClose',
    'opacity',
    'open',
    'operator',
    'optimum',
    'order',
    'orient',
    'orientation',
    'origin',
    'overflow',
    'overlinePosition',
    'overlineThickness',
    'paintOrder',
    'panose',
    'part',
    'partition',
    'path',
    'pathLength',
    'pattern',
    'patternContentUnits',
    'patternTransform',
    'patternUnits',
    'ping',
    'placeholder',
    'playsInline',
    'plugins',
    'pointerEvents',
    'points',
    'pointsAtX',
    'pointsAtY',
    'pointsAtZ',
    'popover',
    'popoverTarget',
    'popoverTargetAction',
    'poster',
    'precedence',
    'prefix',
    'preload',
    'preserveAlpha',
    'preserveAspectRatio',
    'primitiveUnits',
    'property',
    'r',
    'radioGroup',
    'radius',
    'readOnly',
    'refX',
    'refY',
    'referrerPolicy',
    'rel',
    'renderingIntent',
    'repeatCount',
    'repeatDur',
    'required',
    'requiredExtensions',
    'requiredFeatures',
    'resource',
    'restart',
    'result',
    'results',
    'rev',
    'reversed',
    'role',
    'rotate',
    'rowSpan',
    'rows',
    'rules',
    'rx',
    'ry',
    'sandbox',
    'scale',
    'scope',
    'scoped',
    'scrolling',
    'seamless',
    'security',
    'seed',
    'selected',
    'shape',
    'shapeRendering',
    'size',
    'sizes',
    'slope',
    'slot',
    'spacing',
    'span',
    'specularConstant',
    'specularExponent',
    'speed',
    'spellCheck',
    'spreadMethod',
    'src',
    'srcDoc',
    'srcLang',
    'srcSet',
    'start',
    'startOffset',
    'stdDeviation',
    'stemh',
    'stemv',
    'step',
    'stitchTiles',
    'stopColor',
    'stopOpacity',
    'strikethroughPosition',
    'strikethroughThickness',
    'string',
    'stroke',
    'strokeDasharray',
    'strokeDashoffset',
    'strokeLinecap',
    'strokeLinejoin',
    'strokeMiterlimit',
    'strokeOpacity',
    'strokeWidth',
    'style',
    'summary',
    'suppressContentEditableWarning',
    'suppressHydrationWarning',
    'surfaceScale',
    'systemLanguage',
    'tabIndex',
    'tableValues',
    'target',
    'targetX',
    'targetY',
    'textAnchor',
    'textDecoration',
    'textLength',
    'textRendering',
    'title',
    'to',
    'transform',
    'translate',
    'type',
    'typeof',
    'u',
    'underlinePosition',
    'underlineThickness',
    'unicode',
    'unicodeBidi',
    'unicodeRange',
    'unitsPerEm',
    'unselectable',
    'useMap',
    'useragent',
    'vAlphabetic',
    'vHanging',
    'vIdeographic',
    'vMathematical',
    'valign',
    'value',
    'values',
    'vectorEffect',
    'version',
    'vertAdvY',
    'vertOriginX',
    'vertOriginY',
    'viewBox',
    'viewTarget',
    'visibility',
    'vocab',
    'webpreferences',
    'width',
    'widths',
    'wmode',
    'wordSpacing',
    'wrap',
    'writingMode',
    'x',
    'xChannelSelector',
    'xHeight',
    'xlinkActuate',
    'xlinkArcrole',
    'xlinkHref',
    'xlinkRole',
    'xlinkShow',
    'xlinkTitle',
    'xlinkType',
    'xmlBase',
    'xmlLang',
    'xmlSpace',
    'xmlns',
    'xmlnsXlink',
    'y',
    'yChannelSelector',
    'z',
    'zoomAndPan',
];

const ALL_ATTRIBUTES = [...DOM_ATTRIBUTES, ...HTML_ATTRIBUTES]
const ALL_ATTRIBUTES_OBJ = ALL_ATTRIBUTES.reduce((acc, curr) => (acc[curr] = true, acc), {});

function cleanProperties(props) {
    return Object.fromEntries(
        Object.entries(props).filter(
            ([name]) =>
            name.startsWith('aria-') || name.startsWith('data-') || ALL_ATTRIBUTES.includes(name),
        ),
    )
};

function cleanPropertiesObj(props) {
    return Object.fromEntries(
        Object.entries(props).filter(
            ([name]) =>
            name.startsWith('aria-') || name.startsWith('data-') || name in ALL_ATTRIBUTES_OBJ,
        ),
    )
};

Tests:

Array
cleanProperties({title:'array', 'aria-label': 'label', onChange: () => {}})
Object
cleanPropertiesObj({title:'array', 'aria-label': 'label', onChange: () => {}})

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array
Object

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array	1242891.4 Ops/sec
Object	3928390.0 Ops/sec

Related benchmarks:

Clean props array vs object (version: 1)

Comparing performance of: Array vs Object

Created: one year ago by: Guest

Jump to the latest result

Array

Object

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A