CSS · 性能优化面试题第 1 页，显示第 1–7 题，共找到 7 道完整解析，可继续按分类、标签与关键词缩小范围。
按稳定语义路径排序
围绕“CSS 的 contain: layout 或 contain: paint 如何帮助解决由全屏不必要的重排或绘制引”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释 containment 隔离盒内容与外部布局，减少重排范围，并说明应用场景（如长列表项），不深入小册子。
围绕“:has() 伪类为什么被称为“父选择器”？它的引入对 CSS 选择器有哪些影响”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要解释能选择包含某子元素的元素，以及性能注意。
围绕“在哪些情况下会创建独立的合成层？如何利用 will-change 提升动画性能”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖列出常见触发条件，并说明过度使用 will-change 反而带来内存开销。
围绕“在 CSS 动画中频繁修改 CSS 自定义属性（属性）会导致性能问题吗？为什么推荐避免”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖指出修改自定义属性可能引发大量样式计算。
围绕“给图片应用 filter: grayscale() 后如何用 transition 实现平滑去色？会有什么性能瓶颈”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖回答需要围绕强调过渡 filter 会持续重新计算像素，建议配合开关，不深入 GPU 加速原理。
对比 transition-property 取 all 与显式列出属性的真实性能差异：浏览器按变更属性创建过渡，开销接近，差异在意外的过渡触发、时长不可拆分与维护风险。
围绕“媒体查询会增加页面性能开销吗？如何避免因媒体查询导致的重排或无效样式”给出直接结论、机制拆解、可复现验证、常见误区与追问，重点覆盖需要讨论渲染原理与优化建议，不压缩图片等独立话题。
