布局、绘制与合成

本节用一次读取布局、一次写入几何属性的对照说明强制布局为何出现。

<div id="box"></div><script>
  const box = document.querySelector('#box')
  box.style.width = '100px'
  console.log(box.getBoundingClientRect().width)
  box.style.width = '200px'
</script>

在 Performance 面板标记读取与写入；把多次读写改成“先读后写”批处理，比较 Layout 事件而不是只看 FPS。

机制拆解

读取布局几何可能强制浏览器提交尚未完成的样式和布局；写入几何属性又可能触发下一轮布局。将读写分组只能减少不必要的往返，不能把所有绘制都归为布局或把 transform 绝对化。

边界与失败路径

• 所有权：监听器、observer、worker、连接、缓存和焦点都有创建者与释放时机；页面隐藏、路由离开和元素移除时都要验证。
• 宿主差异：SSR、Web Worker、Shadow DOM、跨文档、跨源和辅助技术不会共享同一套全局对象与事件路径。
• 错误分类：取消、超时、权限拒绝、协议错误、配额不足和浏览器不支持应分别进入可观察状态。
• 安全边界：用户输入、URL、HTML、消息和持久化数据不能仅因为来自同源或类型正确就视为可信。

可运行实验

对同一元素执行“写入→读取→写入”和“读取→读取→写入”两组操作，记录 Layout/Paint 事件；只改变读写顺序，不同时改设备或动画属性。

实验记录要包含运行时、输入步骤、预期输出、实际日志和未覆盖的宿主差异。

练习

1. 比较交错读写与批量读写的 Layout 事件数量。
2. 只增加阴影或滤镜，记录 Paint 变化并保持几何属性不变。
3. 说明 transform 的合成优势为何需要设备录制才能成立。 查看本节答案

下一步

完成练习后回到本章概览，按下一篇继续；遇到跨章节故障，先回到本节的所有权与宿主边界。