Oluşturma performansı

Kullanıcılar, sitelerin ve uygulamaların iyi çalışmadığını fark eder. Bu nedenle, oluşturma performansını optimize etmek çok önemlidir!

Paul Lewis

Günümüzün web kullanıcıları, ziyaret ettikleri sayfaların etkileşimli ve sorunsuz olmasını bekler. Bu noktada zamanınızı ve çabanızı giderek daha fazla yoğunlaştırmanız gerekir. Sayfalar yalnızca hızlı yüklenmemelidir, 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ü, Sonraki Boyamayla Etkileşim (INP) metriğinin ölçümüdür. İyi bir INP, bir sayfanın kullanıcının ihtiyaçlarına istikrarlı ve güvenilir bir şekilde yanıt verdiği anlamına gelir.

Bir sayfanın hızlı görünmesini sağlamanın önemli bir bileşeni, kullanıcı etkileşimlerine yanıt olarak yürüttüğünüz JavaScript miktarıdır. Bununla birlikte, kullanıcıların beklentisi kullanıcı arayüzünde 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 ve kullanıcı deneyiminin hızlı ve güvenilir hissetmesi için bu çalışmanın mümkün olduğunca hızlı gerçekleşmesi 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ıştığından emin olmanız gerekir.

Cihaz yenileme hızlarıyla ilgili not

Cep telefonundan bir web sitesiyle etkileşim kuran bir kullanıcı.
Kullanıcı girişine duyarlı web siteleri oluşturmak söz konusu olduğunda, bir ekranın yenileme hızı önemli bir husustur.

Günümüzde çoğu cihaz ekranlarını saniyede 60 kez yeniliyor. Her yenileme gördüğünüz görsel çıktıyı oluşturur ve genellikle çerçeve olarak bilinir. Bir sonraki videoda çerçeve kavramı gösterilmektedir:

Chrome Geliştirici Araçları'nın performans panelinde gösterilen kareler. İmleç üst kısma yakın bir yerde bulunan film şeridi üzerinde ilerlerken, mobil gezinme menüsü "açık" durumuna geçerken her karenin büyütülmüş bir temsili ipucu içinde gösterilir.

Bir cihazın ekranı her zaman tutarlı bir hızda yenilenirken, bir cihazda çalışan uygulamalar her zaman bu yenileme hızıyla eşleşecek kadar 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 düşünülürse bazı hızlı hesaplamalar, tarayıcının her kareyi 16,66 milisaniye içinde ürettiğini ortaya çıkarabilir. Ancak gerçekte, tarayıcının her kare için kendi ek yükü vardır. Bu nedenle, tüm çalışmanızın 10 milisaniye içinde tamamlanması gerekir. Bu bütçeye ulaşamazsanız kare hızı düşer ve sayfa içerikleri ekranda titremeye başlar. Bu olay genellikle jank olarak adlandırılır.

Bununla birlikte, hedefleriniz, yapmak istediğiniz işin türüne göre değişir. 10 milisaniyelik eşiğe ulaşmak, iki nokta arasındaki bir dizi kare genelinde ekrandaki nesnelerin interpolasyonu olduğu animasyonlar için çok önemlidir. Kullanıcı arayüzündeki belirli değişiklikler söz konusu olduğunda (arasında hiç hareket olmadan bir durumdan diğerine geçiş), bu tür değişiklikleri kullanıcıya anında hisseden bir zaman aralığı içinde gerçekleştirmeniz önerilir. Bu gibi durumlarda 100 milisaniye sık bahsedilen bir rakamdır. 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 yavaşlamayı önlemek için animasyonların gerektirdiği çok sayıda kareyi ya da yalnızca 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, çalışmanız için çok önemlidir.

Piksel ardışık düzeni

Web geliştiricisi olarak bilmeniz ve dikkat etmeniz gereken beş temel alan vardır. Bu beş alan, en fazla kontrole sahip olduğunuz alanlardır ve her biri, pikselden ekrana ardışık düzende önemli bir noktayı temsil eder:

Beş adım içeren tam piksel ardışık düzeni: JavaScript, Stil, Düzen, Boyama ve Kompozit.
Resimde tam piksel ardışık düzeni.
  • JavaScript: JavaScript genellikle kullanıcı arayüzünde görsel değişikliklerle sonuçlanacak işleri işlemek için kullanılır. Örneğin, bu, jQuery'nin animate işlevi, bir veri kümesini sıralama veya sayfaya DOM öğeleri ekleme olabilir. Görsel değişiklikleri tetiklemek için JavaScript kesinlikle gerekli değildir. Bununla birlikte, CSS animasyonları, CSS geçişleri ve Web Animations API sayfa içeriklerini canlandırabilir.
  • Stil hesaplamaları: Bu, eşleşen seçicilere dayalı olarak hangi HTML öğelerinin hangi CSS kurallarına uygulandığını belirleme sürecidir. Örneğin .headline, headline sınıfını içeren class özellik değerine sahip tüm HTML öğeleri için geçerli olan bir CSS seçici örneğidir. Buradan, kurallar bilindikten sonra uygulanırlar ve her bir öğenin son stilleri hesaplanır.
  • Düzen: Tarayıcı, bir öğe için hangi kuralların geçerli olduğunu bildiğinde, öğelerin ne kadar yer kapladığı ve ekranın neresinde göründükleri gibi sayfanın geometrisini 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çta yukarı ve aşağı alt öğelerinin boyutlarını etkiler. Bu nedenle, tarayıcı için işlem oldukça karmaşık olabilir.
  • Boya: Boyama, pikselleri doldurma işlemidir. Burada metin, renkler, resimler, kenarlıklar, gölgeler ve temelde öğelerin sayfadaki düzenleri hesaplandıktan sonra görsel açıdan her açıdan çizim yapılır. Çizim genellikle katman olarak adlandırılan birden çok yüzey üzerinde yapılır.
  • Bileşik: Sayfanın bölümleri potansiyel olarak birden fazla katman üzerine çizildiğinden, sayfanın beklendiği gibi oluşturulması için bunların ekrana doğru sırada uygulanması gerekir. Hata, bir öğenin yanlış bir şekilde diğerinin üzerinde görünmesine neden olabileceğinden bu, özellikle birbiriyle çakışan öğeler için önemlidir.

Piksel ardışık düzeninin bu bölümlerinin her biri, animasyonlarda duraklamaya neden olma veya kullanıcı arayüzünde yapılacak tek bir görsel değişiklikler için bile karelerin boyanmasını geciktirme fırsatını temsil eder. Bu nedenle, kodunuzun tam olarak ardışık düzenin hangi bölümlerini tetiklediğini anlamak ve değişikliklerinizi yalnızca piksel ardışık düzeninin bunları oluşturmak için gereken bölümleriyle sınırlandırıp sınırlayamayacağınızı araştırmak önemlidir.

"Boya" ile birlikte "rasterize" teriminin kullanıldığını duymuş olabilirsiniz. Çünkü boyama iki görevdir:

  1. Çizim çağrılarının listesi oluşturuluyor.
  2. Pikseller dolduruluyor.

İkinci yönteme "kafesleme" adı verilir. Bu nedenle, Geliştirici Araçları'nda boyama kayıtlarını gördüğünüzde, pikselleştirmeyi dahil etmek olarak düşünmelisiniz. Bazı mimarilerde, çizim çağrılarının listesini oluşturma ve pikselleştirme farklı iş parçacıklarında gerçekleştirilir, ancak bu, geliştirici olarak sizin kontrolünüzde değildir.

Her karede hattın her yerine dokunmanız gerekmez. Aslında JavaScript, CSS veya Web Animasyonları API'si aracılığıyla görsel bir değişiklik yaptığınızda ardışık düzenin belirli bir çerçeve için normalde çalıştığı üç yol vardır.

1. JS / CSS > Stil > Düzen > Boyama > Kompozit

Adımların hiçbiri atlanmadan tam piksel ardışık düzeni.

Bir öğenin geometrisini (ör. genişlik, yükseklik veya konumunu) değiştiren (left ya da top CSS özellikleri gibi) bir "düzen" özelliğini 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 nihai öğelerin tekrar birleştirilmesi gerekir.

2. JS / CSS > Stil > Boya > Kompozit

Düzen adımı atlanmış piksel ardışık düzeni.

CSS'deki bir öğe için "salt boyama" özelliğini değiştirdiyseniz (örneğin, background-image, color veya box-shadow gibi özellikler) sayfada görsel güncelleme gerçekleştirmek için düzen adımı gerekli değildir. Mümkün olduğunda düzen adımını atlayarak, sonraki karenin üretilmesinde önemli ölçüde gecikmeye neden olabilecek, potansiyel olarak maliyetli düzen çalışmalarından kaçınmış olursunuz.

3. JS / CSS > Stil > Kompozit

Düzen ve boyama adımları atlanmış piksel ardışık düzeni.

Düzen veya boyama gerekmeyen bir özelliği değiştirirseniz tarayıcı doğrudan birleştirme adımına atlayabilir. Bu, bir sayfanın yaşam döngüsündeki animasyonlar veya kaydırma gibi yüksek basınç noktaları için piksel ardışık düzenindeki en ucuz ve en istenen yoldur. Eğlenceli bir gerçek: Chromium, sayfanın kaydırma işlemini, mümkün olduğunda yalnızca birleştirici iş parçacığında gerçekleşecek şekilde optimize eder. Diğer bir deyişle, bir sayfa yanıt vermiyor olsa bile, sayfayı kaydırarak daha önce ekrana çizilmiş olan bölümlerini görebilirsiniz.

Web performansı, gerekli işlerin verimliliğini mümkün olduğunca artırırken işten kaçınma sanatıdır. Çoğu durumda, tarayıcı ile çalışmak ilgilidir, tarayıcıya karşı değil. Daha önce ardışık düzende gösterilen işin işlem maliyeti açısından farklılık gösterdiğini, bazı görevlerin doğası gereği diğerlerinden daha pahalı olduğunu unutmamak gerekir.

Şimdi, iş akışının farklı bölümlerine yakından bakalım. Yaygın sorunlara ve bunları nasıl teşhis edip düzelteceğimize göz atacağız.

Tarayıcı Oluşturma Optimizasyonları

Udacity kursu ekran görüntüsü

Performans, kullanıcılar için önemlidir ve iyi kullanıcı deneyimleri oluşturmak için web geliştiricilerinin, kullanıcı etkileşimlerine hızlı tepki veren ve sorunsuz bir şekilde oluşturulan web siteleri oluşturmaları gerekir. Performans uzmanı Paul Lewis, olumsuzluğu yok etmenize ve saniyede 60 kare performansı sağlayan web uygulamaları oluşturmanıza yardımcı olabilir. Bu kursta, uygulamaların profilini çıkarmak ve optimum olmayan oluşturma performansının nedenlerini belirlemek için ihtiyaç duyduğunuz araçları edineceksiniz. Ayrıca, tarayıcının oluşturma ardışık düzenini de keşfedecek ve hızlı web siteleri oluşturmayı kolaylaştıran kalıpları keşfedeceksiniz. Böylece kullanıcılar, kullanmaktan keyif alacakları hızlı web siteleri oluşturmayı kolaylaştıracak.

Udacity üzerinden sunulan bu ücretsiz kursa dilediğiniz zaman katılabilirsiniz.