illegalCreed

中文

English

中文

English

Appearance

参考 ​

基于 Chromium 现代架构 · 核于 2026-07

速查 ​

  • 经典管线：DOM → CSSOM → render tree → layout → paint → composite
  • 代价链：改几何全链重跑 > 改外观跳过 layout > 改 transform/opacity 仅合成
  • DOM 增量构建；CSSOM 非增量（后规则可覆盖前规则）→ CSS render-blocking
  • 裸 <script> 暂停解析；defer 按序等解析完；async 先到先跑；module 默认 defer
  • render tree：display:none 整枝排除；visibility:hidden 保留占位；伪元素凭 content 进
  • 首次算几何 = layout，重算 = reflow；reflow → repaint → re-composite 连坐
  • 读 offsetWidth 等几何属性在有待处理样式改动时强制同步布局；循环读写交替 = layout thrashing
  • 帧预算 = 1000 ÷ 刷新率：60Hz≈16.7ms、120Hz≈8.3ms；rAF 在渲染前、rIC 在空闲期
  • 合成器线程不等 JS；非快速滚动区/passive:true/touch-action 决定滚动是否要等主线程
  • RenderingNG：property trees 四棵、LayoutNG 不可变 fragment tree、先 paint 后 layerize（CAP）、Viz 聚合 + GPU 光栅化

管线步骤速查 ​

步骤输入输出线程要点
解析 HTML字节流DOM主线程token→节点→树；增量；容错不报错；preload scanner 并行预取
解析 CSSCSS 文本CSSOM主线程非增量、render-blocking；构建极快（< 一次 DNS 查询）
styleDOM + CSSOMrender tree（计算样式）主线程只收可见节点；UA 样式表打底；选择器从右向左匹配
layoutrender tree几何（layout tree / fragment tree）主线程视口为基、盒模型；首次 layout、重算 reflow
paint布局结果paint records / display list主线程按 CSS painting order 自后向前；指令非像素
composite图层 + 绘制指令compositor frame合成器线程分层→瓦片栅格化→draw quads→送 GPU/Viz

帧内主线程编排：输入回调 → rAF → style → layout → paint → commit，之后合成器接手；空闲期跑 rIC。

重排 vs 重绘触发对照 ​

操作reflow（重排）repaint（重绘）composite
增删/移动 DOM、innerHTML✅✅✅
改 width / padding / font-size / top 等盒模型与几何✅✅✅
窗口 resize / 设备旋转✅（每次）✅✅
未声明尺寸的图片加载完成✅✅✅
改 color / background / box-shadow / visibility❌✅✅
改 transform / opacity（已成层）❌❌✅（合成器线程）
读 offsetWidth / getBoundingClientRect()（有待处理改动时）✅ 强制同步——
display: none ↔ 显示切换✅（整枝进出 render tree）✅✅

强制同步布局高危读取：offsetTop/Left/Width/Height、clientWidth/Height、scrollTop/scrollHeight、getBoundingClientRect()、getComputedStyle() 几何值、focus()、scrollIntoView()。药方：先集中读、再集中写，写入进 rAF。

脚本加载对比 ​

方式阻塞解析执行时机顺序document.write适用
<script> 裸是（下载+执行）遇到即执行文档序可用（毒）极少数必须同步的内联
<script defer>否解析完、DOMContentLoaded 前文档序禁用依赖 DOM/彼此顺序的主逻辑
<script async>否（执行时暂停）下载完立即无序禁用独立脚本（埋点/广告）
<script type="module">否同 defer（可加 async）依赖图序禁用现代模块化入口

配套：CSS 不阻塞解析但阻塞渲染与 JS 执行；<link rel="preload"> 声明关键资源；media="print" 等标注使样式表不阻塞屏幕渲染。

图层提升属性 ​

触发成层说明
<video> / <canvas>内容独立更新
3D transform（translateZ 等）变换合成时应用
opacity 动画效果合成时应用
will-change: transform / opacity显式预建层提示
position: fixed / sticky、滚动容器独立滚动/固定（实现相关）

纪律：层耗 GPU 内存；「跨过多图层合成可能比每帧重画小块更慢」（Chrome）——预建节制、动画结束移除 will-change、以实测为准。现代引擎 layerize 默认合并 paint chunks，只独立「合成器要动的」。

渲染相关线程/进程分工 ​

执行体职责关键性质
渲染进程 · 主线程解析 HTML/CSS、JS、style/layout/paint、hit test、事件分发管线大头；被 JS 阻塞
渲染进程 · 合成器线程分层（layerize）、滚动、合成器动画、组装 compositor frame不等样式计算与 JS
渲染进程 · raster/worker 线程栅格化协调（经典模型）、Web/Service Worker辅助并行
Viz 进程 · display compositor聚合各渲染进程 + 浏览器 UI 的帧全系统一个；须时刻响应
Viz 进程 · GPU main threadGPU 光栅化、最终 draw光栅默认上 GPU

输入与帧速查 ​

机制规则
事件路由浏览器进程（坐标）→ 合成器线程 → 必要时主线程 hit test（基于 paint records）分发
非快速滚动区绑相关监听的区域滚动须等主线程；委托到 document/body 标掉整页
passive: true承诺不 preventDefault → 合成器不等主线程直接滚；配 event.cancelable 判断
touch-actionCSS 声明式关掉默认手势，免监听
事件合并连续事件（mousemove/pointermove/touchmove/wheel）合并至 rAF 前分发；离散事件（keydown/mousedown…）立即；getCoalescedEvents() 取中间点
输入频率触摸屏 60–120 次/s、鼠标 ~100 次/s，高于典型刷新率 → 必须合并

经典 → RenderingNG 术语映射 ​

经典（2018 / MDN）RenderingNG备注
render tree / layout tree不可变 fragment treeLayoutNG；禁向上引用、增量复用
paint recordsdisplay list（items → paint chunks）按 property tree state 分组
layer tree（主线程、layout 后）composited layer list（layerize、paint 后）CompositeAfterPaint
layer tree 承载变换/裁剪/滚动property trees：transform/clip/effect/scroll四棵树、四元组状态
帧交浏览器进程转 GPU提交 Viz：display compositor 聚合 + GPU drawsurface ID 嵌套多进程内容
renderer 内 raster threadsViz GPU 光栅化（默认）sync token 异步衔接
style→layout→paint→composite12 阶段：animate/style/layout/pre-paint/scroll/paint/commit/layerize/raster/activate/aggregate/draw纯视效动画与滚动可跳过 layout/pre-paint/paint

帧预算 ​

刷新率每帧预算场景
60Hz≈16.7ms多数外接屏/中端机
90Hz≈11.1ms部分安卓机
120Hz≈8.3msProMotion / 高刷旗舰

预算内要装下：输入回调 + rAF + style + layout + paint + commit（主线程部分）。目标是匹配显示器刷新率，不是固定 60fps。

权威链接 ​

相关页 ​