illegalCreed

中文

English

中文

English

Appearance

参考 ​

基于 web.dev 渲染性能系列与 MDN（CSS contain / will-change / requestAnimationFrame）官方文档编写，对照 CSS Containment Module Level 2、CSS Will Change Module Level 1

速查 ​

  • 像素流水线：JavaScript → Style → Layout → Paint → Composite
  • 帧预算：60fps ≈ 16.6ms，开发者实际可用约 10ms
  • 三级属性：Composite-only（transform/opacity）→ Paint（color/background）→ Layout（width/top/margin）
  • reflow 必引发 repaint，repaint 不一定 reflow
  • 合成器属性仅 transform 与 opacity（含独立属性 translate/rotate/scale）
  • contain 速记：strict = size layout paint style、content = layout paint style
  • will-change：最后手段、动态开关、绝不全局常驻
  • requestAnimationFrame：单参 DOMHighResTimeStamp、与刷新率对齐、页面不可见自动暂停
  • 强制布局 API：offsetWidth / clientWidth / scrollTop / getBoundingClientRect / getComputedStyle / scrollIntoView / scrollTo / getClientRects
  • 检测工具：DevTools Performance Layers/Paint profiler、Rendering Paint Flashing、Forced Reflow insight、LoAF forcedStyleAndLayoutDuration
  • 完整说明见 入门 / 核心机制与实践

触发属性分类表 ​

按改该属性会触发哪几个流水线阶段分类。

Layout 触发（最贵，全跑 Layout → Paint → Composite） ​

属性说明
width / min-width / max-width改宽度
height / min-height / max-height改高度
padding / padding-*改内边距
margin / margin-*改外边距
top / right / bottom / left改定位偏移（position: absolute/fixed）
border-width / border-*-width改边框宽度
display改显示类型（如 block ↔ flex）
position改定位方式
float / clear改浮动
overflow / overflow-x / overflow-y改溢出处理（影响滚动条几何）
font-size / font-family / font-weight改字体（影响文本尺寸）
line-height改行高
text-align / vertical-align影响内联布局
white-space / word-break / word-wrap影响文本换行
list-style / list-style-type影响列表项标记几何
table-layout表格布局算法
flex / flex-* / grid / grid-*弹性/网格布局参数
contain: size子元素不再撑开容器

Paint 触发（中等，跑 Paint → Composite，跳过 Layout） ​

属性说明
color文本颜色
background-color背景色
background-image / background-position / background-size背景
background-repeat / background-attachment背景
border-color / border-style边框颜色/样式（不改宽度）
border-radius圆角
outline / outline-color轮廓
box-shadow阴影
text-shadow文本阴影
text-decoration文本装饰
visibility可见性（保留几何，不引发 reflow）
cursor光标（部分场景）

Composite 触发（最廉价，仅 Style → Composite） ​

属性说明
transform在合成器线程处理，跳过 Layout+Paint
opacity在合成器线程处理，跳过 Layout+Paint
translate / rotate / scale（CSS 独立 transform 属性）2023 起 Baseline widely available
filter（部分）滤镜，部分浏览器视其为合成器属性
backdrop-filter部分场景
perspective / perspective-origin3D 变换上下文
clip-path（部分场景）部分浏览器优化

注意：transform 触发 Composite 是「动画友好路径」的核心，但 transform: none ↔ 具体值切换可能涉及层提升/降级。

CSS contain 速记 ​

css
contain: none | strict | content | [ size | inline-size || layout || style || paint ];
取值等价展开用途
none无 containment默认
strictsize layout paint style全部隔离（慎用，含 size 易塌陷）
contentlayout paint style最常用安全值，第三方 widget、卡片、列表项
size仅 size容器尺寸与子元素无关；必须配 contain-intrinsic-size
inline-size仅 inline 方向 sizeContainment Level 2 新增；行内尺寸隔离
layout仅 layout子树布局变化不影响外部
paint仅 paint后代不绘制到容器边界框外（离屏可跳过子树绘制）
style仅 style隔离计数器与引号作用域

关键性质：

  • contain: paint 会创建新的堆叠上下文与新的包含块（可能改变 position: fixed 锚点）
  • contain: layout 会创建新的块格式化上下文
  • contain: strict 含 size → 必须配 contain-intrinsic-size

配套属性 ​

属性说明
content-visibility: auto屏外内容跳过渲染，与 contain-intrinsic-size 配合
content-visibility: visible默认
content-visibility: hidden类似 display: none 但保留渲染状态
contain-intrinsic-size: <w> <h>给 contain: size 的容器预估尺寸，防塌陷
contain-intrinsic-size: auto <w> <h>自动记住上一次的实际尺寸（更精确）

will-change 速记 ​

css
will-change: auto | scroll-position | contents | <custom-ident>;
取值含义
auto默认，无提示
scroll-position即将改变滚动位置
contents即将改变内容
<custom-ident>如 transform / opacity / left,top

禁忌：

  • 不能填 unset / initial / inherit / will-change / auto / scroll-position / contents 作为 <custom-ident>
  • 绝不全局常驻（* { will-change: transform; } → 层爆炸）
  • 绝不做「预防性」优化（仅在出现真实性能问题后用）

正确流程：

  1. 监听 mouseenter / focus → 设 will-change
  2. 动画结束（transitionend / animationend）→ 置回 auto
  3. 给浏览器优化时间（提前一帧以上设置）

核心 API ​

requestAnimationFrame ​

ts
declare function requestAnimationFrame(
  callback: (timestamp: DOMHighResTimeStamp) => void
): number;

declare function cancelAnimationFrame(id: number): void;
  • timestamp：DOMHighResTimeStamp（毫秒，相对 performance.timeOrigin），与 performance.now() 同基
  • 同一帧内多个回调共享同一时间戳
  • 频率对齐显示刷新率：60Hz → 约 16.6ms / 120Hz → 约 8.3ms / 240Hz → 约 4.16ms
  • 页面不可见时自动暂停

getComputedStyle ​

ts
window.getComputedStyle(element: Element, pseudoElt?: string | null): CSSStyleDeclaration;
  • 查询几何相关属性（如 height / width / top / margin-top）会触发强制同步布局
  • 查询非几何属性（如 color / background-color）不触发

强制布局 API 全清单 ​

类型API
offset*offsetWidth / offsetHeight / offsetTop / offsetLeft
client*clientWidth / clientHeight / clientTop / clientLeft
scroll*scrollTop / scrollLeft / scrollWidth / scrollHeight
几何查询getBoundingClientRect() / getClientRects()
滚动scrollIntoView() / scrollTo() / scrollBy()
窗口window.scrollX / window.scrollY / window.innerHeight
媒体查询window.matchMedia('(min-width: 100px)').matches（首次）
焦点element.focus()（部分场景）
文本getComputedStyle() 查询几何属性时

测量与调试工具 ​

Chrome DevTools ​

面板用途
Performance → Layers查看合成层数量、创建原因
Performance → Paint profiler单次 Paint 的栅格化耗时
Performance → Forced Reflow insight定位强制同步布局
Rendering → Paint Flashing高亮被重绘的区域（针对性优化）
Rendering → Layer Borders看每层边界
Rendering → Layout Shift Regions看布局偏移区域
Rendering → Frame Rendering Stats每帧 FPS 与 GPU 内存

Long Animation Frames API (LoAF) ​

js
// 字段：forcedStyleAndLayoutDuration（强制样式与布局耗时）
observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    entry.scripts.forEach((script) => {
      console.log(script.forcedStyleAndLayoutDuration);
    });
  }
});
observer.observe({ type: 'long-animation-frame', buffered: true });

版本与状态 ​

特性状态
CSS will-changeCSS Will Change Module Level 1；MDN Baseline widely available since 2020-01；Firefox 31+ / Chrome 36+ / Safari 9.1+
CSS containCSS Containment Module Level 2；Chrome 52+（2016）起支持 size/layout/style/paint/strict/content
CSS content-visibilityContainment Level 2；Chrome 85+（2020）；Firefox 较晚；属进阶用法
contain: inline-sizeContainment Level 2 新增；Chrome 105+
requestAnimationFrameHTML Living Standard；所有浏览器长期稳定支持
CSS 独立 transform 属性translate/rotate/scale；Baseline widely available since 2023
transform/opacity 作为合成器属性事实行为稳定（web.dev compositor-only 文章原文 2015 版，2023-12 仍重申为当前 Chromium 行为）
translateZ(0) hack用于不支持 will-change 的旧浏览器；现代浏览器优先用 will-change

注意：web.dev 部分 compositor-only 文章原文为 2015 版，但 transform/opacity 的核心结论至今仍是当前 Chromium 行为（web.dev rendering-performance 总纲于 2023-12 重申）。

官方资源 ​