Kısa süre önce Wilson Page, Financial Times web uygulamasını nasıl hayata geçirdiklerini araştıran Smashing Magazine için harika bir makale yazdı. Wilson bu makalede şunları söylüyor:
Uygulama büyümeye başladıkça performansın giderek kötüleştiğini gördük.
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 çizelgesinde, bazı düzenlerin yaklaşık 100 milisaniye sürdüğü görülüyordu. Bu işlemin flexbox olmadan yeniden düzenlenmesi bu süreyi 10 milisaniyeye indirdi.
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ığı konusunda hiçbir yanıt alamadılar. Ancak CSS hileleri sayesinde Chris Coyier bu soruyu açtı.
Uygulamanın büyük bir kısmını WebKit ve Blink'te yazan Ojan Vafai'ye yeni flexbox modeli ve uygulaması hakkında sorular sorduk.
Yeni flexbox kodu, çok daha az geçişli düzen kod yoluna sahiptir. Yine de çok geçişli kod yollarına kolayca ulaşabilirsiniz (ör.
flex-align: stretchgenellikle 2 geçişli olur). Genel olarak, yaygın durumda bu işlem çok daha hızlı olmalıdır, ancak eşit derecede yavaş olduğu bir durum oluşturabilirsiniz.
Bununla birlikte, her zaman tek geçişli olduğundan, normal blok düzeni (kayan olmayan) genellikle yeni flexbox'tan daha hızlı veya daha hızlı olur. Ancak yeni flexbox, tablo kullanmaktan veya özel JS tabanı düzen kodu yazmaktan daha hızlı olmalıdır.
Sayılar arasındaki 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ı
- old flexbox ile yeni flexbox (yedekli)
- Sayfa başına 500 öğe
- Sayfa yükleme maliyetini değerlendirmek
- her biri 3 çalıştırmanın ortalaması alınır
- masaüstü cihazlarda ölçülür. (mobil cihazlar yaklaşık 10 kat daha yavaş çalışır)
Eski flexbox: ~43,5 ms düzen maliyeti
Yeni flexbox: düzen maliyeti ~18,2 ms
Özet: Eski sürüm yenisine kıyasla 2,3 kat daha yavaştır.
Bu durumda ne yapmanız gerekir?
Fleksbox kullanırken her zaman yeni öğeler için yazın: IE10 tweener söz dizimi ve Chrome 21 ve üstü, Safari 7 ve üstü, Firefox 22 ve üzeri, Opera (& Opera Mobile) 12.1 ve üzeri, IE 11 ve üzeri ile Blackberry 10 ve üzeri sürümlerdeki güncellenmiş yeni flexbox. Birçok durumda, bazı eski mobil tarayıcılara yedek olarak eski mobil tarayıcılara geri dönebilirsiniz.
Unutmayın, kurallar değil, araçlar
Daha önemli olan, önemli olan şeyleri optimize etmektir. Belirli bir işlemi optimize etmeye zaman harcamadan önce, performans sorunlarını saptamak için her zaman zaman çizelgesini kullanın.
Hatta Wilson ve Financial Times Labs ekibiyle bağlantı kurduk ve bunun sonucunda 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 Layout etkinlikleri, her bir düzenin kapsam, kök ve maliyet ayrıntılarıyla yüklenir:
