Q1选择题难度 2
1/12
CSS · 中级 05
记忆强度
(多选)某页面滚动卡顿,性能记录显示大量动画更新。以下哪些改造通常有助于减少布局与绘制压力?
当前动画分别直接修改 left、width、box-shadow 和 transform。请选择适合优先评估的措施。
CSS中级题库第 5 组,共 12 张卡片。
CSS · 中级 05
当前动画分别直接修改 left、width、box-shadow 和 transform。请选择适合优先评估的措施。
动画性能优化的核心是减少每帧触发布局和大面积绘制的工作,并控制合成层数量。
BFC 即块级格式化上下文,是块级盒参与布局的一种独立格式化环境。
容器查询让组件依据其布局容器的可用尺寸响应,而不是把组件行为绑定到全局视口。
prefers-reduced-motion 用于响应用户在操作系统或用户代理层表达的减少非必要动态效果偏好。
CSS 选择器用于匹配文档中的元素,常见类型包括元素选择器、类选择器、属性选择器、ID 选择器、伪类、伪元素、组合器和通配符。
z-index 控制的是元素在所属层叠上下文中的层叠级别,而不是整个页面上的绝对高度。
repeat(auto-fit, minmax(240px, 1fr)) 会根据容器可容纳的最小列宽自动计算列数,每列不小于 240px,并使用 1fr…
弹性布局实现两栏的关键是:父容器设置 display: flex,左栏声明固定的弹性基础尺寸并禁止伸缩,右栏允许增长以接收主轴上的剩余空间。
preload 可以以较高优先级提前获取资源,但资源必须声明正确的 as 类型,而且仅预加载并不会自动应用 CSS。
浏览器处理复杂选择器时,通常以最右侧的关键选择器筛选候选元素,再沿 DOM 关系向左验证祖先、父子和其他条件。
左侧固定宽度、右侧占据剩余空间,可以使用弹性布局、网格布局、浮动配合外边距、浮动配合 BFC,也可以借助 calc() 计算。
该方案让固定宽度的左栏向左浮动,再让右栏建立新的 BFC。