大量的网格列/行是否影响性能？

Question

有一个包含许多小的行和列的网格，如下所示：

项目将放置在其中，例如：

创建网格的方法如下：

grid-template-rows: repeat(auto-fill, 10px);
grid-template-columns: repeat(auto-fill, 10px);

• 网格的宽度可以和浏览器窗口一样宽，例如2000px。
• 高度可以是多个屏幕，例如10000px。
• 用户看不到轨道，上面的图像只是演示CSS Grid布局的外观。
• 可能有数百个“项目”（上图为灰色区域），每个项目都占据一定数量的单元格（可以是1x1项目，也可以是60x40项目）

问题

• 这是性能问题吗？浏览器生成几百列几千行的网格是否昂贵？
• 如果是，是否有一种方法可以优化repeat(auto-fill, 10px)？也许应该使用百分比代替（repeat(auto-fill, 1%))，或者使用百分比代替auto-fill？

还是最好通过JavaScript（容器的高度，项目的左/顶部）来做到这一点？

Answer 1

这会影响SEO和用户体验，但是，我认为它不会大大降低浏览器的性能-仅在互联网连接速度缓慢时才对其产生轻微影响。 虽然，使用一些延迟加载之王可能是一个好主意。