div套div会增加虚拟DOM树深度，抬高diff算法遍历成本；更关键的是破坏CSS层叠上下文与Flex/Grid直连性，引发margin合并、对齐失效或relative作用范围错位。
为什么 div 套 div 会让 React/Vue 组件渲染变慢？
深层嵌套的包裹节点会增加虚拟 DOM 树深度，导致 diff 算法遍历更多节点；更关键的是，它干扰了 CSS 的层叠上下文和 Flex/Grid 布局的直连性，常引发意料外的 margin 合并、对齐失效或 position: relative 作用范围错位。
常见诱因包括：模板中无条件插入 <div><slot></slot></div>、UI 库组件默认 wrapper（如某些 Button 内部强加 span）、以及为“保险起见”在 JSX 中手动补一层 div。
- 检查组件返回值是否真需要包裹——比如
render()返回单个文本节点时，<div>hello</div>完全可改为<>hello</> - 用浏览器开发者工具的 Layers 面板观察实际渲染层，若发现大量空
div占用独立合成层，说明它们正在拖慢重绘 - Vue 用户注意
v-if和v-for的父级必须是单一根节点，但可用<template>替代div，它不会生成真实 DOM
React 中如何安全移除多余 div 而不破坏样式？
直接删掉外层 div 往往触发样式崩塌，根本原因是 CSS 选择器隐式依赖了该层级，例如 .card > .content 或 .list li + li 在失去父容器后失效。
实操上优先走语义化路径而非视觉路径：用 <section>、<article>、<header> 替代通用 div；若纯为布局，改用 display: contents 让父元素不参与盒模型——它能让子元素直接继承父级的 flex/grid 上下文，且不影响 JS 的 parentNode 引用。
立即学习“前端免费学习笔记（深入）”；
-
display: contents在 Safari 15.4+ 才完全稳定，旧版本需降级为div并加 class 标记（如class="flattened-wrapper"）便于后续批量替换 - 避免对
<table>或<select>等原生表单控件父级使用display: contents，会导致渲染异常 - 用
React.memo包裹扁平化后的组件，防止因节点复用策略变化引发意外重渲染
Vue 模板里 <template> 和 <fragment> 怎么选？
<template> 是 Vue 2 和 Vue 3 的通用语法，用于多根节点场景，但仅在编译期生效，运行时不产生任何 DOM；而 <Fragment>（即 <></>）是 Vue 3.3+ 支持的语法糖，本质等价于 <template>，但写法更轻量。
真正要警惕的是「伪 Fragment」：有人用 <div v-show="false"></div> 或 <span style="display:none"></span> 来占位，这不仅污染 DOM，还会被屏幕阅读器误读。
- Vue 2 项目只能用
<template>；Vue 3 项目推荐统一用<></>，但需确认vue/compiler-sfc版本 ≥ 3.3.0 - 如果组件有
v-model，不能直接用 Fragment 作为根——因为v-model需要绑定到一个真实可响应的元素上，此时必须保留一个包裹节点，并确保它有ref或id - SSR 场景下，
<template>不会被服务端渲染出来，而<></>在部分老版 Nuxt 中可能报错，上线前务必跑一次 SSR 构建验证
怎么批量识别和清理项目里冗余的外层包裹？
人工 grep 效率低且易漏，关键是建立可执行的检测规则：匹配连续两层相同标签（如 <div><div>）、父级为空或只含空白字符、或父级 class 名含 wrapper/container 但子元素已具备完整语义。
推荐用 jscodeshift 编写 codemod 脚本，针对 JSX/TSX 文件做 AST 级替换。例如将 <div className="wrapper"><Card /></div> 直接转为 <Card />，前提是 Card 组件内部已处理好外边距和定位逻辑。
- 先运行
npx jscodeshift -t transform.js src/ --dry --verbose预览变更，确认无误再加-d参数执行 - HTML 文件可用
html-validate配合自定义 rule，检测div[role="none"]或div[class*="wrap"]类似模式 - 清理后必做一件事：打开 DevTools 的 Accessibility 面板，检查焦点流和语义层级是否断裂——扁平化不是目的，可访问性不降级才是底线
