默认 box-sizing 为 content-box 易触发重排，建议设为 border-box；margin-collapse 动态修改会强制 layout；outline 不建新图层而 box-shadow 会；display: none 完全跳过渲染，visibility: hidden 仍执行 layout。
box-sizing 默认值导致重排和布局计算开销
浏览器默认使用 content-box，这意味着所有设置的 width 和 height 仅作用于内容区域，而 padding 和 border 会额外撑大元素。当父容器宽度固定、子元素频繁增减 padding 或 border（比如 hover 状态切换），就可能触发 layout（重排）——尤其在滚动或动画中，这种重排会变成性能瓶颈。
建议统一设为 border-box，让尺寸更可预测，也减少因盒模型变化引发的重排：
* {
box-sizing: border-box;
}
/* 或只对关键组件 */
.card, .input, .btn {
box-sizing: border-box;
}注意：全局重置虽方便，但会影响第三方 UI 库（如某些旧版 Bootstrap 组件）的样式表现，上线前需验证。
margin-collapse 在列表/流式布局中隐式触发 layout
相邻块级元素的垂直 margin 会发生合并，这个行为本身不慢，但一旦你用 JavaScript 动态修改某个元素的 margin-top 或 margin-bottom，浏览器必须重新计算整条流中的所有 margin 合并关系——这会强制触发 layout，且无法被 CSS will-change 优化。
立即学习“前端免费学习笔记（深入）”；
规避方式很直接：
- 用
padding替代margin控制内部间距（padding 不合并） - 对需要精确控制外边距的容器加
overflow: hidden或display: flow-root，切断 margin-collapse 上下文 - 避免在动画帧中读写
offsetHeight、getBoundingClientRect()等触发布局的 API，否则会强制同步计算
outline 与 box-shadow 对合成层的影响差异
outline 永远不会触发新图层（layer），它只是绘制在当前层上；而 box-shadow（尤其是带模糊半径的）在多数情况下会让浏览器为其创建独立的合成层（compositing layer），带来内存占用和光栅化开销。
如果你只是做焦点提示，优先用 outline：
button:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}若必须用阴影（比如卡片浮起效果），注意以下几点：
- 避免对高频更新元素（如滚动容器内 item）使用
box-shadow - 用
will-change: transform替代will-change: box-shadow—— 后者无效，浏览器不支持该属性值 - 模糊值
blur-radius越大，光栅化耗时越长；可考虑用多层text-shadow或伪元素模拟轻量阴影
display: none 与 visibility: hidden 的渲染路径差异
display: none 会让元素完全退出文档流，浏览器跳过其 layout、paint、composite 全流程；而 visibility: hidden 仍保留几何信息（layout 阶段照常执行），只是 paint 阶段跳过绘制。
这意味着：
- 对隐藏后可能频繁切换显示的模块（如弹窗、折叠面板），用
visibility: hidden+opacity: 0配合 transition，能避免反复 layout - 对长期不显示、且 DOM 结构较重的区域（如 tab 页签内容），用
display: none更省资源 - 不要用
opacity: 0单独隐藏——它仍参与 layout 和 paint，只是透明，GPU 仍要处理像素
实际项目里，盒模型相关的性能损耗往往藏在“看起来没动”的地方：比如一个 padding 的微小变更，可能让整行 flex 容器重算主轴尺寸；又比如一个被忽略的 margin-bottom，正悄悄拖慢滚动帧率。优化不是堆技巧，而是清楚每个 CSS 属性落在哪一帧、走哪条渲染路径。
