dom深度超4层会引发强制同步布局、getboundingclientrect耗时翻倍及低端安卓机首屏延迟30ms+；fieldset嵌套超3层加剧渲染延迟，须避免嵌套、确保legend非空、单个内input≤12个；表格内多步骤表单应使用form属性绑定而非嵌套form标签；vue/react需防框架注入wrapper致深度失控，建议用fragment、加深度守卫、删冗余节点。
多步骤表单一旦嵌套超过 4 层，就不是“结构清晰”的问题，而是直接触发强制同步布局、getBoundingClientRect() 耗时翻倍、低端安卓机首屏延迟 30ms+ 的硬伤——这和 JS 逻辑无关，是浏览器解析 DOM 树时的深度优先遍历成本本身在飙升。
DOM 深度超 4 层时，fieldset 会拖慢渲染
很多人用 fieldset 分组多步骤表单，以为语义好、可访问性强。但 Chrome 对嵌套超过 3 层的 fieldset 有明确渲染延迟，尤其当内部还套 div 或 section 时，legend 的定位、边框重绘都会卡顿。
- 只在业务边界明确处用
fieldset，比如「登录凭证」「二次验证」「支付方式」，别按「手机号/验证码/勾选协议」这种粒度拆 -
legend必须存在且非空，<legend></legend>会让读屏器跳过整个分组 - 禁止
fieldset套fieldset：浏览器不会报错，但 DOM 深度会叠加，node.depth瞬间冲到 7+ - 单个
fieldset内部 input 超过 12 个，建议用DocumentFragment批量插入，避免反复触发 layout
form 属性是表格内多步骤表单的唯一合法解法
把 form 标签塞进 tr 或 td 里？浏览器会把它踢出表格结构，JS 查不到节点，CSS 选不到目标，提交数据全丢。正确做法是让表单脱离表格 DOM 层级，靠 form 属性绑定。
- 每个步骤对应一个独立的
<form id="step-1"></form>，放在下一级（避免被 wrapper 包裹） - 表格单元格里的
<input>、<select></select>全部加上form="step-1"，值必须严格匹配 form 的id - 禁用
<form></form>的默认提交行为，用event.preventDefault()+FormData手动收集，否则跨步骤提交会刷新页面 - 注意：IE 不支持
form属性，如需兼容，改用 JS 动态挂载事件监听器到input上，而非依赖 HTML 关联
Vue/React 组件输出导致 DOM 深度失控的识别与拦截
源码看着只有 2 层，构建后却变成 6 层——这是组件框架注入根节点的典型副作用。Vue 的 <template></template>、React 的 JSX 返回数组或 Fragment 缺失，都会额外加一层包裹。
- 打开 Chrome DevTools → Elements → Ctrl+F 搜
<div class="v-wrapper"> 或 <code>data-v-，定位框架自动生成的 wrapper - Vue 中启用
fragment（3.3+）或显式写<template></template>；React 中确保返回的是>或React.Fragment，而非div - 在组件顶层加守卫：
if (props.depth > 4) return null，防止递归渲染突破层级红线 - 用
document.querySelectorAll('form *').length粗略统计当前表单总节点数，超 200 就该拆分或懒加载子步骤
真正难的不是写对嵌套，而是判断哪一层“不可删”：语义必需的 ul→li→label→input 四层可以留，但中间插一个 <div class="input-wrapper"> 就是纯冗余。每次加标签前，先问一句——这个节点有没有被 CSS、JS 或辅助技术实际消费？没有，就删。</div>
