HTML、CSS与可访问性 · KNOWLEDGE CHAPTER

K06

渲染与动效

渲染优化的核心是少做无用工作，同时保持内容和交互正确。一次界面变化可能涉及样式、布局、绘制和合成；不同属性改变不同依赖。contain 声明边界，content-visibility 暂时跳过离屏工作，动画策略控制每帧变化。它们都需要条件与成本验证，不能当作通用加速按钮。

HTML、CSS与可访问性2 道章节练习4 道主练关联

先修知识：K02 · 层叠、选择器与定位 K03 · 盒模型与布局 K05 · 可访问性与用户适配

核心模型

原理与机制

从被触发的阶段解释动画成本

width、top 等变化可能使几何重新计算并引发绘制，transform 与 opacity 在合适条件下可主要由合成处理，因此常用于位移和淡入淡出。但大面积纹理、模糊效果、层数量、上传成本和其他主线程工作都可能造成长帧，“用了 transform 就走 GPU 且不卡”不成立。transform 改视觉位置而不重新分配正常流空间，展开区域要推开后续内容时不能只用 scaleY，否则会留下布局空隙或缩放文字。

优化提示应限定范围和生命周期

will-change 告诉浏览器某类变化可能即将发生，便于预先准备，不是强制启用加速的开关。长期全站设置可能增加内存，还会提前产生某些层叠上下文副作用。先测出问题，对少量即将变化元素提前设置，结束后清理。真实尺寸变化难以避免时，缩小变化子树、批量读取再批量写入，避免每帧读写几何交错；可评估先布局再变换的 FLIP 思路，但测量、打断与最终位置仍要正确。

contain 是承诺，也是限制

layout containment 限定布局依赖并建立相应格式化、定位边界；paint 限制后代越界绘制，可能裁掉阴影和菜单；size 在计算自身尺寸时不依赖内部内容，若没有外部尺寸或占位，自然高度可能塌陷。strict 包含 size、layout、style、paint，content 不含 size，但仍有绘制等副作用。style containment 主要约束计数器、引号等作用范围，并不阻止普通选择器命中或颜色继承。应根据实际瓶颈只选需要的约束。

跳过离屏渲染仍需稳定几何

content-visibility:auto 允许浏览器跳过与当前用户视图无关内容的部分渲染工作，DOM 和 JavaScript 数据仍在。contain-intrinsic-size 提供被跳过时的占位，auto 形式可在已布局后复用记住的尺寸；从未渲染的内容仍只能估计。占位与真实高度差异大，会改变滚动范围并造成跳动。长页面宜按独立区段应用，不要每帧读取所有被跳过子树的精确几何，反而逼出计算。无限数据还需分页或虚拟化控制 DOM 与内存。

减少动态效果不能破坏功能

prefers-reduced-motion:reduce 时优先移除大范围移动、视差、缩放和持续旋转，保留静态加载文字等必要信息。全局把时长设零可能让 animationend/transitionend 不再按预期触发，功能完成必须由状态驱动，动画只是增强。CSS 会随偏好重匹配，JavaScript 可通过 matchMedia 读取初值并监听 change，销毁时退订。运行中切换偏好时，取消或到达稳定终态仍要做必要清理；重新允许动画通常不必自动重播。

最小示例

css

.article-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
.panel { transition: transform 180ms ease; }
.panel[data-state="closed"] { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) {
  .panel { transition: none; }
}

用包含多个长区段的测试页，观察首次接近某段时真实高度替换 600px 估计，第二次跳过可利用记住的尺寸。估计错误仍可跳动。panel 只示意视觉变化，关闭状态必须另行处理 inert、焦点和布局；开启减少动态效果后，业务应无需等待过渡结束仍能完成关闭。

环境：支持本章相关特性的现代浏览器；CSS 片段需配合说明中的最小 HTML。

核验：未执行教学示例；说明中的结果为机制推演，不是本轮测试通过记录。

边界与取舍

边界

content-visibility:auto 不删除 DOM，不是隐藏秘密或禁用交互的办法，内容仍应可搜索、可访问。
contain:strict 不保证自然高度；把它换成 content 也仍需检查 paint 裁剪。
合成层不等于 BFC 或层叠上下文；性能优化必须用录制验证，不能仅数层数。

取舍

合成友好动画常减少每帧布局工作，但视觉变换不能替代真实布局变化，需要兼顾最终几何。
预估占位降低离屏成本，过粗估计却损害滚动稳定；更精确的预先测量又可能抵消优化。

口述示范

我会先用性能录制找布局、绘制还是合成瓶颈，再选择局部动画或隔离。说明 contain 各值牺牲了哪些依赖，给跳过内容合理占位，并确保减少动态效果、取消动画与快速重开都不会破坏状态和焦点。

章节练习

练习 1

假设 CSSLab 的展开动画必须推开正文，为什么 scaleY 不够，怎样测替代方案？

展开检查点

区分正常流几何与视觉变换；真实高度变化或一次布局后的 FLIP 需保持终态正确。
检查长帧、布局次数和内存；will-change 按需使用并清理。

一篇长文章加 strict 后塌陷，换成 auto 渲染优化后滚动又跳，怎样解释？