对齐项目的表现:拉伸与替代品

时间:2017-05-19 00:53:54

标签: css performance css3 flexbox css-grid

在我目前的项目中,对可容忍的加载时间存在性能限制,并且测试部署已经证明滞后足以让我查看代码优化。

在研究CSS flexbox的性能时,我的理解是它比旧的flexbox实现和CSS表(Source)都要快。当在flexbox和新兴的CSS网格(Source)之间进行比较时,网格在2D布局中表现更好,这只是预期的,因为它是专为此而设计的,而不是为一维布局设计的flex

但是,当涉及到1D布局时,当后者使用align-items: stretch(此属性的默认值)时,网格的性能优于CSS flex。但是,如果不使用stretch,则flex会表现得更好。

因此存在一个问题:拉伸对齐很有用,但对性能有很大影响(这对我很重要,因为我的项目系统大量使用iframe和每个框架内嵌套的flexbox)。因此,如果我不使用拉伸并将其替换为其他替代方案(例如width: 100%height: 100%,具体取决于弯曲方向),那么它是否会提高性能对于尚未填充整个空间的特定元素拉伸?

0 个答案:

没有答案