core-web-vitals - 确定属性节点为空时的累积布局偏移

Question

我正在尝试减少网站上的 CLS（累积布局偏移）。使用 Google 的 webvitals JS 库，我看到 CLS 的最大来源之一是下面，它的节点为“null”，导致布局转移。有谁知道如何解决这个问题？如果导致转移的节点为空，我将如何更新 CSS 或 HTML 以防止这种转移？

sources: Array(1)
0: LayoutShiftAttribution
currentRect: DOMRectReadOnly {x: 0, y: 0, width: 0, height: 0, top: 0, …}
node: null
previousRect: DOMRectReadOnly {x: 0, y: 0, width: 375, height: 329, top: 0, …}
__proto__: LayoutShiftAttribution

Answer 1

我自己目前正在研究这个，我使用很多加载骨架来通知用户内容正在加载，一旦获取内容，我认为它们变为空，它们本质上是已以某种方式替换的 DOM 节点。