resizeobserver 回调中直接修改 style.width 可能失效或循环触发，因其在布局后绘制前执行，同步改样式会触发新布局和 resizeobserver；应使用 requestanimationframe 延迟更新、防抖（≥1px 变化才响应）、避免强制同步布局读取。
ResizeObserver 能监听容器尺寸变化并触发回调，但直接用它调整子元素尺寸时，容易因重复触发、布局抖动或未处理边界条件导致错乱——关键在于控制回调频率、避免同步重排、区分宽高变化场景。
为什么 ResizeObserver 回调里直接改 style.width 可能失效或循环触发
ResizeObserver 的回调在浏览器布局计算后、绘制前执行，此时若同步修改子元素的 style.width 或 style.height，可能触发新一轮布局计算，进而再次触发 ResizeObserver（尤其当子元素尺寸变化又影响父容器时）。Chrome 120+ 已限制嵌套触发深度，但仍可能造成视觉卡顿或值跳变。
实操建议：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
requestAnimationFrame延迟到下一帧再应用样式变更，避开同步布局陷阱 - 在回调中缓存上一次尺寸，仅当宽度或高度变化超过 1px 时才更新子元素（防抖）
- 避免在回调中读取
offsetWidth等会强制同步布局的属性
如何让子元素按容器宽度等比缩放（如响应式图表容器）
典型场景是 <div id="chart-container"><canvas id="chart"></canvas></div>，需 canvas 宽高始终填满容器且保持设备像素比清晰。
实操建议：
- 在 ResizeObserver 回调中获取
entry.contentRect.width和entry.contentRect.height，而非offsetWidth - 用
window.devicePixelRatio放大 canvas 的width/height属性，再用 CSS 缩放回原尺寸 - 设置 canvas 的
style.width和style.height为百分比或100%，确保拉伸跟随容器
示例关键片段：
const ro = new ResizeObserver(entries => {
for (const entry of entries) {
const { width, height } = entry.contentRect;
const canvas = entry.target.querySelector('canvas');
const dpr = window.devicePixelRatio || 1;
<pre class="brush:php;toolbar:false;">canvas.width = Math.floor(width * dpr);
canvas.height = Math.floor(height * dpr);
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
// 此处重绘图表逻辑} });
多个子元素需要不同缩放策略时怎么避免重复监听
一个容器内有文字、图标、图表三类子元素，各自对宽高变化敏感度不同（文字只关心宽度换行，图标需保持宽高比，图表要重绘）。
实操建议：
- 不要为每个子元素单独创建 ResizeObserver，统一由父容器监听，然后在回调中按需分发
- 用
data-resize-behavior这类自定义属性标记子元素类型，例如<div data-resize-behavior="text"> <li>对仅需响应宽度变化的元素，只比较 <code>contentRect.width；对需宽高比的，用Math.min(width, height)作为基准
真正难的是判断“是否真的需要重绘”——比如容器宽度从 320px → 321px，文字内容没换行，图表分辨率变化也低于人眼可辨阈值，这时候强行重绘反而伤性能。实际项目里得结合业务语义加阈值或节流，而不是无脑响应每次 resize。
