再见二丁目 | yitimo的个人日志

再见二丁目

Flexbox 弹性布局是否更慢

发布于: 2022-01-22 11:21

此文章久未修订,请自行甄别内容准确性。

原文: Flexbox弹性布局并不慢(Flexbox layout isn’t slow)

原文结论是: display: boxdisplay: flex 慢 2.3 倍.

实测

但实际测试下来, 在当下最新的 chrome 浏览器下, display: boxdisplay: flex 表现是接近的, 甚至有较多情况下前者性能还更佳.

demo里分别用 block, box, flex 三种布局渲染大量节点(500个), 并频繁修改容器宽度来触发重新渲染, 截10帧取平均值来分析性能:

block布局表现: 17.9ms/帧

block布局

box布局表现: 17.9ms/帧

box布局

flex布局表现: 21.4ms/帧

flex布局

结论

从实验结果来看, 这个实验做了个寂寞:

但也提供了一些建议:

抛开布局本身的性能差异, 应该关注其他更有效的性能优化方案, 比如:

回归到三种布局本身的特性差异上, 个人建议如下: