CSS性能优化专题测试
考察知识点
- CSS渲染流程与性能影响（重排、重绘、合成）
- 选择器性能优化策略
- CSS加载与解析优化
- 动画性能优化（transform、opacity等）
- CSS架构与性能关系
- 关键CSS与异步加载
CSS性能优化主要关注减少网络传输时间，而JavaScript优化才需要考虑渲染性能。
只有3D变换才能触发GPU硬件加速，2D变换不能。
选择器越复杂，样式计算时间越长，但只要不触发重排就不会影响渲染性能。
will-change属性的主要作用是什么？
使用animation: slide 1s; @keyframes slide { from {left:0} to {left:100px} }与使用transform: translateX实现相同位移效果，性能差异的主要原因是？
以下哪个选择器性能最差？
CSS Sprites（雪碧图）的主要作用是什么？
关键CSS（Critical CSS）是指什么？
重排（Reflow）与重绘（Repaint）的主要区别是什么？
修改以下哪个CSS属性会触发重排？
CSS性能优化的主要目标是什么？
实现高性能CSS动画，应优先使用哪些属性？
CSS选择器的匹配方向是从左到右还是从右到左？
浏览器渲染页面时，哪个阶段最容易成为CSS性能瓶颈？
以下哪些是will-change属性的有效值？
以下哪些是CSS性能优化的有效策略？
以下哪些是CSS选择器优化的有效做法？
CSS动画的性能关键在于减少____________和____________，使用____________让动画在GPU处理，避免阻塞主线程。
减少重排的策略包括：使用____________替代left/top做位移动画，批量修改样式时先让元素____________，使用____________避免读写交替触发强制同步布局。
关键CSS优化流程：提取____________渲染所需的CSS规则，将其____________到HTML头部，非关键CSS使用____________加载方式，避免阻塞渲染。
