Perf test

test.js

const props = ['accept', 'acceptcharset', 'accept-charset', 'accesskey', 'action', 'allowfullscreen', 'alt', 'as', 'async', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'autoplay', 'autosave', 'capture', 'cellpadding', 'cellspacing', 'challenge', 'charset', 'checked', 'children', 'cite', 'class', 'classid', 'classname', 'cols', 'colspan', 'content', 'contenteditable', 'contextmenu', 'controls', 'controlslist', 'coords', 'crossorigin', 'dangerouslysetinnerhtml', 'data', 'datetime', 'default', 'defaultchecked', 'defaultvalue', 'defer', 'dir', 'disabled', 'download', 'draggable', 'enctype', 'for', 'form', 'formmethod', 'formaction', 'formenctype', 'formnovalidate', 'formtarget', 'frameborder', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'htmlfor', 'httpequiv', 'http-equiv', 'icon', 'id', 'innerhtml', 'inputmode', 'integrity', 'is', 'itemid', 'itemprop', 'itemref', 'itemscope', 'itemtype', 'keyparams', 'keytype', 'kind', 'label', 'lang', 'list', 'loop', 'low', 'manifest', 'marginwidth', 'marginheight', 'max', 'maxlength', 'media', 'mediagroup', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nomodule', 'nonce', 'novalidate', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'poster', 'preload', 'profile', 'radiogroup', 'readonly', 'referrerpolicy', 'rel', 'required', 'reversed', 'role', 'rows', 'rowspan', 'sandbox', 'scope', 'scoped', 'scrolling', 'seamless', 'selected', 'shape', 'size', 'sizes', 'span', 'spellcheck', 'src', 'srcdoc', 'srclang', 'srcset', 'start', 'step', 'style', 'summary', 'tabindex', 'target', 'title', 'type', 'usemap', 'value', 'width', 'wmode', 'wrap', 'about', 'accentheight', 'accent-height', 'accumulate', 'additive', 'alignmentbaseline', 'alignment-baseline', 'allowreorder', 'alphabetic', 'amplitude', 'arabicform', 'arabic-form', 'ascent', 'attributename', 'attributetype', 'autoreverse', 'azimuth', 'basefrequency', 'baselineshift', 'baseline-shift', 'baseprofile', 'bbox', 'begin', 'bias', 'by', 'calcmode', 'capheight', 'cap-height', 'clip', 'clippath', 'clip-path', 'clippathunits', 'cliprule', 'clip-rule', 'color', 'colorinterpolation', 'color-interpolation', 'colorinterpolationfilters', 'color-interpolation-filters', 'colorprofile', 'color-profile', 'colorrendering', 'color-rendering', 'contentscripttype', 'contentstyletype', 'cursor', 'cx', 'cy', 'd', 'datatype', 'decelerate', 'descent', 'diffuseconstant', 'direction', 'display', 'divisor', 'dominantbaseline', 'dominant-baseline', 'dur', 'dx', 'dy', 'edgemode', 'elevation', 'enablebackground', 'enable-background', 'end', 'exponent', 'externalresourcesrequired', 'fill', 'fillopacity', 'fill-opacity', 'fillrule', 'fill-rule', 'filter', 'filterres', 'filterunits', 'floodopacity', 'flood-opacity', 'floodcolor', 'flood-color', 'focusable', 'fontfamily', 'font-family', 'fontsize', 'font-size', 'fontsizeadjust', 'font-size-adjust', 'fontstretch', 'font-stretch', 'fontstyle', 'font-style', 'fontvariant', 'font-variant', 'fontweight', 'font-weight', 'format', 'from', 'fx', 'fy', 'g1', 'g2', 'glyphname', 'glyph-name', 'glyphorientationhorizontal', 'glyph-orientation-horizontal', 'glyphorientationvertical', 'glyph-orientation-vertical', 'glyphref', 'gradienttransform', 'gradientunits', 'hanging', 'horizadvx', 'horiz-adv-x', 'horizoriginx', 'horiz-origin-x', 'ideographic', 'imagerendering', 'image-rendering', 'in2', 'in', 'inlist', 'intercept', 'k1', 'k2', 'k3', 'k4', 'k', 'kernelmatrix', 'kernelunitlength', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lengthadjust', 'letterspacing', 'letter-spacing', 'lightingcolor', 'lighting-color', 'limitingconeangle', 'local', 'markerend', 'marker-end', 'markerheight', 'markermid', 'marker-mid', 'markerstart', 'marker-start', 'markerunits', 'markerwidth', 'mask', 'maskcontentunits', 'maskunits', 'mathematical', 'mode', 'numoctaves', 'offset', 'opacity', 'operator', 'order', 'orient', 'orientation', 'origin', 'overflow', 'overlineposition', 'overline-position', 'overlinethickness', 'overline-thickness', 'paintorder', 'paint-order', 'panose1', 'panose-1', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'pointerevents', 'pointer-events', 'points', 'pointsatx', 'pointsaty', 'pointsatz', 'prefix', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'property', 'r', 'radius', 'refx', 'refy', 'renderingintent', 'rendering-intent', 'repeatcount', 'repeatdur', 'requiredextensions', 'requiredfeatures', 'resource', 'restart', 'result', 'results', 'rotate', 'rx', 'ry', 'scale', 'security', 'seed', 'shaperendering', 'shape-rendering', 'slope', 'spacing', 'specularconstant', 'specularexponent', 'speed', 'spreadmethod', 'startoffset', 'stddeviation', 'stemh', 'stemv', 'stitchtiles', 'stopcolor', 'stop-color', 'stopopacity', 'stop-opacity', 'strikethroughposition', 'strikethrough-position', 'strikethroughthickness', 'strikethrough-thickness', 'string', 'stroke', 'strokedasharray', 'stroke-dasharray', 'strokedashoffset', 'stroke-dashoffset', 'strokelinecap', 'stroke-linecap', 'strokelinejoin', 'stroke-linejoin', 'strokemiterlimit', 'stroke-miterlimit', 'strokewidth', 'stroke-width', 'strokeopacity', 'stroke-opacity', 'suppresscontenteditablewarning', 'suppresshydrationwarning', 'surfacescale', 'systemlanguage', 'tablevalues', 'targetx', 'targety', 'textanchor', 'text-anchor', 'textdecoration', 'text-decoration', 'textlength', 'textrendering', 'text-rendering', 'to', 'transform', 'typeof', 'u1', 'u2', 'underlineposition', 'underline-position', 'underlinethickness', 'underline-thickness', 'unicode', 'unicodebidi', 'unicode-bidi', 'unicoderange', 'unicode-range', 'unitsperem', 'units-per-em', 'unselectable', 'valphabetic', 'v-alphabetic', 'values', 'vectoreffect', 'vector-effect', 'version', 'vertadvy', 'vert-adv-y', 'vertoriginx', 'vert-origin-x', 'vertoriginy', 'vert-origin-y', 'vhanging', 'v-hanging', 'videographic', 'v-ideographic', 'viewbox', 'viewtarget', 'visibility', 'vmathematical', 'v-mathematical', 'vocab', 'widths', 'wordspacing', 'word-spacing', 'writingmode', 'writing-mode', 'x1', 'x2', 'x', 'xchannelselector', 'xheight', 'x-height', 'xlinkactuate', 'xlink:actuate', 'xlinkarcrole', 'xlink:arcrole', 'xlinkhref', 'xlink:href', 'xlinkrole', 'xlink:role', 'xlinkshow', 'xlink:show', 'xlinktitle', 'xlink:title', 'xlinktype', 'xlink:type', 'xmlbase', 'xml:base', 'xmllang', 'xml:lang', 'xmlns', 'xml:space', 'xmlnsxlink', 'xmlns:xlink', 'xmlspace', 'y1', 'y2', 'y', 'ychannelselector', 'z', 'zoomandpan', 'onCopy', 'onCut', 'onPaste', 'onCompositionEnd', 'onCompositionStart', 'onCompositionUpdate', 'onKeyDown', 'onKeyPress', 'onKeyUp', 'onFocus', 'onBlur', 'onChange', 'onInput', 'onInvalid', 'onSubmit', 'onClick', 'onContextMenu', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp', 'onPointerDown', 'onPointerMove', 'onPointerUp', 'onPointerCancel', 'onGotPointerCapture', 'onLostPointerCapture', 'onPointerEnter', 'onPointerLeave', 'onPointerOver', 'onPointerOut', 'onSelect', 'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart', 'onScroll', 'onWheel', 'onAbort', 'onCanPlay', 'onCanPlayThrough', 'onDurationChange', 'onEmptied', 'onEncrypted', 'onEnded', 'onError', 'onLoadedData', 'onLoadedMetadata', 'onLoadStart', 'onPause', 'onPlay', 'onPlaying', 'onProgress', 'onRateChange', 'onSeeked', 'onSeeking', 'onStalled', 'onSuspend', 'onTimeUpdate', 'onVolumeChange', 'onWaiting', 'onLoad', 'onError', 'onAnimationStart', 'onAnimationEnd', 'onAnimationIteration', 'onTransitionEnd', 'onToggle']
const length = props.length
function getRandomProp() {
  return props[Math.floor(Math.random() * length)]
}

console.time('index')
const a = []
for (let i = 0; i < 10000000; i++) {
  const name = getRandomProp()
  if (name[0] === 'o' && name[1] === 'n') a.push(name)
}
console.log(a.length)
console.timeEnd('index')
console.time('slice')
const b = []
for (let i = 0; i < 10000000; i++) {
  const name = getRandomProp()
  if (name.slice(0, 2) === 'on') b.push(name)
}
console.log(b.length)
console.timeEnd('slice')
console.time('indexOf')
const c = []
for (let i = 0; i < 10000000; i++) {
  const name = getRandomProp()
  if (name.indexOf('on') === 0) c.push(name)
}
console.log(c.length)
console.timeEnd('indexOf')
console.time('startsWith')
const d = []
for (let i = 0; i < 10000000; i++) {
  const name = getRandomProp()
  if (name.startsWith('on')) d.push(name)
}
console.log(d.length)
console.timeEnd('startsWith')