Biraz önce Wilson Page, Financial Times web uygulamasını nasıl hayata geçirdiklerini ele alan Smashing Magazine için harika bir makale yazdı. Makalede Wilson şunları belirtmektedir:
Uygulama gelişmeye başladıkça performansın da gitgide kötüye gittiğini fark ettik.
Chrome Geliştirici Araçları'nın zaman çizelgesinde birkaç saat geçirdik ve sorunun nedenini bulduk: Şok, korku! — Yeni en iyi arkadaşımız flexbox'tı. Zaman çizelgesi, bazı düzenlerin 100 milisaniyeye yakın sürdüğünü gösteriyordu; düzenlerimizi flexbox olmadan yeniden düzenlemek ise bu süreyi 10 milisaniyeye düşürdü.
Wilson'ın yorumları, display: box; kullanan orijinal (eski) flexbox hakkındaydı. Ne yazık ki yeni flexbox'ın (display: flex;) daha hızlı olup olmadığını henüz yanıtlayamadılar. Ancak Chris Coyier, CSS Hileleri konusunda bu soruyu açtı.
WebKit & Blink'te uygulamanın büyük bir kısmını yazan Ojan Vafai'ye yeni flexbox modeli ve uygulaması hakkında sorular sorduk.
Yeni flexbox kodunda çok daha az sayıda çok geçişli düzen kod yolu bulunur. Yine de çok geçişli kod yollarına oldukça kolay bir şekilde ulaşabilirsiniz (örneğin,
flex-align: stretchgenellikle 2 geçişlidir). Genel olarak, genel durumda çok daha hızlı olması gerekir, ancak eşit derecede yavaş olduğu bir durum oluşturabilirsiniz.
Bununla birlikte, mümkünse normal blok düzeni (kayan olmayan), her zaman tek geçişli olduğundan genellikle yeni flexbox'tan daha hızlı veya daha hızlı olacaktır. Ancak yeni flexbox, tablo kullanmaktan veya özel JS-taban düzen kodu yazmaktan daha hızlı olacaktır.
Sayılardaki farkı görmek için eski ile yeni söz diziminin bire bir karşılaştırmasını yaptım.
Eski - Yeni Flexbox Karşılaştırması
- eski flexbox - yeni flexbox (yedekli)
- Sayfa başına 500 öğe
- öğeleri yerleştirmek için sayfa yükleme maliyetini değerlendirmek
- her biri 3 koşuda ortalama
- masaüstünde ölçüldüğünden emin olun. (mobil ortam yaklaşık 10 kat daha yavaş olacaktır)
Eski flexbox: ~43,5 ms düzen maliyeti
Yeni flexbox: ~18,2 ms. düzen maliyeti
Özet: Eski sürüm, yenisinden 2,3 kat daha yavaştır.
Bu durumda ne yapmanız gerekir?
Flexbox'ı kullanırken her zaman yeni şeyler için yazın: IE10 tweener söz dizimi ve Chrome 21 ve sonraki sürümler, Safari 7 ve sonraki sürümler, Firefox 22 ve sonraki sürümler, Opera (& Opera Mobile) 12.1+, IE 11+ ve Blackberry 10+ sürümlerine sahip olan yeni güncellenmiş flexbox. Birçok durumda, eski esnek tarayıcılarına eski mobil kutular geri dönebilirsiniz.
Unutmayın: Kurallar değil, araçlar
Daha önemli olan, sizin için önemli olan öğeleri optimize etmektir. Belirli bir işlemi optimize etmeye zaman harcamadan önce her zaman performans sorunlarını belirlemek için zaman çizelgesini kullanın.
Wilson ve Financial Times Labs ekibiyle bağlantı kurduk ve sonuç olarak Chrome Geliştirici Araçları'nın düzen performansı araçlarının kapsamını iyileştirdik. Yakında bir öğenin geçiş sınırını görüntüleme özelliğini ekleyeceğiz. Zaman çizelgesindeki Düzen etkinlikleri, her bir düzenin kapsamı, kökü ve maliyetiyle ilgili ayrıntılarla yüklenecek.
