结论：大量输入字段的表单卡顿，90% 不是「DOM 节点太多」本身，而是每次按键都触发全量重渲染、强制同步布局和实时校验这三件事叠加的结果。把输入状态从全局挪到局部、把校验延后到 300ms 防抖或 onBlur、给每个表单项加 content-visibility: auto，通常能把单次输入的响应从几百毫秒压到 16ms 以内。
为什么输入框一多，打字就开始卡？
结论：卡顿来自「一次按键 → 触发 N 个组件工作」的放大效应，而不是按键本身。
一个 300 字段的 React 受控表单，每个 input 的 value 都存在父组件 state 里，敲一个字符就 setState 一次，父组件连同 300 个子组件全部 re-render。假设单个子组件渲染耗时 0.5ms，一次按键就是 150ms，打字肉眼可见地掉帧。
定位方法很直接：Chrome DevTools → Performance 面板 → 录制 3 秒输入过程 → 看火焰图里 Recalculate Style、Layout、Function Call 的占比。如果 Recalculate Style 和 Layout 排在前面，问题在 DOM 和 CSS；如果 Function Call 占大头，问题在组件重渲染。
受控组件和非受控组件，性能差多少？
结论：字段超过 50 个时，优先用非受控（defaultValue + ref / FormData），受控只留给需要联动的那几个字段。
React 里 react-hook-form 的 register 走的就是非受控路线，输入时组件不 re-render，只在提交或校验时取值；Formik 默认受控，字段一多就必须配 fastField 或 shouldComponentUpdate。Vue 3 里 v-model 是受控思路，字段上千时改成 :value + @change 手动取值，或者用 v-model.lazy，它在 change 事件（失焦/回车）才同步，而不是每次 input。
实测差距：300 个字段下，受控方案单次输入约 120-200ms，非受控约 1-3ms，差两个数量级。
校验和布局抖动怎么处理？
结论：输入过程中只做「不做任何事」，校验统一防抖 300ms 或放到 onBlur。
实时校验最容易翻车的是正则校验和异步唯一性检查。手机号、邮箱这类正则，每个字符跑一遍，300 个字段全跑一次就是几万次匹配。做法是：
- 输入事件里只更新值，不跑校验；
- 用 300ms 防抖触发校验，或干脆 onBlur 时校验；
- 异步校验（如用户名是否重复）加请求取消（AbortController），避免旧请求覆盖新结果。
另一个隐形杀手是强制同步布局（forced synchronous layout）：在 input 事件回调里读 offsetHeight、getBoundingClientRect()、scrollTop，会让浏览器立刻回滚重排。规矩是读写分离——先把读取的值全部读完，再统一写 DOM。
字段上千个，虚拟滚动能救吗？
结论：能用分步表单就别用虚拟滚动，虚拟滚动会卸载 DOM，导致输入框失焦、光标丢失、值被清空。
表单和长列表不一样：用户会在字段间 Tab 跳转、粘贴到不可见字段、提交时一次性取全部值。react-window 这类方案卸载掉的 input，state 必须搬到外部 store，改动成本高。
更稳的三条路：
- 分步表单：每步 10-20 个字段，几千字段拆成 5-10 步，单屏渲染量压到 100 个以内；
- 折叠分组：只展开当前分组，未展开分组的字段不渲染；
content-visibility: auto：给每个表单项加这条 CSS（Chrome 85+、Safari 18+ 支持），屏幕外的内容跳过渲染，配合 contain-intrinsic-size: 0 60px 占位避免滚动条跳动。
事件监听和表单提交有什么要注意的？
结论：不要给每个 input 单独绑监听，用事件委托在 <form> 上绑一个。
300 个 input 绑 300 个 listener，内存和事件派发都有开销。在 form 元素上绑一个 input 事件，用 e.target.name 判断是哪个字段即可。提交时用 new FormData(formElement) 一次性收集所有值，比逐个 ref 取值更省事，也天然支持文件上传。
性能目标参考 Core Web Vitals 的 INP（Interaction to Next Paint，交互到下次绘制）标准：良好 < 200ms，需改进 200-500ms，差 > 500ms。表单输入的体感目标是单次按键响应 < 50ms。
总结一下：先用 DevTools 定位是重渲染还是重排；字段超 50 个换非受控；校验防抖到 300ms 或 onBlur；读写 DOM 分离避免强制同步布局；上千字段优先分步或折叠，慎用虚拟滚动；事件用委托，提交用 FormData。这套组合下来，千字段表单也能做到打字跟手。
