Beberapa waktu lalu, Wilson Page menulis artikel bagus untuk Smashing Magazine yang membahas cara mereka membuat aplikasi web Financial Times. Dalam artikel tersebut, Wilson mencatat:
Seiring aplikasi mulai berkembang, kami mendapati performanya semakin memburuk.
Kami menghabiskan beberapa jam di linimasa Chrome Developer Tools dan menemukan pelakunya: Sungguh mengejutkan! — itu adalah sahabat baru kita, flexbox. Linimasa menunjukkan bahwa beberapa tata letak memerlukan waktu hampir 100 milidetik; mengerjakan ulang tata letak tanpa flexbox mengurangi waktu ini menjadi 10 milidetik.
Komentar Wilson adalah tentang flexbox asli (lama) yang menggunakan display: box;. Sayangnya, mereka tidak pernah mendapatkan kesempatan untuk menjawab apakah flexbox yang lebih baru (display: flex;) lebih cepat, tetapi di CSS Tricks, Chris Coyier membuka pertanyaan tersebut.
Kami bertanya kepada Ojan Vafai, yang menulis sebagian besar penerapan di WebKit & Blink, tentang model dan penerapan flexbox yang lebih baru.
Kode flexbox baru memiliki lebih sedikit jalur kode tata letak multi-pass. Namun, Anda masih dapat mencapai jalur kode multi-pass dengan cukup mudah (misalnya,
flex-align: stretchsering kali 2-pass). Secara umum, proses ini akan jauh lebih cepat dalam kasus umum, tetapi Anda dapat membuat kasus yang sama lambatnya.
Meskipun demikian, jika Anda dapat melakukannya, tata letak blok reguler (non-float), biasanya akan sama cepat atau lebih cepat daripada flexbox baru karena selalu single-pass. Namun, flexbox baru akan lebih cepat daripada menggunakan tabel atau menulis kode tata letak berbasis JS kustom.
Untuk melihat perbedaan jumlahnya, saya membuat perbandingan langsung antara sintaksis lama dan baru.
Benchmark Flexbox Lama vs Baru
- flexbox lama vs flexbox baru (dengan penggantian)
- 500 elemen per halaman
- mengevaluasi biaya pemuatan halaman untuk menata letak elemen
- rata-rata dari 3 kali pengoperasian
- diukur di desktop. (perangkat seluler akan ~10x lebih lambat)
Flexbox lama: biaya tata letak ~43,5 md
Flexbox baru: biaya tata letak ~18,2 md
Ringkasan: Versi lama 2,3x lebih lambat daripada versi baru.
Apa yang perlu Anda lakukan?
Saat menggunakan flexbox, selalu buat untuk hal-hal baru: sintaksis tweener IE10 dan flexbox baru yang diperbarui yang ada di Chrome 21+, Safari 7+, Firefox 22+, Opera (& Opera Mobile) 12.1+, IE 11+, dan Blackberry 10+. Dalam banyak kasus, Anda dapat melakukan penggantian ke flexbox lama untuk menggunakan beberapa browser seluler lama.
Ingat: Alat, bukan aturan
Yang lebih penting adalah mengoptimalkan hal yang penting. Selalu gunakan linimasa untuk mengidentifikasi bottleneck sebelum menghabiskan waktu untuk mengoptimalkan satu jenis operasi.
Bahkan, kami telah menghubungi Wilson dan tim Financial Times Labs dan, sebagai hasilnya, kami meningkatkan cakupan Chrome DevTools untuk alat performa tata letak. Kami akan segera menambahkan kemampuan untuk melihat batas tata letak ulang elemen, dan peristiwa Tata letak di linimasa dimuat dengan detail cakupan, root, dan biaya setiap tata letak:
