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得分更高。