Boya kullanmaktan kaçınma, özellikle mobil cihazlarda kusursuz bir kare hızı elde etmek için çok önemlidir. Ancak bazen boyalar en sıra dışı yerlerde ortaya çıkar. Bu makalede, animasyonlu GIF'lerin neden gereksiz boyalara neden olabileceği ve uygulayabileceğiniz son derece basit düzeltme ele alınmaktadır.
Sevgi katmanları
Bildiğiniz gibi modern tarayıcılar, DOM öğesi gruplarını katmanlar adı verilen ayrı "görüntülere" boyayabilir. Bazen tüm sayfa için tek bir katman bulunur, bazen yüzlerce hatta nadiren de olsa binlerce katman vardır!
DOM öğeleri bir katman halinde birlikte gruplandırıldığında ve öğelerden biri görsel olarak değiştiğinde, yalnızca değiştirilen öğeyi değil, katmanda değiştirilen öğeyle çakışan diğer tüm öğeleri de boyamak zorunda kalırız. Bir şeyin bir başkasının üzerine boyanması, üzerine yazılan piksellerin sonsuza kadar etkin bir şekilde "kaybolmasına" neden olur. Orijinal pikselleri geri istiyorsanız, bunları yeniden boyamanız gerekir.
Bu nedenle, bazen bir öğeyi diğerlerinden izole etmek isteriz. Böylece, boyandığında değişmemiş diğer öğeleri yeniden boyamamız gerekmez. Örneğin, sabit bir sayfa başlığını kaydırılabilir içerikle birleştirdiğinizde, yeni görünen içeriğin yanı sıra içerik kaydırıldığında başlığı da yeniden boyamanız gerekir. Başlığı ayrı bir katmana yerleştirerek tarayıcı kaydırmayı optimize edebilir. Kaydırdığınızda tarayıcı, muhtemelen GPU'nun yardımıyla katmanları hareket ettirebilir ve iki katmanın da yeniden boyanmasını önleyebilir.
Her bir ek katman, bellek tüketimini artırır ve performans ek yükünü artırır. Dolayısıyla, amaç, iyi bir performans korurken sayfayı mümkün olduğunca az sayıda katman halinde gruplandırmaktır.
Bunların animasyonlu GIF'lerle ilgisi nedir?
Şimdi bu resme bakalım:
Bu, basit bir uygulama için olası bir katman kurulumudur. Burada dört katman vardır: Bunlardan üçü (2. ve 4. katmanlar) arayüz öğeleridir; arka katman, animasyonlu GIF olan bir yükleyicidir. Normal akışta, uygulamanız yüklenirken yükleyiciyi (1. katman) gösteriyorsunuz. Daha sonra, her şey tamamlandığında diğer katmanları gösteriyorsunuz. Ama şu temel nokta şudur: Animasyonlu GIF'i gizlemeniz gerekir.
Ama neden gizlemem gerekiyor?!
Güzel soru. Kusursuz bir dünyada tarayıcı sizin için GIF'in görünürlüğünü kontrol eder ve otomatik olarak boyamaktan kaçınır. Maalesef animasyonlu GIF'in belirsiz veya ekranda görünür olup olmadığını kontrol etmek genellikle boyamaktan daha pahalıdır. Bu yüzden resim boyanır.
En iyi durumda GIF kendi katmanındadır ve tarayıcının bunu yalnızca boyayıp GPU'ya yüklemesi gerekir. Ancak en kötü durumda tüm öğeleriniz tek bir katmanda gruplandırılabilir ve tarayıcının her bir öğeyi yeniden boyaması gerekir. İşlem tamamlandığında da her şeyi GPU'ya yüklemesi gerekir. Kullanıcı GIF'i bile göremese de, tüm bunlar her GIF karesinde gerçekleşir!
CPU'lar ve GPU'lar daha güçlü olduğundan ve ikisi arasında veri aktarımı yapmak için bolca bant genişliği olduğundan, masaüstü bilgisayarlarda bu tür görüntü sorunlarından kurtulabilirsiniz. Ancak mobil cihazlarda boyama işlemi çok pahalı olduğundan çok dikkatli olmalısınız.
Bu durum hangi tarayıcıları etkiler?
Çoğunlukla olduğu gibi, davranışlar tarayıcılar arasında farklılık gösterir. Bugün Chrome, Safari ve Opera, GIF'i gizlenmiş olsa bile yeniden boyanıyor. Diğer yandan Firefox, GIF'in belirsiz olduğunu ve yeniden boyanmasına gerek olmadığını anlar. Internet Explorer hâlâ kara kutu gibi görünüyor ve IE11'de bile, F12 araçları hâlâ geliştirilme aşamasında olduğu için yeniden boyamanın yapılıp yapılmadığına dair hiçbir gösterge yok.
Böyle bir sorunla karşılaştığımı nasıl anlayabilirim?
En kolay yol, Chrome Geliştirici Araçları'ndaki "Boya dikdörtgenlerini göster" seçeneğini kullanmaktır. Geliştirici Araçları'nı yükleyin, sağ alt köşedeki dişliye (
) basın ve Oluşturma bölümünün altından Boya dikdörtgenlerini göster'i seçin.
Şimdi tek yapmanız gereken şuna benzer kırmızı bir dikdörtgen bulmaktır:
Ekrandaki küçük kırmızı kutu, Chrome'un bir şeyi yeniden boyadığını gösterir. Diğer öğelerin arkasında gizlenmiş bir yükleyici GIF'i olduğunu biliyorsunuzdur. Dolayısıyla, bunun gibi kırmızı bir kutu gördüğünüzde, görünür öğeleri gizlemeniz ve animasyonlu GIF'in hareket halinde kalıp kalmadığını kontrol etmeniz gerekir. Bu durumda, display: none veya visibility: hidden öğesini veya üst öğesine uygulamak için birkaç CSS ya da JavaScript'i açmanız gerekir. Yalnızca bir arka plan resmiyse kaldırmanız gerekir.
Canlı bir sitede bu davranışın bir örneğini görmek istiyorsanız Allegro'ya göz atın. Burada, her ürünün resminde açıkça gizlenmiş değil, gizlenmiş bir yükleyici GIF dosyası bulunur.
Sonuç
60 fps'ye ulaşmak, yalnızca sayfayı oluşturmak için gerekenleri yapıp daha fazlasını yapmamak anlamına gelir. Fazla boyaları silmek, bu hedefe ulaşmada önemli bir adımdır. Çalışmada bırakılan animasyonlu GIF'ler, gereksiz boyama işlemlerini tetikleyebilir. Bu tür boyama işlemlerini, Geliştirici Araçları'nın Boya dikdörtgenleri göster aracıyla kolayca bulup hata ayıklayabilirsiniz.
Bu animasyonlu yavru kedi yükleyici GIF'ini sonsuza kadar çalıştırmadın, değil mi?