contain layout 和 contain paint 怎么缩小重排和重绘的范围？
contain: layout 限制内部布局对外部的影响，contain: paint 约束绘制范围；它们能缩小浏览器需要处理的区域，却也可能改变定位参照与溢出可见性。contain: size 与 content-visibility 的关系不同，页面若依赖内容自动撑高不能直接套用。
核心关键词contain layout paint 渲染性能
面试知识索引 · 分类、标签与搜索
CSS · 性能优化面试题，7 道完整答案
CSS · 性能优化面试题第 1 页，显示第 1–7 题，共找到 7 道完整解析，可继续按分类、标签与关键词缩小范围。
7筛选结果
52技术分类
178检索标签
1索引分页
快速定位
清除全部筛选分类、标签与关键词搜索
第 1 页
本页面试问题
按稳定语义路径排序
- 0001
- 0002
has() 为什么被叫做"父选择器"？
:has() 能按后代或相邻元素的状态选择当前元素，例如表单里有无无效输入、卡片里是否存在图片。它的优先级取决于参数选择器，复杂匹配也可能增加样式计算成本；用它选择父级时还要考虑支持范围和备选样式。
核心关键词CSS :has() relational pseudo-class - 0003
什么情况下元素会被提升为独立合成层？will-change 怎么用才对？
3D 变换、will-change、固定定位等都会触发合成层提升。讲解合成层的原理、will-change 的正确用法和常见的滥用问题，以及怎么在 DevTools 里检查层数。
核心关键词CSS will-change 合成层 创建条件 - 0004
CSS 动画里频繁改自定义属性，为什么会卡？
CSS 自定义属性在动画中频繁修改会触发样式重算和布局回流，导致掉帧。了解浏览器对自定义属性和原生属性的处理差异，掌握用 @property 注册后走合成层的优化方案。
核心关键词CSS 动画中修改自定义属性 性能问题 - 0005
用 transition 做 grayscale() 的去色动画，性能上要注意什么？
给图片加 filter: grayscale() 后用 transition 平滑去色的写法很简单，但 filter 过渡每帧都要重新计算像素，图片大或数量多时容易掉帧。了解 will-change 提升合成层和限制作用域的优化手段。
核心关键词CSS filter grayscale 过渡动画 性能 - 0006
transition-property 写 all 和只列具体属性，性能上有区别吗？
对比 transition-property 取 all 与显式列出属性的实际差异：浏览器只为变化属性创建过渡，帧开销接近；真正区别在意外过渡触发、时长不可拆分和维护风险。
核心关键词CSS transition-property all 性能差异 - 0007
媒体查询多了会让页面卡顿吗？
媒体查询本身通常不是性能瓶颈。浏览器会在视口或相关设备条件变化时重新判断匹配，并对受影响的样式重新计算。真正昂贵的往往是命中后触发的大量布局变化、复杂选择器、重型图片或脚本测量与写入交错。
核心关键词CSS 媒体查询 性能影响 重排