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üzde web'i kullananlar, ziyaret ettikleri sayfaların etkileşimli ve sorunsuz olmasını bekler. Zamanınızı ve çabanızı giderek daha fazla bu alana odaklamanız gerekir. Sayfalar yalnızca hızlı yüklenmekle kalmamalı, aynı zamanda yaşam döngülerinin tamamı boyunca kullanıcı girişlerine hızlı yanıt vermelidir. Aslında Interaction to Next Paint (INP) metriği, kullanıcı deneyiminin bu yönünü ölçer. İyi bir INP, sayfanın kullanıcının ihtiyaçlarına tutarlı ve güvenilir bir şekilde yanıt verdiğini gösterir.
Bir sayfanın hızlı olmasını sağlayan önemli bir bileşen, kullanıcı etkileşimlerine yanıt olarak yürüttüğünüz JavaScript miktarıdır. Ancak 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ışmaların sonucudur. Kullanıcı deneyiminin hızlı ve güvenilir olması için bu çalışmaların mümkün olduğunca hızlı 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 (ayrıca dahil ettiğiniz diğer üçüncü taraf kodlarının) olabildiğince verimli şekilde çalıştığından emin olmanı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 çıktıyı oluşturur ve genellikle kare olarak bilinir. Aşağıdaki videoda kare kavramı gösterilmektedir:
Bir cihazın ekranı her zaman tutarlı bir hızda yenilenir. Ancak cihazda çalışan uygulamalar, bu yenileme hızına uygun yeterli kare üretemeyebilir. Örneğin, çalışan bir animasyon veya geçiş varsa ekran her yenilendiğinde bir kare oluşturmak için tarayıcının 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, basit bir hesaplama yaparak tarayıcının her kareyi oluşturmak için 16,66 milisaniyelik bir süreye sahip olduğunu görebiliriz. Ancak gerçekte, tarayıcı her kare için kendi yükü olduğundan tüm çalışmanı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 titreşir. Bu fenomene genellikle jank denir.
Ancak hedefleriniz, yapmaya çalıştığınız işin türüne göre değişir. Ekrandaki nesnelerin iki nokta arasındaki bir dizi karede interpole edildiği animasyonlar için 10 milisaniye eşiğini aşmak çok önemlidir. Kullanıcı arayüzünde ayrı değişiklikler söz konusu olduğunda (yani, aralarında hareket olmadan bir durumdan diğerine geçme) bu tür değişiklikleri kullanıcı için anlık olacak şekilde yapmanız önerilir. Bu gibi durumlarda 100 milisaniye sıklıkla 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.
Hedefiniz ne olursa olsun (ör. animasyonlarda takılma olmaması için gereken çok sayıda kareyi üretmek veya kullanıcı arayüzünde mümkün olduğunca hızlı bir şekilde ayrı bir görsel değişiklik yapmak) 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ışmanızda bilmeniz ve dikkat etmeniz gereken beş önemli alan vardır. En fazla kontrol sahibi olduğunuz bu beş alan, piksellerden ekrana giden ardışık düzendeki önemli noktaları temsil eder:
- JavaScript: JavaScript genellikle kullanıcı arayüzünde görsel değişikliklere neden olacak işlemleri 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'in kullanılması zorunlu değildir: CSS animasyonları, CSS geçişleri ve Web Animasyonları API'si sayfa içeriklerini animasyonlu hale getirebilir. - 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. Ardından, kurallar belirlendikten sonra uygulanır ve her öğenin nihai stilleri hesaplanır. - Düzen: Tarayıcı, bir öğe için hangi kuralların geçerli olduğunu öğrendikten sonra sayfanın geometrisini (ör. öğelerin kapladığı alan ve ekranda nerede göründükleri) hesaplamaya başlayabilir. Web'in düzen modeli, bir öğenin diğer öğeleri etkileyebileceği anlamına gelir. Örneğin,
<body>öğesinin genişliği genellikle ağacın üst kısmından alt kısmına kadar alt öğelerinin boyutlarını etkiler. Bu nedenle, işlem tarayıcı için oldukça karmaşık olabilir. - Boya: Boya, pikselleri doldurma işlemidir. Sayfadaki düzeni hesaplandıktan sonra metin, renk, resim, kenarlıklar, gölgeler ve temel olarak öğelerin her görsel yönünü çizmeyi içerir. Çizim genellikle katman adı verilen birden fazla yüzeyde yapılır.
- Kompozit: Sayfanın bölümleri muhtemelen birden fazla katmana çizildiğinden, sayfanın beklendiği gibi oluşturulması için bu bölümlerin ekrana doğru sırada uygulanması gerekir. Bu, özellikle birbiriyle çakışan öğeler için önemlidir. Bir hata, bir öğenin yanlışlıkla diğerinin üstünde görünmesine neden olabilir.
Pixel ardışık düzeninin bu bölümlerinin her biri, animasyonlarda takılmalara neden olma veya kullanıcı arayüzünde ayrı ayrı görsel değişikliklerde bile karelerin boyanmasını geciktirmeye yol açar. Bu nedenle, kodunuzun ardışık düzenin tam olarak hangi bölümlerini tetiklediğini anlamak ve değişikliklerinizi yalnızca pikselleri oluşturmak için gerekli olan piksel ardışık düzeni bölümleriyle sınırlandırıp sınırlandıramayacağınızı araştırmak önemlidir.
"Boya" ile birlikte "rasterize etme" terimini duymuş olabilirsiniz. Bunun nedeni, boyamanın aslında iki görevden oluşmasıdır:
- Çizim çağrılarının listesi oluşturulur.
- Pikselleri doldurma.
İkincisine "rasterleştirme" denir. Bu nedenle, DevTools'ta boya kayıtlarını gördüğünüzde rasterleştirmenin dahil olduğunu varsayabilirsiniz. Bazı mimarilerde, çizim çağrıları ve rasterleştirme listesi oluşturma işlemi farklı iş parçalarında yapılır ancak bu işlemler geliştirici olarak sizin kontrolünüzde değildir.
Her karede ardışık düzenin her bölümüne dokunmanız gerekmez. Aslında, JavaScript, CSS veya Web Animasyonlar API'si ile görsel bir değişiklik yaptığınızda ardışık düzenin belirli bir kare için normalde üç şekilde oynatılması mümkündür.
1. JS / CSS > Stil > Düzen > Boya > Kompozit
Bir öğenin genişliği, yüksekliği veya konumu gibi geometrisini değiştiren "düzen" özelliklerini (ör. left veya top CSS özellikleri) değiştirirseniz tarayıcının diğer tüm öğeleri kontrol etmesi ve sayfayı "yeniden akması" gerekir. Etkilenen tüm alanların yeniden boyanması ve boyanmış nihai öğelerin tekrar birleştirilmesi gerekir.
2. JS / CSS > Stil > Boya > Kompozit
CSS'de bir öğenin "yalnızca boyama" özelliğini (ör. background-image, color veya box-shadow gibi özellikler) değiştirdiyseniz sayfaya görsel bir güncelleme uygulamak için düzen adımını uygulamanız gerekmez. Mümkün olduğunda düzen adımını atlayarak, sonraki karenin oluşturulmasında önemli gecikmeye neden olabilecek potansiyel olarak maliyetli düzen çalışmalarından kaçınabilirsiniz.
3. JS / CSS > Stil > Beste
Düzenleme veya boyama gerektirmeyen bir özelliği değiştirirseniz tarayıcı doğrudan oluşturma adımına atlayabilir. Bu, sayfanın yaşam döngüsünde animasyon veya kaydırma gibi yüksek baskı noktaları için piksel ardışık düzenindeki en ucuz ve en çok tercih edilen yoldur. İlginç bir bilgi: Chromium, sayfanın kaydırılmasını mümkün olduğunda yalnızca oluşturucu iş parçacığında gerçekleşecek şekilde optimize eder. Yani bir sayfa yanıt vermese bile sayfayı kaydırabilir ve daha önce ekrana çizilmiş olan bölümlerini görebilirsiniz.
Web performansı, gerekli çalışmaların verimliliğini mümkün olduğunca artırırken çalışmalardan kaçınma sanatıdır. Çoğu durumda, tarayıcıya karşı değil, tarayıcıyla birlikte çalışmanız gerekir. Daha önce ardışık düzende gösterilen çalışmanın, hesaplama maliyeti açısından farklı olduğunu unutmayın. Bazı görevler, yapıları gereği diğerlerinden daha pahalıdır.
Akıştaki farklı bölümlere göz atalım. Yaygın sorunlara ve bunların nasıl teşhis edilip düzeltileceğine göz atacağız.
Tarayıcı Oluşturma Optimizasyonları
Performans, kullanıcılar için önemlidir. Web geliştiricilerin, iyi kullanıcı deneyimleri oluşturmak için kullanıcı etkileşimlerine hızlı yanıt veren ve sorunsuz bir şekilde oluşturulan web siteleri oluşturması gerekir. Performans uzmanı Paul Lewis, takılmaları ortadan kaldırmanıza ve saniyede 60 kare performans sağlayan web uygulamaları oluşturmanıza yardımcı oluyor. Bu kursu tamamladığınızda, uygulamaların profilini oluşturmak ve optimum olmayan oluşturma performansının nedenlerini belirlemek için ihtiyaç duyduğunuz araçlara sahip 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ı ortaya çıkaracaksınız.
Udacity tarafından sunulan bu ücretsiz kursa istediğiniz zaman katılabilirsiniz.