gatsby plugin image cls bug repro:复制过早渲染的Chrome问题 源码

描述 当页面在StaticImage (或GatsbyImage )(来自gatsby-plugin-image )之前渲染某些内容时,Lighthouse报告了一个奇怪的CLS问题(在v7.0.0上进行了测试),该问题通过CSS网格或flexbox进行重新排序。 在绊倒几个兔子洞之后,我偶然发现了一个有关引导网格的stackoverflow问题,但这似乎与我遇到的问题类似,因为它正在通过CSS更改HTML节点的顺序。 ,我认为这也是应该归咎于浏览器的解析器在读取50个标记后遇到[removed]标记后产生并触发渲染的问题。 我检查了gatsby-plugin-image的源代码以查找任何脚本标签,并且(呈现在服务器端)中有一个。 这个可重现的测试用例包含两页:一页中的图像之前没有几个节点,而另一页中的图像之前有更多(50+)个节点。 前者的CLS得分为0,而后者的CLS得分更高。