深嵌套flexbox布局是否会导致性能问题？-Doesdeepnestingflexboxlayoutcauseperformanceissue?

11  

Have done a little test. Rendered 100 components, each with 10 nested layout. With and without flexbox. Here are the code snippets:

做了一点测试。渲染了100个组件,每个组件具有10个嵌套布局。有和没有flexbox。以下是代码段:

Component/index.js

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

    return (
      
{ this.renderComp(deepNest, flex) }
    )
  }

  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 (
        

          

            { content[deepNest % 3] }
          
          

            { this.renderComp(deepNest - 1, flex) }
          
        
      )
    }

    if (deepNest > 0 && !flex) {
      return (
        

          

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum quis ligula vel elementum. Integer non rhoncus purus, eget dignissim ante.
          
          

            { this.renderComp(deepNest - 1, flex) }
          
        
      )
    }
  }
}

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 (
      

        
 this.setState({render: !render})}>
            Start Render
        

        { render && arr.map((i) =>  ) }
      
    )
  }
}

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 (
      

        
 this.setState({render: !render})}>
            Start Render
        

        { render && arr.map((i) =>  ) }
      
    )
  }
}

Results from Chrome dev-tool timeline.

WithFlex

WithoutFlex

Summary

The difference is not that much. Also in flexbox, I put random properties to choose from. So I think it's alright with the performance. Hope it will help other devs.

差别不是那么大。同样在flexbox中,我将随机属性选择。所以我认为这对表现来说没问题。希望它能帮助其他开发者。

3  

Old flexbox (display: box) is 2.3x slower than new flexbox (display: flex). Regular block layout (non-float), will usually be as fast or faster than new flexbox since it’s always single-pass. But new flexbox should be faster than using tables or writing custom JS-base layout code. For more info Article1 Article2

旧的flexbox(显示:框)比新的flexbox(显示:flex)慢2.3倍。常规块布局(非浮动)通常会比新的flexbox快或快,因为它始终是单通道。但是新的flexbox应该比使用表或编写自定义的JS-base布局代码更快。更多信息第1条第2条