fr本身不卡，卡的是其触发的同步重排；浏览器计算1fr需同步测量min-content、扣减gap/固定尺寸、再均分剩余空间，无法异步，易因js读写布局引发layout thrashing。
fr单位本身不卡，卡的是它触发的重排时机
fr不是性能瓶颈，而是“重排放大器”。浏览器在计算1fr值时必须同步完成三件事：测量所有子项的min-content宽度、扣除gap和固定尺寸轨道、再按比例切分剩余空间。这个过程无法异步，一旦JS频繁读写布局（比如在scroll里调getBoundingClientRect()），就会立刻引发Layout Thrashing。
对比px或%：固定单位可直接参与样式计算，无需回流；而fr每次都要走完整布局流水线。尤其当父容器是display: inline-grid或未设width时，fr会退化为min-content，导致子项反复撑开列宽，形成抖动循环。
- 常见错误现象：
grid-template-columns: 1fr 1fr在滚动时列宽忽大忽小，DevTools 的 Layout 面板显示高频触发Grid track sizing - 真正诱因往往不是
fr本身，而是旁边有个white-space: nowrap的长文本，把第一列min-content拉到300px，导致第二列能分到的“剩余空间”剧烈波动 - 混用
minmax(200px, 1fr)+ 动态增删子项时，每新增一个元素，浏览器都得重新跑一遍轨道尺寸分配，而不是复用旧结果
为什么Safari 15.4之前minmax(30%, 1fr)会抖动
这不是bug，是渲染引擎对混合单位的处理分歧。Safari旧版在解析minmax(30%, 1fr)时，会先按容器总宽算出30%像素值，再把“剩余空间”交给1fr——但滚动中容器宽度可能因滚动条出现/消失而微变，导致30%值跳变，进而让1fr分到的空间来回震荡。
Chrome 和 Firefox 更激进：它们把百分比当作硬约束，1fr只分“扣完30%后剩下的”，所以更稳定。但这也意味着你永远得不到“30% + 剩余均分”的直觉效果。
- 安全写法：
minmax(200px, 1fr)+ 媒体查询兜底，避开百分比参与轨道计算 - 绝对不要在
grid-template-rows里写minmax(30%, 1fr)：滚动时行高会被反复重算，paint层频繁重绘 - 如果真要响应式比例，用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，由CSS引擎原生处理，不走JS路径
grid-template-columns用JS频繁更新是最大陷阱
直接改element.style.gridTemplateColumns = '1fr 2fr 1fr'看起来干净，实则每次都会强制浏览器丢弃整个网格缓存，从头解析字符串、重分配所有子项位置。尤其当子项含图片或Web Font时，还会叠加图像解码和文本布局延迟。
更隐蔽的问题是：JS修改后若紧接着读offsetWidth或getComputedStyle，浏览器必须立刻同步回流，无法合并帧内操作。
- ✅ 正确做法：用CSS变量 +
calc()，例如grid-template-columns: calc(var(--a) * 1fr) calc(var(--b) * 1fr) 1fr，JS只改--a和--b - ✅ 批量变更用
requestAnimationFrame节流，把多次列宽调整合并到单次布局 - ❌ 避免在
resizeObserver回调里直接拼接字符串赋值，哪怕只是1fr → 1.2fr，也是全量重布局
嵌套Grid中fr开销翻倍的原因
外层grid-template-columns: 1fr 2fr已让浏览器做一次剩余空间分配；若其中某个子项又是display: grid且用了1fr，浏览器必须再为它单独计算“继承来的高度是否足够支撑fr分配”——这需要向上追溯父容器的height、max-height、甚至overflow属性，链路越深，开销越大。
典型症状：滚动时Layers面板里突然多出十几个合成层，每个嵌套Grid都占一层，GPU内存飙升。
- 关键限制：子Grid必须显式设
height: 100%才能让1fr生效；否则grid-template-rows: 1fr会塌缩成内容高度，后续再撑高又触发二次重排 - 优化方向：用
display: contents移除无实际内容的包裹节点，减少参与嵌套计算的DOM层级 - 复杂布局优先考虑
flex替代深层嵌套Grid，fr的语义优势在两层以内最清晰，超过三层就该怀疑结构设计
真正难调的从来不是fr怎么写，而是它在哪一刻被迫去算——那个“必须立刻知道剩余空间是多少”的同步点，才是抖动根源。盯着Layout面板里的Grid track sizing耗时，比盯着fr语法本身有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
