深度嵌套的 flexbox 布局会导致性能问题吗？答案

【问题标题】：Does deep nesting flexbox layout cause performance issue?深度嵌套的 flexbox 布局会导致性能问题吗？
【发布时间】：2017-01-20 15:40:30
【问题描述】：

我一直在做一个 ReactJS 项目，我使用 flexbox 布局创建大部分组件。由于使用 react，我们可以拥有深度嵌套的组件，所以我的布局是嵌套的 flexbox 布局。

现在我的问题是，这对性能有什么问题吗？在一个页面上，有很多组件，每个组件都有 3 到 4 级嵌套的 flexbox 布局。这会导致性能问题吗？

【问题讨论】：

标签： css reactjs flexbox

【解决方案1】：

做了一个小测试。渲染了 100 个组件，每个组件都有 10 个嵌套布局。有和没有 flexbox。这是sn-ps的代码：

组件/index.js

@CSSModules(styles, { allowMultiple: true })
export default class TheComponent extends Component {
  render() {
    const { deepNest, flex } = this.props

    return (
      <div>{ this.renderComp(deepNest, flex) }</div>
    )
  }

  renderComp(deepNest, flex) {
    const flexProperties = [
      { justifyContent: "center", alignItems: "center" },
      { justifyContent: "flex-start", alignItems: "flex-end" },
      { flexDirection: "row" }
    ]

    const content = [
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum quis ligula vel elementum. Integer non rhoncus purus, eget dignissim ante.",
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum quis ligula vel elementum. Integer non rhoncus purus, eget dignissim ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum quis ligula vel elementum. Integer non rhoncus purus, eget dignissim ante."
    ]

    if (deepNest > 0 && flex) {
      return (
        <div styleName="containerFlex" style={flexProperties[deepNest % 3]}>
          <div styleName="contentFlex" style={flexProperties[deepNest % 3]}>
            { content[deepNest % 3] }
          </div>
          <div styleName="nestedFlex" style={flexProperties[deepNest % 3]}>
            { this.renderComp(deepNest - 1, flex) }
          </div>
        </div>
      )
    }

    if (deepNest > 0 && !flex) {
      return (
        <div styleName="container">
          <div styleName="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum quis ligula vel elementum. Integer non rhoncus purus, eget dignissim ante.
          </div>
          <div styleName="nested">
            { this.renderComp(deepNest - 1, flex) }
          </div>
        </div>
      )
    }
  }
}

WithFlex/index.js

import TheComponent from "../Component"

@CSSModules(styles, { allowMultiple: true })
export default class WithFlex extends Component {
  constructor(props) {
    super(props)

    this.state = { render: false }
  }

  render() {
    const {render} = this.state

    // number of components to render
    const arr = _.range(100)

    return (
      <div>
        <div
        style={{ display: "block", padding: 30, lineHeight: "60px" }}
        onClick={() => this.setState({render: !render})}>
            Start Render
        </div>

        { render && arr.map((i) => <TheComponent key={i} deepNest={10} flex={true}/> ) }
      </div>
    )
  }
}

WithoutFlex/index.js

import TheComponent from "../Component"

@CSSModules(styles, { allowMultiple: true })
export default class WithoutFlex extends Component {
  constructor(props) {
    super(props)

    this.state = { render: false }
  }

  render() {
    const {render} = this.state

    // number of components to renders
    const arr = _.range(100)

    return (
      <div>
        <div
        style={{ display: "block", padding: 30, lineHeight: "60px" }}
        onClick={() => this.setState({render: !render})}>
            Start Render
        </div>

        { render && arr.map((i) => <TheComponent key={i} deepNest={10} flex={false}/> ) }
      </div>
    )
  }
}

Chrome 开发工具时间线的结果。

WithFlex

无弹性

总结

差别不大。同样在 flexbox 中，我放置了随机属性以供选择。所以我觉得表演没问题。希望对其他开发者有所帮助。

【讨论】：

这是一些很棒的信息，但是如果您使用直接 html 而不是从 js 脚本中打印 html 会更准确吗？
@Brian 是的，你是对的。我的问题实际上是在使用 react 时。这就是为什么用 react 渲染组件的原因。

【解决方案2】：

旧的 flexbox (display: box) 比新的 flexbox (display: flex) 慢 2.3 倍。常规块布局（非浮动）通常会比新的 flexbox 快或快，因为它总是单通道。但是新的 flexbox 应该比使用表格或编写基于 JS 的自定义布局代码更快。欲了解更多信息 Article1 Article2

【讨论】：