Wilson Page kısa süre önce Smashing Magazine için Financial Times web uygulamasını nasıl hayata geçirdiklerini anlatan harika bir makale yazdı. Wilson makalede şunları belirtiyor:
Uygulama büyüdükçe performansın giderek kötüleştiğini fark ettik.
Chrome Geliştirici Araçları'nın zaman çizelgesinde birkaç saat geçirdikten sonra suçluyu bulduk: Şok, dehşet! — yeni en iyi dostumuz olan flexbox'u kullandık. Zaman çizelgesi, bazı düzenlerin 100 milisaniyeye yakın sürdüğünü gösteriyordu. Düzenlerimizi flexbox olmadan yeniden çalışarak bu süreyi 10 milisaniyeye düşürdük.
Wilson'un yorumları, display: box; kullanan orijinal (eski) flexbox ile ilgiliydi. Maalesef yeni flexbox'un (display: flex;) daha hızlı olup olmadığını yanıtlama fırsatı bulamadılar. Ancak CSS Tricks'te Chris Coyier bu soruyu gündeme getirdi.
WebKit ve Blink'teki 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 çok geçişli düzen kod yolu vardır. Yine de çok geçişli kod yollarına oldukça kolay bir şekilde ulaşabilirsiniz (ör.
flex-align: stretchgenellikle 2 geçişlidir). Genelde, yaygın durumda çok daha hızlı olmalıdır ancak eşit derecede yavaş olduğu bir durum oluşturabilirsiniz.
Bununla birlikte, bunu yapabilecek durumdaysanız normal blok düzeni (yüzen olmayan), her zaman tek geçişli olduğu için genellikle yeni flexbox'tan hızlı veya en azından onun kadar hızlıdır. Ancak yeni esnek kutu, tablo kullanmaktan veya özel JS tabanlı düzen kodu yazmaktan daha hızlı olmalıdır.
Sayılardaki farkı görmek için eski ve yeni söz dizimi arasında bire bir karşılaştırma yaptım.
Eski ve yeni Flexbox karşılaştırması
- eski flexbox ve yeni flexbox (yedek)
- Sayfa başına 500 öğe
- Öğeleri yerleştirmek için sayfa yükleme maliyetini değerlendirme
- Her biri 3 çalıştırma üzerinden ortalama
- ölçülür. (mobil cihazlarda yaklaşık 10 kat daha yavaştır)
Eski flexbox: ~43,5 ms düzen maliyetleri
Yeni flexbox: ~18,2 ms düzen maliyetleri
Özet: Eski sürüm yeni sürüme kıyasla 2,3 kat daha yavaştır.
Bu durumda ne yapmanız gerekir?
Flexbox'u kullanırken her zaman yeni öğeler için içerik oluşturun: 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 ve sonraki sürümler, IE 11 ve sonraki sürümler ile Blackberry 10 ve sonraki sürümlerde bulunan yeni güncellenmiş flexbox. Birçok durumda, bazı eski mobil tarayıcıları desteklemek için eski flexbox'a geri dönebilirsiniz.
Kurallar değil, araçlar
Daha da önemlisi, önemli olanları optimize etmektir. Bir tür işlemi optimize etmek için zaman harcamadan önce her zaman zaman çizelgesini kullanarak darboğazlarınızı belirleyin.
Hatta Wilson ve Financial Times Labs ekibiyle iletişime geçerek Chrome DevTools'un sayfa düzeni performansı araçlarını kapsayanını iyileştirdik. Yakında bir öğenin yeniden düzen sınırını görüntüleme özelliğini ekleyeceğiz. Zaman çizelgesindeki düzen etkinlikleri, her düzenin kapsamı, kökü ve maliyetiyle ilgili ayrıntılarla yüklenir:
