Kullanıcılar, sitelerin ve uygulamaların iyi çalışmadığını fark eder. Bu nedenle, oluşturma performansını optimize etmek çok önemlidir.
Günümüzün web kullanıcıları, ziyaret ettikleri sayfaların etkileşimli ve sorunsuz olmasını bekler. Bu nedenle, zamanınızı ve çabanızı bu konuya daha fazla odaklamanız gerekir. Sayfalar yalnızca hızlı yüklenmekle kalmamalı, aynı zamanda tüm yaşam döngüleri boyunca kullanıcı girişlerine hızlı yanıt vermelidir. Aslında kullanıcı deneyiminin bu yönü, Interaction to Next Paint (INP) metriğinin ölçtüğü şeydir. İyi bir INP, sayfanın kullanıcının ihtiyaçlarına tutarlı ve güvenilir bir şekilde yanıt verdiği anlamına gelir.
Bir sayfanın hızlı hissettirmesini sağlayan önemli bir bileşen, kullanıcı etkileşimlerine yanıt olarak çalıştırdığınız JavaScript miktarı olsa da kullanıcıların beklediği şey, kullanıcı arayüzündeki görsel değişikliklerdir. Kullanıcı arayüzündeki görsel değişiklikler, genellikle toplu olarak oluşturma olarak adlandırılan çeşitli çalışma türlerinin sonucudur. Kullanıcı deneyiminin hızlı ve güvenilir olması için bu çalışmanın mümkün olduğunca hızlı bir şekilde yapılması gerekir.
Kullanıcı etkileşimlerine hızlı yanıt veren sayfalar yazmak için HTML, JavaScript ve CSS'nin tarayıcı tarafından nasıl işlendiğini anlamanız ve yazdığınız kodun (ve eklediğiniz diğer üçüncü taraf kodlarının) mümkün olduğunca verimli bir şekilde çalışmasını sağlamanız gerekir.
Cihaz yenileme hızlarıyla ilgili not
Günümüzde çoğu cihaz, ekranını saniyede 60 kez yeniler. Her yenileme, gördüğünüz görsel çıkışı üretir ve genellikle kare olarak bilinir. Aşağıdaki videoda kare kavramı gösterilmektedir:
Cihazın ekranı her zaman tutarlı bir hızda yenilenir ancak cihazda çalışan uygulamalar her zaman bu yenileme hızına uygun sayıda kare üretemeyebilir. Örneğin, çalışan bir animasyon veya geçiş varsa tarayıcının, ekran her yenilendiğinde bir kare oluşturmak için cihazın yenileme hızıyla eşleşmesi gerekir.
Tipik bir ekranın saniyede 60 kez yenilendiği göz önüne alındığında, tarayıcının her kareyi üretmek için 16,66 milisaniyesi olduğu basit bir hesaplamayla anlaşılabilir. Ancak gerçekte tarayıcının her kare için kendi ek yükü vardır. Bu nedenle, tüm çalışmalarınızın 10 milisaniye içinde tamamlanması gerekir. Bu bütçeyi karşılayamadığınızda kare hızı düşer ve sayfa içerikleri ekranda titrer. Bu durum genellikle takılma olarak adlandırılır.
Ancak hedefleriniz, yapmaya çalıştığınız işin türüne göre değişir. Ekranda nesnelerin iki nokta arasındaki bir dizi karede interpolasyonunun yapıldığı animasyonlar için 10 milisaniyelik eşiğin karşılanması çok önemlidir. Kullanıcı arayüzündeki ayrı değişiklikler söz konusu olduğunda (yani, arada herhangi bir hareket olmadan bir durumdan diğerine geçiş) bu tür değişiklikleri kullanıcıya anında gibi gelen bir zaman aralığında gerçekleştirmeniz önerilir. Bu gibi durumlarda 100 milisaniye sıkça belirtilen bir değerdir ancak INP metriğinin "iyi" eşiği, farklı özelliklere sahip daha geniş bir cihaz yelpazesine uyum sağlamak için 200 milisaniye veya daha düşüktür.
Hedefleriniz ne olursa olsun (ister animasyonların takılmayı önlemek için gerektirdiği birçok kareyi üretmek ister kullanıcı arayüzünde mümkün olduğunca hızlı bir şekilde ayrı bir görsel değişiklik üretmek olsun), tarayıcının piksel ardışık düzeninin nasıl çalıştığını anlamak işiniz için çok önemlidir.
Piksel ardışık düzeni
Web geliştiricisi olarak çalışırken bilmeniz ve dikkat etmeniz gereken beş ana alan vardır. Bu beş alan, en çok kontrol sahibi olduğunuz alanlardır ve her biri, pikselden ekrana giden yolda önemli bir noktayı temsil eder:
- JavaScript: JavaScript genellikle kullanıcı arayüzünde görsel değişikliklere neden olacak işleri gerçekleştirmek için kullanılır. Örneğin, jQuery'nin
animateişlevi, bir veri kümesini sıralama veya sayfaya DOM öğeleri ekleme olabilir. Görsel değişiklikleri tetiklemek için JavaScript kullanmak şart değildir: CSS animasyonları, CSS geçişleri ve Web Animations API, sayfa içeriklerini canlandırabilir. - Stil hesaplamaları: Bu, eşleşen seçicilere göre hangi CSS kurallarının hangi HTML öğeleri için geçerli olduğunu belirleme işlemidir. Örneğin,
.headline,headlinesınıfını içeren birclassözellik değerine sahip tüm HTML öğeleri için geçerli olan bir CSS seçici örneğidir. Buradan, kurallar bilindikten sonra uygulanır ve her öğe için nihai stiller hesaplanır. - Düzen: Tarayıcı, bir öğe için hangi kuralların geçerli olduğunu öğrendikten sonra sayfanın geometrisini (ör. öğelerin ne kadar yer kapladığı ve ekranda nerede göründüğü) hesaplamaya başlayabilir. Web'in düzen modeli, bir öğenin diğerlerini etkileyebileceği anlamına gelir. Örneğin,
<body>öğesinin genişliği genellikle ağaçtaki tüm alt öğelerinin boyutlarını etkiler. Bu nedenle, işlem tarayıcı için oldukça karmaşık olabilir. - Boyama: Boyama, pikselleri doldurma işlemidir. Sayfadaki düzenleri hesaplandıktan sonra metin, renk, resim, kenarlık, gölge ve temelde öğelerin her görsel yönünün çizilmesini içerir. Çizim genellikle katman adı verilen birden fazla yüzeyde yapılır.
- Bileşik: Sayfanın parçaları muhtemelen birden fazla katmana çizildiğinden, sayfanın beklendiği gibi oluşturulması için ekrana doğru sırada uygulanmaları gerekir. Bu, özellikle birbiriyle çakışan öğeler için önemlidir. Çünkü bir hata, bir öğenin diğerinin üzerinde yanlış şekilde görünmesine neden olabilir.
Piksel ardışık düzeninin bu bölümlerinin her biri, animasyonlarda takılma oluşturma veya kullanıcı arayüzündeki ayrı görsel değişiklikler için bile karelerin boyanmasını geciktirme fırsatı sunar. Bu nedenle, kodunuzun piksel ardışık düzeninin tam olarak hangi bölümlerini tetiklediğini anlamak ve değişikliklerinizi yalnızca bunları oluşturmak için gerekli olan piksel ardışık düzeni bölümleriyle sınırlayıp sınırlayamayacağınızı araştırmak önemlidir.
"Rasterleştirme" teriminin "boyama" ile birlikte kullanıldığını duymuş olabilirsiniz. Bunun nedeni, boyama işinin aslında iki görevden oluşmasıdır:
- Çekim çağrısı listesi oluşturma
- Pikseller dolduruluyor.
İkincisine "rasterleştirme" denir. Bu nedenle, Geliştirici Araçları'nda boyama kayıtları gördüğünüzde rasterleştirme de dahil olduğunu düşünmelisiniz. Bazı mimarilerde, çekim çağrısı listesinin oluşturulması ve rasterleştirme farklı iş parçacıklarında yapılır ancak bu, geliştirici olarak sizin kontrolünüzde değildir.
Her karede ardışık düzenin her bölümüne dokunmanız her zaman gerekmez. Aslında, JavaScript, CSS veya Web Animasyonları API'si ile görsel bir değişiklik yaptığınızda, belirli bir kare için ardışık düzen normalde üç şekilde çalışır.
1. JS/CSS > Stil > Düzen > Boyama > Birleştirme
Bir öğenin genişlik, yükseklik veya konumu gibi geometrisini değiştiren bir "düzen" özelliğini (ör. left veya top CSS özellikleri) değiştirirseniz tarayıcının diğer tüm öğeleri kontrol etmesi ve sayfayı "yeniden düzenlemesi" gerekir. Etkilenen tüm alanların yeniden boyanması ve boyanan son öğelerin tekrar birleştirilmesi gerekir.
2. JS / CSS > Stil > Boyama > Birleştirme
CSS'de bir öğenin "yalnızca boyama" özelliğini (ör. background-image, color veya box-shadow gibi özellikler) değiştirdiyseniz sayfada görsel bir güncelleme yapmak için düzen adımı gerekli değildir. Mümkün olduğunda düzen adımını atlayarak, bir sonraki kareyi oluştururken önemli bir gecikmeye neden olabilecek, potansiyel olarak maliyetli düzen çalışmalarından kaçınmış olursunuz.
3. JS/CSS > Stil > Birleştirme
Ne düzen ne de boyama gerektiren bir özelliği değiştirirseniz tarayıcı doğrudan birleştirme adımına geçebilir. Bu, bir sayfanın yaşam döngüsündeki animasyonlar veya kaydırma gibi yüksek baskı noktaları için piksel ardışık düzenindeki en ucuz ve en çok tercih edilen yoldur. Eğlenceli bilgi: Chromium, sayfanın kaydırılmasını optimize ederek mümkün olduğunda yalnızca birleştirici iş parçacığında gerçekleşmesini sağlar. Bu, sayfa yanıt vermese bile sayfayı kaydırıp daha önce ekrana çizilen kısımlarını görebileceğiniz anlamına gelir.
Web performansı, işten kaçınma ve gerekli işlerin verimliliğini mümkün olduğunca artırma sanatıdır. Çoğu durumda, tarayıcıya karşı değil, tarayıcıyla birlikte çalışmak gerekir. Daha önce ardışık düzende gösterilen işlerin hesaplama maliyeti açısından farklılık gösterdiğini unutmayın. Bazı görevler doğası gereği diğerlerinden daha maliyetlidir.
Şimdi ardışık düzenin farklı bölümlerini inceleyelim. Yaygın sorunlara ve bunların nasıl teşhis edilip düzeltileceğine göz atacağız.
Tarayıcıda oluşturma optimizasyonları
Performans, kullanıcılar için önemlidir. İyi kullanıcı deneyimleri oluşturmak için web geliştiricilerin, kullanıcı etkileşimlerine hızlı yanıt veren ve sorunsuz şekilde oluşturulan web siteleri oluşturması gerekir. Performans uzmanı Paul Lewis, duraklamaları ortadan kaldırmanıza ve saniyedeki kare sayısı (FPS) performansını koruyan web uygulamaları oluşturmanıza yardımcı olmak için burada. Bu kursu tamamladığınızda, uygulamaların profilini çıkarmak ve yetersiz oluşturma performansının nedenlerini belirlemek için gereken araçları öğrenmiş olacaksınız. Ayrıca tarayıcının oluşturma ardışık düzenini keşfedecek ve kullanıcıların keyifle kullanacağı hızlı web siteleri oluşturmayı kolaylaştıran kalıpları öğreneceksiniz.
Bu, Udacity üzerinden sunulan ücretsiz bir kurstur ve istediğiniz zaman katılabilirsiniz.