Beberapa waktu yang lalu, Wilson Page menulis artikel hebat untuk Smashing Magazine yang membahas bagaimana aplikasi web Financial Times mewujudkannya. Dalam artikel tersebut, Wilson mencatat:
Seiring aplikasi ini mulai berkembang, kami mendapati performa aplikasi semakin buruk.
Kami menghabiskan beberapa jam di linimasa Chrome Developers Tools dan menemukan penyebabnya: Kejutan, horor! — itu adalah sahabat baru kami, flexbox. Linimasa menunjukkan bahwa beberapa tata letak memerlukan waktu hampir 100 milidetik; pengerjaan ulang tata letak tanpa flexbox mengurangi waktu ini menjadi 10 milidetik.
Komentar Wilson terkait dengan flexbox asli (lama) yang menggunakan display: box;. Sayangnya, mereka tidak pernah sempat menjawab jika flexbox yang lebih baru (display: flex;) lebih cepat, tetapi terkait Trik CSS, Chris Coyier membuka pertanyaan itu.
Kami bertanya kepada Ojan Vafai, yang menulis banyak implementasi di WebKit & Blink, tentang model dan implementasi flexbox yang lebih baru.
Kode flexbox baru memiliki jalur kode tata letak multi-pass yang jauh lebih sedikit. Anda masih dapat mencapai jalur kode multi-pass dengan mudah (misalnya,
flex-align: stretchbiasanya berupa 2-pass). Umumnya, ini seharusnya jauh lebih cepat dalam kasus umum, tetapi Anda dapat membuat kasus yang sama lambatnya.
Dengan demikian, jika Anda tidak keberatan, tata letak blok reguler (non-float), biasanya akan secepat atau lebih cepat daripada flexbox baru karena selalu single-pass. Namun, flexbox baru akan lebih cepat daripada menggunakan tabel atau menulis kode tata letak dasar JS kustom.
Untuk melihat perbedaan angka, saya membuat perbandingan langsung antara sintaks lama vs baru.
Tolok Ukur Flexbox Lama vs Baru
- flexbox lama vs flexbox baru (dengan penggantian)
- 500 elemen per halaman
- mengevaluasi biaya pemuatan laman untuk mengatur tata letak elemen
- dirata-ratakan masing-masing 3 run
- diukur di desktop. (perangkat seluler akan menjadi ~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 baru.
Apa yang perlu Anda lakukan?
Saat menggunakan flexbox, selalu tulis 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 browser seluler lama.
Ingat: Alat, bukan aturan
Hal yang lebih penting adalah mengoptimalkan hal-hal yang penting. Selalu gunakan linimasa untuk mengidentifikasi bottleneck sebelum menghabiskan waktu untuk mengoptimalkan satu jenis operasi.
Bahkan, kami telah terhubung dengan Wilson dan tim Financial Times Labs, dan hasilnya, memperbaiki cakupan alat performa tata letak Chrome DevTools. Kami akan segera menambahkan kemampuan untuk melihat batas tata letak ulang elemen, dan peristiwa Tata letak di linimasa akan dimuat dengan detail cakupan, root, dan biaya setiap tata letak:
