Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Clean props array vs object
(version: 1)
Comparing performance of:
Array vs Object
Created:
one year ago
by:
Guest
Go to the latest result
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>
Run tests (2)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=600389" width="100%" height="500px"></iframe>
Object
3.9M/s
Array
1.2M/s
View exact numbers
Test name
Executions per second
✓
Object
3,928,390 Ops/sec
Array
1,242,891 Ops/sec
Related benchmarks
Object.assign vs _.defaultsDeep vs Object Destructuring
Initialization: direct vs. spread vs. Object.assign
React 3
Comments
Confirm delete:
Do you really want to delete benchmark?