【文件属性】：
文件名称：gatsby-plugin-image-cls-bug-repro:复制过早渲染的Chrome问题
文件大小：558KB
文件格式：ZIP
更新时间：2021-04-07 22:08:42
JavaScript
描述
当页面在StaticImage （或GatsbyImage ）（来自gatsby-plugin-image ）之前渲染某些内容时，Lighthouse报告了一个奇怪的CLS问题（在v7.0.0上进行了测试），该问题通过CSS网格或flexbox进行重新排序。
在绊倒几个兔子洞之后，我偶然发现了一个有关引导网格的*问题，但这似乎与我遇到的问题类似，因为它正在通过CSS更改HTML节点的顺序。 ，我认为这也是应该归咎于浏览器的解析器在读取50个标记后遇到[removed]标记后产生并触发渲染的问题。
我检查了gatsby-plugin-image的源代码以查找任何脚本标签，并且（呈现在服务器端）中有一个。
这个可重现的测试用例包含两页：一页中的图像之前没有几个节点，而另一页中的图像之前有更多（50+）个节点。 前者的CLS得分为0，而后者的CLS得分更高。
【文件预览】：
gatsby-plugin-image-cls-bug-repro-main
----.prettierignore(45B)
----src()
--------pages()
--------styles()
--------images()
----gatsby-config.js(93B)
----LICENSE(675B)
----.prettierrc(46B)
----README.md(3KB)
----.gitignore(974B)
----package-lock.json(1.58MB)
----package.json(896B)
----static()
--------favicon.ico(3KB)