FlexLayout Benchmark

Methodology

Layout Framework Benchmark

FlexLayout and PinLayout performance has been benchmarked using Layout Framework Benchmark.

The benchmark includes the following layout frameworks:

• Auto layout
• FlexLayout
• LayoutKit
• Manual layout (i.e. set UIView's frame directly)
• PinLayout
• UIStackViews

Benchmark details

The benchmark layout UICollectionView and UITableView cells in multiple pass, each pass contains more cells than the previous one.

Benchmark Results

As you can see in the following chart, PinLayout are faster or equal to manual layouting, and between 8x and 12x faster than auto layout, and this for all types of iPhone (5S/6/6S/7/8/X)

The benchmark layout UICollectionView and UITableView cells in multiple pass, each pass contains more cells than the previous one.

See Layout Framework Benchmark for complete details and benchmarks charts for iPhone X/8/7/6S/...

FlexLayout benchmark source code

FlexLayout benchmark's source code

flex.addItem(contentView).padding(8).define { (flex) in
    flex.addItem(contentView).padding(8).define { (flex) in
        flex.addItem().direction(.row).justifyContent(.spaceBetween).define { (flex) in
            flex.addItem(actionLabel)
            flex.addItem(optionsLabel)
        }
        
        flex.addItem().direction(.row).alignItems(.center).define({ (flex) in
            flex.addItem(posterImageView).width(50).height(50).marginRight(8)

            flex.addItem().grow(1).define({ (flex) in
                flex.addItem(posterNameLabel)
                flex.addItem(posterHeadlineLabel)
                flex.addItem(posterTimeLabel)
            })
        })

        flex.addItem(posterCommentLabel)

        flex.addItem(contentImageView).aspectRatio(350 / 200)
        flex.addItem(contentTitleLabel)
        flex.addItem(contentDomainLabel)

        flex.addItem().direction(.row).justifyContent(.spaceBetween).marginTop(4).define({ (flex) in
            flex.addItem(likeLabel)
            flex.addItem(commentLabel)
            flex.addItem(shareLabel)
        })

        flex.addItem().direction(.row).marginTop(2).define({ (flex) in
            flex.addItem(actorImageView).width(50).height(50).marginRight(8)
            flex.addItem(actorCommentLabel).grow(1)
        })
    }
}