Tata letak Flexbox tidak lambat

Beberapa waktu lalu, Wilson Page menulis artikel bagus untuk Smashing Magazine yang membahas cara mereka menghidupkan aplikasi web Financial Times. Dalam artikel tersebut, Wilson mencatat:

Seiring dengan perkembangan aplikasi, kami mendapati performa semakin memburuk.

Kami menghabiskan beberapa jam di linimasa Alat Developer Chrome dan menemukan penyebabnya: Syukur, horor! — itu adalah sahabat baru kami, flexbox. Linimasa menunjukkan bahwa beberapa tata letak memerlukan waktu hampir 100 milidetik; mengubah 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 mendapat kesempatan untuk menjawab jika flexbox yang lebih baru (display: flex;) lebih cepat, tetapi untuk Trik CSS, Chris Coyier membuka pertanyaan itu.

Kami bertanya kepada Ojan Vafai, yang menulis sebagian besar 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 codepath multi-pass dengan cukup mudah (misalnya, flex-align: stretch sering kali berupa 2-pass). Secara umum, prosesnya akan jauh lebih cepat dalam kasus umum, tetapi Anda dapat membuat kasus yang prosesnya sama lambatnya.

Meskipun demikian, jika Anda bisa menghindarinya, tata letak blok reguler (non-float), biasanya sama cepat atau lebih cepat dari flexbox baru karena selalu bersifat 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 head-to-head antara {i>syntax<i} yang lama dan yang baru.

Tolok Ukur Flexbox Lama v Baru

  • flexbox lama vs flexbox baru (dengan penggantian)
  • 500 elemen per halaman
  • mengevaluasi biaya pemuatan halaman untuk menata letak elemen
  • dirata-ratakan pada 3 run masing-masing
  • yang diukur di desktop. (perangkat seluler akan menjadi ~10x lebih lambat)

Flexbox lama: biaya tata letak ~43,5 md


Contoh tata letak flexbox lama

Flexbox baru: biaya tata letak ~18,2 md


Contoh tata letak flexbox baru

Ringkasan: Versi Lama 2,3x lebih lambat daripada yang 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 fallback ke 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 terhubung dengan Wilson dan tim Financial Times Labs dan, hasilnya, meningkatkan cakupan Chrome DevTools untuk alat kinerja tata letak. Kami akan segera menambahkan kemampuan untuk melihat batas penataan ulang elemen, dan peristiwa Tata Letak di linimasa dimuat dengan detail cakupan, root, dan biaya setiap tata letak:

Pop-up tata letak sinkronisasi paksa