Chrome Performance中出现Layout Shift具体代表什么意思？

Question

如题，截图如下：

P.S. 来自谷歌示例：https://googlechrome.github.i...

Answer 1

谷歌开发者文档有的嘛：文档，文档

简单讲就是：

当一个元素初始位置在可视区域中，两帧之间发生了位置偏移，那么Layout Instability API会对它进行标记为“不稳定元素”（ layout instability - DOM elements ）。

它是一个指标(Layout Instability Metric)，做的事是去测量一个页面DOM元素的"Layout Shift Score"（咋翻译？布局偏移指数？），进而去标榜这个页面某些元素布局不稳定的严重程度。

要注意的是：初始位置发生偏移，因此手动添加DOM元素等操作不算在内。