



<script src="/lib/lodash/dist/lodash.js"></script>
<script src="/lib/platform/platform.js"></script>
<script src="/lib/benchmark/benchmark.js"></script>
<script src="/js/testrunner.js?v=uhhjlNf8Vw1G0SsjCNR5kDrchDwmF1nqr2pn9YS1pz0"></script>

    <span><script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="dest"></div></span>

<div id="validation-html-preparation"></div>

<script type="text/javascript">
    pageController = new TestRunnerController();
</script>
<textarea id="benchmark_definition_json" style="display:none">
    {&quot;ScriptPreparationCode&quot;:&quot;\u0027use strict\u0027;\r\n\r\nconst makeMap = (list) =\u003E {\r\n\tconst map = Object.create(null);\r\n\tfor (let i = 0; i \u003C list.length; i\u002B\u002B) {\r\n\t\tmap[list[i]] = true;\r\n\t}\r\n\treturn (val) =\u003E !!map[val];\r\n};\r\n\r\nconst shallowEqual = (object1, object2) =\u003E {\r\n\tif (object1 === object2) {\r\n\t\treturn true;\r\n\t}\r\n\r\n\tif (\r\n\t\ttypeof object1 !== \u0027object\u0027 ||\r\n\t\ttypeof object2 !== \u0027object\u0027 ||\r\n\t\tobject1 === null ||\r\n\t\tobject2 === null\r\n\t) {\r\n\t\treturn false;\r\n\t}\r\n\r\n\tconst keys1 = Object.keys(object1);\r\n\tconst keys2 = Object.keys(object2);\r\n\r\n\tif (keys1.length !== keys2.length) {\r\n\t\treturn false;\r\n\t}\r\n\r\n\tfor (const key of keys1) {\r\n\t\tif (object1[key] !== object2[key]) {\r\n\t\t\treturn false;\r\n\t\t}\r\n\t}\r\n\r\n\treturn true;\r\n};\r\n\r\nconst HTML_TAGS =\r\n\t\u0060html,body,base,head,link,meta,style,title,address,article,aside,footer,header,hgroup,h1,h2,h3,h4,h5,h6,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,summary,template,blockquote,iframe,tfoot\u0060.split(\r\n\t\t\u0027,\u0027\r\n\t);\r\n\r\nconst isHTMLTag = makeMap(HTML_TAGS);\r\n\r\nconst specialBooleanAttrs =\r\n\t\u0060itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly\u0060.split(\r\n\t\t\u0027,\u0027\r\n\t);\r\n\r\nconst isSpecialBooleanAttr = makeMap(specialBooleanAttrs);\r\n\r\nconst includeBooleanAttr = (value) =\u003E !!value || value === \u0027\u0027;\r\n\r\nconst optionsModifierRE = /(?:Once|Passive|Capture)$/;\r\nconst parseEventName = (name) =\u003E {\r\n\tlet options = void 0;\r\n\tif (optionsModifierRE.test(name)) {\r\n\t\toptions = {};\r\n\t\tlet m;\r\n\t\twhile ((m = name.match(optionsModifierRE))) {\r\n\t\t\tname = name.slice(0, name.length - m[0].length);\r\n\t\t\toptions[m[0].toLowerCase()] = true;\r\n\t\t}\r\n\t}\r\n\tconst event = name.slice(2).toLowerCase();\r\n\treturn [event, options];\r\n};\r\n\r\nconst genCursorFix = () =\u003E {\r\n\tconst focusedElement = document.activeElement;\r\n\tconst start = focusedElement.selectionStart;\r\n\tconst end = focusedElement.selectionEnd;\r\n\r\n\treturn () =\u003E {\r\n\t\t// \u91CD\u65B0\u5B9A\u4F4D\u7126\u70B9, \u6062\u590D\u9009\u62E9\u4F4D\u7F6E\r\n\t\tfocusedElement.focus();\r\n\t\tfocusedElement.selectionStart = start;\r\n\t\tfocusedElement.selectionEnd = end;\r\n\t};\r\n};\r\n\r\nconst resolvedPromise = Promise.resolve();\r\nconst queueMicrotask =\r\n\twindow.queueMicrotask ||\r\n\t((callback) =\u003E {\r\n\t\tif (typeof callback !== \u0027function\u0027) {\r\n\t\t\tthrow new TypeError(\u0027The argument to queueMicrotask must be a function.\u0027);\r\n\t\t}\r\n\r\n\t\tresolvedPromise.then(callback).catch((error) =\u003E\r\n\t\t\tsetTimeout(() =\u003E {\r\n\t\t\t\tthrow error;\r\n\t\t\t}, 0)\r\n\t\t);\r\n\t});\r\n\r\nconst uniqueSet = new Set();\r\nconst queueMicrotaskOnce = (func) =\u003E {\r\n\tif (!uniqueSet.has(func)) {\r\n\t\tuniqueSet.add(func);\r\n\t\tqueueMicrotask(() =\u003E {\r\n\t\t\tfunc();\r\n\t\t\tuniqueSet.delete(func);\r\n\t\t});\r\n\t}\r\n};\r\n\r\nlet isMessageLoopRunning = false;\r\nconst scheduledCallbackQueue = [];\r\nconst performWork = () =\u003E {\r\n\tif (scheduledCallbackQueue.length) {\r\n\t\ttry {\r\n\t\t\tconst work = scheduledCallbackQueue.shift();\r\n\t\t\twork();\r\n\t\t} finally {\r\n\t\t\tif (scheduledCallbackQueue.length) {\r\n\t\t\t\tschedulePerform();\r\n\t\t\t} else {\r\n\t\t\t\tisMessageLoopRunning = false;\r\n\t\t\t}\r\n\t\t}\r\n\t} else {\r\n\t\tisMessageLoopRunning = false;\r\n\t}\r\n};\r\n\r\nconst channel = new MessageChannel();\r\nchannel.port1.onmessage = performWork;\r\nconst schedulePerform = () =\u003E channel.port2.postMessage(null);\r\n\r\nconst queueMacrotask = (callback) =\u003E {\r\n\tscheduledCallbackQueue.push(callback);\r\n\tif (!isMessageLoopRunning) {\r\n\t\tisMessageLoopRunning = true;\r\n\t\tschedulePerform();\r\n\t}\r\n};\r\n\r\nconst isTextOrCommentElement = (element) =\u003E\r\n\telement.type === \u0027text\u0027 || element.type === \u0027comment\u0027;\r\n\r\nfunction onCompositionStart(e) {\r\n\te.target.composing = true;\r\n}\r\nfunction onCompositionEnd(e) {\r\n\tconst target = e.target;\r\n\tif (target.composing) {\r\n\t\ttarget.composing = false;\r\n\t\ttarget.dispatchEvent(new Event(\u0027input\u0027));\r\n\t}\r\n}\r\n\r\nfunction onInputFixed(fun) {\r\n\treturn function (e) {\r\n\t\tif (!e.target.composing) {\r\n\t\t\tfun(e);\r\n\t\t}\r\n\t};\r\n}\r\n\r\nfunction fixProps(oldProps) {\r\n\tconst newProps = { ...oldProps };\r\n\tif (\u0027onInput\u0027 in newProps) {\r\n\t\tnewProps[\u0027onCompositionstart\u0027] = onCompositionStart;\r\n\t\tnewProps[\u0027onCompositionend\u0027] = onCompositionEnd;\r\n\t\tnewProps[\u0027onChange\u0027] = onCompositionEnd;\r\n\t\tnewProps[\u0027onInput\u0027] = onInputFixed(newProps[\u0027onInput\u0027]);\r\n\t}\r\n\treturn newProps;\r\n}\r\n\r\nfunction genBuildInFun($tag) {\r\n\tconst func = function (\r\n\t\tprops = {},\r\n\t\toldProps = {},\r\n\t\t{ instance, useState, useEffect }\r\n\t) {\r\n\t\toldProps = fixProps(oldProps);\r\n\t\tprops = fixProps(props);\r\n\r\n\t\tconst [invokers] = useState({});\r\n\t\tconst element = instance || document.createElement($tag);\r\n\t\tconst deleteMap = { ...oldProps };\r\n\t\telement._fiberKey = this.key;\r\n\t\telement._fiber = this;\r\n\r\n\t\tfor (const [pKey, pValue] of Object.entries(props)) {\r\n\t\t\tif (pKey.match(/^on[A-Z]/)) {\r\n\t\t\t\tconst [eventName, options] = parseEventName(pKey);\r\n\r\n\t\t\t\tif (!invokers[pKey]) {\r\n\t\t\t\t\tinvokers[pKey] = {\r\n\t\t\t\t\t\traw: pValue,\r\n\t\t\t\t\t\thandler(event) {\r\n\t\t\t\t\t\t\tinvokers[pKey].raw(event);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t};\r\n\r\n\t\t\t\t\telement.addEventListener(eventName, invokers[pKey].handler, options);\r\n\t\t\t\t} else {\r\n\t\t\t\t\tinvokers[pKey].raw = pValue;\r\n\t\t\t\t}\r\n\r\n\t\t\t\tdelete deleteMap[pKey];\r\n\t\t\t\tcontinue;\r\n\t\t\t}\r\n\r\n\t\t\tdelete deleteMap[pKey];\r\n\t\t\tif (pKey === \u0027children\u0027 || pKey === \u0027ref\u0027 || pKey === \u0027key\u0027) {\r\n\t\t\t\tcontinue;\r\n\t\t\t}\r\n\t\t\tif (pValue === oldProps[pKey]) {\r\n\t\t\t\tcontinue;\r\n\t\t\t}\r\n\r\n\t\t\tconst isBoolean = isSpecialBooleanAttr(pKey);\r\n\r\n\t\t\tif (pValue == null || (isBoolean \u0026\u0026 !includeBooleanAttr(pValue))) {\r\n\t\t\t\telement.removeAttribute(pKey);\r\n\t\t\t} else {\r\n\t\t\t\telement.setAttribute(pKey, isBoolean ? \u0027\u0027 : pValue);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tfor (const [pKey, map] of Object.entries(deleteMap)) {\r\n\t\t\tif (pKey.match(/^on[A-Z]/)) {\r\n\t\t\t\tconst [eventName, options] = parseEventName(pKey);\r\n\t\t\t\telement.removeEventListener(eventName, map.handler, options);\r\n\t\t\t} else {\r\n\t\t\t\telement.removeAttribute(pKey);\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tuseEffect(\r\n\t\t\t() =\u003E () =\u003E {\r\n\t\t\t\tfor (const [pKey, map] of Object.entries(invokers)) {\r\n\t\t\t\t\tconst [eventName, options] = parseEventName(pKey);\r\n\t\t\t\t\telement.removeEventListener(eventName, map.handler, options);\r\n\t\t\t\t}\r\n\t\t\t\telement.remove();\r\n\t\t\t},\r\n\t\t\t[]\r\n\t\t);\r\n\r\n\t\treturn element;\r\n\t};\r\n\r\n\tObject.defineProperty(func, \u0027name\u0027, { value: $tag });\r\n\treturn func;\r\n}\r\n\r\nconst buildIn = {\r\n\tcomment(props, oldProps, { instance, useEffect }) {\r\n\t\tconst element = instance || document.createComment(props.content);\r\n\t\telement._fiberKey = this.key;\r\n\t\telement._fiber = this;\r\n\r\n\t\tif (!oldProps || props.content !== oldProps.content) {\r\n\t\t\telement.data = props.content;\r\n\t\t}\r\n\t\tuseEffect(\r\n\t\t\t() =\u003E () =\u003E {\r\n\t\t\t\telement.remove();\r\n\t\t\t},\r\n\t\t\t[]\r\n\t\t);\r\n\r\n\t\treturn element;\r\n\t},\r\n\ttext(props, oldProps, { instance, useEffect }) {\r\n\t\tconst element = instance || document.createTextNode(props.content);\r\n\t\telement._fiberKey = this.key;\r\n\t\telement._fiber = this;\r\n\r\n\t\tif (!oldProps || props.content !== oldProps.content) {\r\n\t\t\telement.data = props.content;\r\n\t\t}\r\n\r\n\t\tuseEffect(\r\n\t\t\t() =\u003E () =\u003E {\r\n\t\t\t\telement.remove();\r\n\t\t\t},\r\n\t\t\t[]\r\n\t\t);\r\n\r\n\t\treturn element;\r\n\t}\r\n};\r\n\r\nHTML_TAGS.forEach((tag) =\u003E {\r\n\tbuildIn[tag] = genBuildInFun(tag);\r\n});\r\n\r\nconst HostElementSet = new Set(Object.values(buildIn));\r\n\r\nconst isHostElementFn = (func) =\u003E HostElementSet.has(func);\r\n\r\nconst MountedLane = 0;\r\nconst UpdatedLane = 1;\r\n\r\nconst firstNextWithProps = (generatorFunction) =\u003E {\r\n\treturn (func, pushRenderElement) =\u003E {\r\n\t\tconst generatorObject = generatorFunction(func, pushRenderElement);\r\n\r\n\t\tgeneratorObject.next();\r\n\r\n\t\tconst result = {\r\n\t\t\tnext: (...args) =\u003E {\r\n\t\t\t\treturn generatorObject.next(...args);\r\n\t\t\t},\r\n\t\t\tthrow: (...args) =\u003E {\r\n\t\t\t\treturn generatorObject.throw(...args);\r\n\t\t\t},\r\n\r\n\t\t\t//\u5B50 fiber \u72B6\u6001\r\n\t\t\tfirst: null,\r\n\t\t\tlast: null,\r\n\t\t\tlength: 0,\r\n\r\n\t\t\t// \u81EA\u8EAB fiber \u72B6\u6001\r\n\t\t\tindex: 0,\r\n\t\t\tprevious: null,\r\n\t\t\tsibling: null,\r\n\t\t\treturn: null,\r\n\t\t\tStatusLane: MountedLane,\r\n\r\n\t\t\t// \u7EE7\u627F Element \u6570\u636E\r\n\t\t\ttype: func,\r\n\t\t\tkey: null,\r\n\t\t\tprops: {},\r\n\t\t\tchildren: null,\r\n\r\n\t\t\t// dom \u6570\u636E\r\n\t\t\tstateNode: document.createDocumentFragment()\r\n\t\t};\r\n\r\n\t\tgeneratorObject.next(result);\r\n\r\n\t\treturn result;\r\n\t};\r\n};\r\n\r\nconst checkIfSnapshotChanged = ({ value, getSnapshot }) =\u003E {\r\n\ttry {\r\n\t\treturn value !== getSnapshot();\r\n\t} catch {\r\n\t\treturn true;\r\n\t}\r\n};\r\n\r\nfunction* withStateFun(func, pushRenderElement) {\r\n\tconst self = yield;\r\n\r\n\tlet props = void 0;\r\n\tlet newProps = (yield) || {};\r\n\tlet result = null;\r\n\r\n\tlet StateIndex = 0;\r\n\tconst hookQueue = [];\r\n\r\n\tconst useState = (initialState) =\u003E {\r\n\t\tconst innerIndex = StateIndex\u002B\u002B;\r\n\r\n\t\tif (hookQueue.length \u003C= innerIndex) {\r\n\t\t\tif (typeof initialState === \u0027function\u0027) {\r\n\t\t\t\tinitialState = initialState();\r\n\t\t\t}\r\n\t\t\thookQueue[innerIndex] = initialState;\r\n\t\t}\r\n\r\n\t\treturn [\r\n\t\t\thookQueue[innerIndex],\r\n\t\t\t(newState) =\u003E {\r\n\t\t\t\tif (typeof newState === \u0027function\u0027) {\r\n\t\t\t\t\tconst oldState = hookQueue[innerIndex];\r\n\t\t\t\t\tnewState = newState(oldState);\r\n\t\t\t\t}\r\n\t\t\t\thookQueue[innerIndex] = newState;\r\n\r\n\t\t\t\tpushRenderElement(self);\r\n\t\t\t}\r\n\t\t];\r\n\t};\r\n\r\n\tconst effects = [];\r\n\tconst cleanEffects = [];\r\n\tconst useEffect = (effect, deps) =\u003E {\r\n\t\tconst innerIndex = StateIndex\u002B\u002B;\r\n\t\tconst oldDeps = hookQueue[innerIndex] ? hookQueue[innerIndex][1] : NaN;\r\n\r\n\t\tif (hookQueue.length \u003C= innerIndex) {\r\n\t\t\thookQueue[innerIndex] = [effect, deps];\r\n\t\t} else {\r\n\t\t\thookQueue[innerIndex][1] = deps;\r\n\t\t}\r\n\r\n\t\tif (deps == void 0) {\r\n\t\t\teffects.push(effect);\r\n\t\t} else if (Array.isArray(deps)) {\r\n\t\t\tif (!deps.length) {\r\n\t\t\t\tif (self.StatusLane === MountedLane) {\r\n\t\t\t\t\teffects.push(effect);\r\n\t\t\t\t\teffect.mountDep = true;\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tif (!shallowEqual(deps, oldDeps)) {\r\n\t\t\t\t\teffects.push(effect);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\r\n\tconst useSyncExternalStore = (subscribe, getSnapshot) =\u003E {\r\n\t\tconst value = getSnapshot();\r\n\t\tconst [{ inst }, forceUpdate] = useState({\r\n\t\t\tinst: { value, getSnapshot }\r\n\t\t});\r\n\r\n\t\tuseEffect(() =\u003E {\r\n\t\t\tif (checkIfSnapshotChanged(inst)) {\r\n\t\t\t\tforceUpdate({ inst });\r\n\t\t\t}\r\n\r\n\t\t\treturn subscribe(function handleStoreChange() {\r\n\t\t\t\tif (checkIfSnapshotChanged(inst)) {\r\n\t\t\t\t\tforceUpdate({ inst });\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t}, [subscribe]);\r\n\r\n\t\treturn value;\r\n\t};\r\n\r\n\tself.flushEffects = function flushEffects() {\r\n\t\twhile (effects.length) {\r\n\t\t\tconst current = effects.shift();\r\n\t\t\tconst clean = current();\r\n\r\n\t\t\tif (typeof clean === \u0027function\u0027) {\r\n\t\t\t\tclean.mountDep = current.mountDep;\r\n\t\t\t\tcleanEffects.push(clean);\r\n\t\t\t}\r\n\t\t}\r\n\t\tself.StatusLane = UpdatedLane;\r\n\t};\r\n\r\n\tself.flushCleanEffects = function flushCleanEffects(isUnmounted) {\r\n\t\tconst temp = [];\r\n\r\n\t\twhile (cleanEffects.length) {\r\n\t\t\tconst clean = cleanEffects.shift();\r\n\t\t\tconst isUnmountClean = clean.mountDep;\r\n\r\n\t\t\tif (isUnmounted) {\r\n\t\t\t\tclean();\r\n\t\t\t} else {\r\n\t\t\t\tif (!isUnmountClean) {\r\n\t\t\t\t\tclean();\r\n\t\t\t\t} else {\r\n\t\t\t\t\ttemp.push(clean);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t\tif (isUnmounted) {\r\n\t\t\tprops = void 0;\r\n\t\t\teffects.length = 0;\r\n\t\t\tcleanEffects.length = 0;\r\n\t\t\thookQueue.length = 0;\r\n\t\t} else {\r\n\t\t\tcleanEffects.push(...temp);\r\n\t\t}\r\n\t};\r\n\r\n\tconst hookMap = {\r\n\t\tuseState,\r\n\t\tuseEffect,\r\n\t\tuseSyncExternalStore\r\n\t};\r\n\r\n\twhile (true) {\r\n\t\tself.flushCleanEffects();\r\n\r\n\t\tStateIndex = 0;\r\n\r\n\t\tresult = func.call(self, newProps, props, hookMap);\r\n\r\n\t\tprops = newProps;\r\n\r\n\t\tnewProps = yield result;\r\n\r\n\t\thookMap.instance = result;\r\n\t}\r\n}\r\n\r\nconst componentCreator = firstNextWithProps(withStateFun);\r\n\r\nfunction generator(pushRenderElement, element) {\r\n\tconst result = componentCreator(\r\n\t\ttypeof element.type === \u0027string\u0027 ? buildIn[element.type] : element.type,\r\n\t\tpushRenderElement\r\n\t);\r\n\r\n\tresult.props = element.props;\r\n\treturn result;\r\n}\r\n\r\nfunction jsx(type, props = {}, key = null) {\r\n\treturn { key, type, props };\r\n}\r\n\r\nfunction Fragment(props) {\r\n\treturn toChildren(props.children);\r\n}\r\n\r\nconst renderList = new Set();\r\nconst pushRenderElement = (generatorObj) =\u003E {\r\n\trenderList.add(generatorObj);\r\n\tqueueMicrotaskOnce(forceRender);\r\n};\r\n\r\nfunction* lastPositionFiber(fiber) {\r\n\twhile (fiber) {\r\n\t\tif (fiber.type !== Fragment || !fiber.props.target) {\r\n\t\t\tyield fiber;\r\n\t\t\tyield* lastPositionFiber(fiber.last);\r\n\t\t}\r\n\t\tfiber = fiber.previous;\r\n\t}\r\n}\r\n\r\nfunction getPreviousNode(fiber) {\r\n\tconst previous = fiber.previous;\r\n\tfor (const temp of lastPositionFiber(previous)) {\r\n\t\tif (isHostElementFn(temp.type)) {\r\n\t\t\treturn temp.stateNode;\r\n\t\t}\r\n\t}\r\n}\r\n\r\nconst insertNode = (existReturnFiber, fiber) =\u003E {\r\n\tconst preNode = getPreviousNode(fiber);\r\n\r\n\tif (preNode) {\r\n\t\tpreNode.after(fiber.stateNode);\r\n\t} else {\r\n\t\tif (isHostElementFn(existReturnFiber.type)) {\r\n\t\t\texistReturnFiber.prepend(fiber.stateNode);\r\n\t\t} else {\r\n\t\t\tlet parentPreviousNode = getPreviousNode(existReturnFiber);\r\n\t\t\twhile (!parentPreviousNode) {\r\n\t\t\t\texistReturnFiber = existReturnFiber.return;\r\n\t\t\t\tparentPreviousNode = getPreviousNode(existReturnFiber);\r\n\t\t\t}\r\n\t\t\tparentPreviousNode.after(fiber.stateNode);\r\n\t\t}\r\n\t}\r\n};\r\n\r\nfunction cleanChildFiber(fiber) {\r\n\tfiber.first = null;\r\n\tfiber.last = null;\r\n\tfiber.length = 0;\r\n}\r\nfunction cleanSelfFiber(fiber) {\r\n\tfiber.index = 0;\r\n\tfiber.previous = null;\r\n\tfiber.sibling = null;\r\n\tfiber.return = null;\r\n}\r\n\r\nlet FiberMap = new Map();\r\n\r\nconst gen = (element, key) =\u003E {\r\n\tlet fiber = null;\r\n\tif (key !== void 0 \u0026\u0026 FiberMap \u0026\u0026 FiberMap.get(key)) {\r\n\t\tfiber = FiberMap.get(key);\r\n\t\tFiberMap.delete(key);\r\n\r\n\t\tfiber.reuse = \u0027reuse\u0027 in fiber ? fiber.reuse : true;\r\n\t\tfiber.StatusLane = UpdatedLane;\r\n\t\tcleanSelfFiber(fiber);\r\n\t} else {\r\n\t\tfiber = generator(pushRenderElement, element);\r\n\t}\r\n\r\n\tfiber.key = key;\r\n\treturn fiber;\r\n};\r\n\r\nfunction linkReturn(returnFiber, fiber) {\r\n\tif (returnFiber) {\r\n\t\tconst index = returnFiber.length || 0;\r\n\r\n\t\tfiber.index = index;\r\n\t\tfiber.return = returnFiber;\r\n\r\n\t\tif (!returnFiber.first) {\r\n\t\t\treturnFiber.first = fiber;\r\n\t\t} else {\r\n\t\t\treturnFiber.last.sibling = fiber;\r\n\t\t\tfiber.previous = returnFiber.last;\r\n\t\t}\r\n\r\n\t\treturnFiber.last = fiber;\r\n\t\treturnFiber.length = index \u002B 1;\r\n\t}\r\n}\r\nfunction toChildren(children) {\r\n\tif (children === void 0) {\r\n\t\treturn children;\r\n\t}\r\n\treturn [].concat(children);\r\n}\r\n\r\nfunction beginWork(element, returnFiber) {\r\n\tconst pKey = returnFiber ? \u0060${returnFiber.key}:\u0060 : \u0027\u0027;\r\n\tconst length = returnFiber ? returnFiber.length || 0 : 0;\r\n\r\n\tif (typeof element === \u0027string\u0027 || typeof element === \u0027number\u0027) {\r\n\t\telement = jsx(\u0027text\u0027, { content: element });\r\n\t} else if (Array.isArray(element)) {\r\n\t\telement = jsx(Fragment, { children: element });\r\n\t} else if (!element || !element.type) {\r\n\t\telement = jsx(\u0027text\u0027, { content: \u0027\u0027 });\r\n\t}\r\n\r\n\tlet fiber = null;\r\n\tlet key = pKey \u002B (element.key || \u0027\u0027);\r\n\tif (!element.key) {\r\n\t\tkey = key \u002B (element.type.name || element.type) \u002B \u0027_\u0027 \u002B length;\r\n\t}\r\n\r\n\tfiber = gen(element, key);\r\n\tlinkReturn(returnFiber, fiber);\r\n\r\n\tif (fiber.reuse \u0026\u0026 shallowEqual(element.props, fiber.props)) {\r\n\t\twalkInnerFiber(fiber, (f) =\u003E FiberMap.delete(f.key, f));\r\n\t\treturn fiber;\r\n\t}\r\n\r\n\tdelete fiber.reuse;\r\n\tcleanChildFiber(fiber);\r\n\r\n\tif (isTextOrCommentElement(element)) {\r\n\t\tfiber.props = element.props;\r\n\t\treturn fiber;\r\n\t}\r\n\r\n\tif (isHTMLTag(element.type)) {\r\n\t\tfiber.props = element.props;\r\n\t\tfiber.children = toChildren(element.props.children);\r\n\t\treturn fiber;\r\n\t}\r\n\r\n\tfiber.props = element.props;\r\n\tconst innerRootElement = fiber.next(element.props).value;\r\n\tfiber.children = toChildren(innerRootElement);\r\n\treturn fiber;\r\n}\r\n\r\nfunction mountFinishedWork(fiber) {\r\n\tif (isHostElementFn(fiber.type)) {\r\n\t\tconst temp = fiber.next(fiber.props).value;\r\n\t\tif (temp.nodeType !== 3 \u0026\u0026 temp.nodeType !== 8) {\r\n\t\t\ttemp.appendChild(fiber.stateNode);\r\n\t\t}\r\n\t\tfiber.stateNode = temp;\r\n\t}\r\n\r\n\tif (fiber.type === Fragment \u0026\u0026 fiber.props.target) {\r\n\t\tfiber.props.target.appendChild(fiber.stateNode);\r\n\t}\r\n\r\n\tif (fiber.return) {\r\n\t\tfiber.return.stateNode.appendChild(fiber.stateNode);\r\n\t}\r\n}\r\n\r\nfunction updateFinishedWork(fiber) {\r\n\tif (isHostElementFn(fiber.type)) {\r\n\t\tfiber.stateNode = fiber.next(fiber.props).value;\r\n\t}\r\n\r\n\tif (!fiber.first) {\r\n\t\treturn;\r\n\t}\r\n\r\n\tlet childFiber = fiber.first;\r\n\twhile (childFiber) {\r\n\t\tif (fiber.StatusLane === UpdatedLane) {\r\n\t\t\tif (childFiber.StatusLane === MountedLane) {\r\n\t\t\t\tinsertNode(fiber, childFiber);\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\tif (fiber.type === Fragment \u0026\u0026 fiber.props.target) {\r\n\t\t\t\tfiber.props.target.appendChild(fiber.stateNode);\r\n\t\t\t} else {\r\n\t\t\t\tfiber.stateNode.appendChild(childFiber.stateNode);\r\n\t\t\t}\r\n\t\t}\r\n\t\tchildFiber = childFiber.sibling;\r\n\t}\r\n}\r\n\r\nfunction* postOrder(element, returnFiber) {\r\n\tconst fiber = beginWork(element, returnFiber);\r\n\r\n\tif (!fiber || !fiber.children || !fiber.children.length || fiber.reuse) {\r\n\t\tdelete fiber.reuse;\r\n\t\tyield fiber;\r\n\t} else {\r\n\t\tfor (const child of fiber.children) {\r\n\t\t\tyield* postOrder(child, fiber);\r\n\t\t}\r\n\t\tyield fiber;\r\n\t}\r\n}\r\n\r\nconst innerRender = (element) =\u003E {\r\n\tlet result = null;\r\n\tconst isUpdate = FiberMap.size \u003E 0;\r\n\tfor (const fiber of postOrder(element)) {\r\n\t\t// console.log(\u0027FinishedWork\u0027, fiber.key, fiber);\r\n\r\n\t\tif (isUpdate) {\r\n\t\t\tupdateFinishedWork(fiber);\r\n\t\t} else {\r\n\t\t\tmountFinishedWork(fiber);\r\n\t\t}\r\n\r\n\t\tqueueMacrotask(fiber.flushEffects);\r\n\r\n\t\tresult = fiber;\r\n\t}\r\n\r\n\tif (isUpdate \u0026\u0026 result.return) {\r\n\t\tqueueMacrotask(result.return.flushEffects);\r\n\t}\r\n\r\n\tfor (const [_fiberKey, dFiber] of FiberMap.entries()) {\r\n\t\t// console.log(\u0027_fiberKey\u0027, _fiberKey);\r\n\t\tqueueMacrotask(() =\u003E {\r\n\t\t\tdFiber.flushCleanEffects(true);\r\n\t\t});\r\n\t}\r\n\r\n\tFiberMap.clear();\r\n\treturn result;\r\n};\r\n\r\nconst walkInnerFiber = (fiber, fun) =\u003E {\r\n\tlet cursor = fiber;\r\n\tif (!cursor.first) {\r\n\t\treturn;\r\n\t}\r\n\r\n\twhile (cursor) {\r\n\t\twhile (cursor.first) {\r\n\t\t\tcursor = cursor.first;\r\n\t\t}\r\n\r\n\t\twhile (!cursor.sibling) {\r\n\t\t\tfun(cursor);\r\n\t\t\tcursor = cursor.return;\r\n\t\t\tif (!cursor || cursor === fiber) {\r\n\t\t\t\tcursor === fiber \u0026\u0026 fun(cursor);\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tfun(cursor);\r\n\t\tif (!cursor || cursor === fiber) {\r\n\t\t\tcursor === fiber \u0026\u0026 fun(cursor);\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tcursor = cursor.sibling;\r\n\t}\r\n};\r\n\r\nconst cleanReuse = (fiber) =\u003E {\r\n\twhile (fiber) {\r\n\t\tdelete fiber.reuse;\r\n\t\tfiber = fiber.return;\r\n\t}\r\n};\r\n\r\nconst getAncestorFuncFiber = () =\u003E {\r\n\tconst parentMap = new Map();\r\n\r\n\tfor (const fiber of renderList) {\r\n\t\tlet parent = fiber;\r\n\r\n\t\twhile (parent) {\r\n\t\t\tconst count = (parentMap.get(parent) || 0) \u002B 1;\r\n\t\t\tparent.reuse = false;\r\n\t\t\tparentMap.set(parent, count);\r\n\r\n\t\t\tif (count === renderList.size \u0026\u0026 !isHostElementFn(parent.type)) {\r\n\t\t\t\trenderList.clear();\r\n\t\t\t\tcleanReuse(parent.return);\r\n\t\t\t\treturn parent;\r\n\t\t\t}\r\n\r\n\t\t\tparent = parent.return;\r\n\t\t}\r\n\t}\r\n};\r\n\r\nfunction forceRender() {\r\n\t// console.clear();\r\n\tconst cursorFix = genCursorFix();\r\n\tconst ancestorFiber = getAncestorFuncFiber();\r\n\r\n\tFiberMap.clear();\r\n\twalkInnerFiber(ancestorFiber, (f) =\u003E {\r\n\t\tFiberMap.set(f.key, f);\r\n\t});\r\n\r\n\tconst keys = [...FiberMap.keys()];\r\n\t// console.log(\u0027FiberMap:\u0027, keys, keys.length);\r\n\r\n\t// \u8BB0\u5F55\u65E7\u4F4D\u7F6E\uFF0C \u66F4\u65B0\u5B8C\u6210\u540E\u8FD8\u539F\r\n\tconst { index, previous, sibling, return: return1 } = ancestorFiber;\r\n\r\n\tconst fiber = innerRender(\r\n\t\tjsx(ancestorFiber.type, ancestorFiber.props, ancestorFiber.key)\r\n\t);\r\n\r\n\tfiber.index = index;\r\n\tfiber.previous = previous;\r\n\tfiber.sibling = sibling;\r\n\tfiber.return = return1;\r\n\r\n\tcursorFix();\r\n}\r\n\r\nconst createRoot = (container) =\u003E {\r\n\tconst key = container.id || (Date.now() \u002B Math.random()).toString(36);\r\n\r\n\treturn {\r\n\t\trender(element) {\r\n\t\t\t// console.clear();\r\n\t\t\telement.key = element.key || key;\r\n\r\n\t\t\tFiberMap.clear();\r\n\t\t\tconst fiber = innerRender(element);\r\n\t\t\tcontainer.appendChild(fiber.stateNode);\r\n\t\t}\r\n\t};\r\n};\r\n\r\nwindow.WhyReact = { Fragment, createRoot, jsx };\r\n&quot;,&quot;TestCases&quot;:[{&quot;Name&quot;:&quot;aaa&quot;,&quot;Code&quot;:&quot;const Hello = ({toWhat}) =\u003E React.createElement(\u0027div\u0027, null, \u0060Hello ${toWhat}\u0060);\r\n\r\nReactDOM.render(\r\n  React.createElement(Hello, {toWhat: \u0027World\u0027}, null),\r\n  document.getElementById(\u0027dest\u0027)\r\n);&quot;,&quot;IsDeferred&quot;:false},{&quot;Name&quot;:&quot;bbb&quot;,&quot;Code&quot;:&quot;const Hello = ({toWhat}) =\u003E React.createElement(\u0027div\u0027, null, \u0060Hello ${toWhat}\u0060);\r\n\r\nReactDOM.render(\r\n  React.createElement(Hello, {toWhat: \u0027Worldd\u0027}, null),\r\n  document.getElementById(\u0027dest\u0027)\r\n);&quot;,&quot;IsDeferred&quot;:false},{&quot;Name&quot;:&quot;ccc&quot;,&quot;Code&quot;:&quot;const Hello = ({toWhat}) =\u003E WhyReact.jsx(\u0027div\u0027,{children: \u0060Hello ${toWhat}\u0060});\r\n\r\nWhyReact.createRoot(document.getElementById(\u0027dest\u0027)).render(\r\n  WhyReact.jsx(Hello, {toWhat: \u0027Worldd\u0027})\r\n);&quot;,&quot;IsDeferred&quot;:false}]}
</textarea>

<form style="display:none;" id="autoreload_form" action="/Benchmarks/TestFrameForValidationWithHtmlPrepCode?autostart=1" method="post">
    <input type="hidden" name="htmlPrepCode" id="htmlPrepCode">
</form>