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'in kullanıcıları, ziyaret ettikleri sayfaların etkileşimli olmasını ve zamanınızı ve çabanızı gittikçe daha fazla odaklamanız gerekir. Sayfalar hızlı yüklenmeli, kullanıcı girişine de hızlı yanıt vermelidir. araç ve teknik inceledik. Hatta kullanıcı deneyiminin bu yönü, Sonraki Boyamayla Etkileşim (INP) metriğinin ölçtüğü değerdir. İyi INP, bir sayfanın kullanıcının isteğine tutarlı ve güvenilir şekilde yanıt verdiği anlamına gelir. gerekiyor.
Bir sayfayı hızlı hissettiren başlıca unsurlardan biri de Kullanıcı etkileşimlerine yanıt olarak yürüttüğünüz JavaScript, kullanıcıların kullanıcı arayüzünde yapılan görsel değişikliklerdir. Bir kullanıcıda yapılan görsel değişiklikler arayüz, genellikle birçok farklı çalışma türünün bir sonucudur ve oluşturma olanağı sunar. Bu işlemin hızlı ve güvenilir bir kullanıcı deneyimi sunmaktır.
Kullanıcı etkileşimlerine hızla yanıt veren sayfalar yazmak için aşağıdakileri bilmeniz gerekir: ve CSS'nin tarayıcı tarafından nasıl işlendiğini ve yazdığınız kod ve eklediğiniz diğer tüm üçüncü taraf kodları verimli bir şekilde kullanabilirsiniz.
Cihaz yenileme hızlarıyla ilgili not
Günümüzde çoğu cihaz, ekranını saniyede 60 kez yeniliyor. Her yenileme gördüğünüz görsel çıktıyı üretir ve genellikle çerçeve olarak bilinir. aşağıdaki videoda çerçeve kavramı gösterilmektedir:
Cihaz ekranı her zaman sabit bir hızda yenilenir. Ancak, bir cihazda çalıştırılması her zaman yeterli kare üretemeyebilir. eşleşmenizi sağlar. Örneğin, videonuzdaki bir animasyon veya geçiş bir güncelleme oluşturmak için tarayıcının cihazın yenileme hızıyla eşleşmesi gerekir. kare karesinin tamamını kullanır.
Tipik bir ekranın saniyede 60 kez yenilendiği düşünüldüğünde, tarayıcının her kareyi oluşturmak için 16,66 milisaniye olduğunu ortaya çıkaracaktır. Ancak gerçekte, tarayıcının her kare için kendi ek yükü vardır. Dolayısıyla, çalışmanızın 10 milisaniye içinde tamamlanması gerekir. Başarısız olduğunuzda kare hızı düşer ve sayfa içeriğinin ekranda titremesi sağlanır. Bu bu olgu genellikle jank olarak adlandırılır.
Ancak hedefleriniz, yapmaya çalıştığınız işin türüne göre değişir. 10 milisaniye eşiğine ulaşmak animasyonlar için çok önemlidir. iki kare arasındaki bir dizi karede ara değer olarak hesaplanır. puan. Kullanıcı arayüzünde gerçekleştirilen münferit değişikliklerle ilgili olarak, aralarında herhangi bir hareket olmadan bir eyaletten diğerine bu değişiklikleri anında olan bir zaman aralığında yapmanızı önerdi. gösterir. Bu gibi durumlarda, 100 milisaniye sık alıntılanmış bir sayıdır, ancak INP metriğinin "iyi" değeri 200 milisaniye veya daha küçük bir Çeşitli özelliklere sahip daha geniş bir cihaz yelpazesini kullanabilirsiniz.
Hedefiniz ne olursa olsun, animasyonların istediğiniz kadar ihlâlden kaçınmak veya görsel açıdan sadece göze çarpan en kısa sürede kullanıcı arayüzünüze açın. Böylece, tarayıcının pikselinin ne kadar önemli olduğunu öğrendiniz.
Piksel ardışık düzeni
İş hayatınızda bilmeniz ve dikkat etmeniz gereken beş temel alan vardır: bir web geliştiricisi olarak çalıştım. Bu beş alanda en çok vardır ve her biri pikselden ekrana ardışık düzende bir önemli noktayı temsil eder:
- JavaScript: JavaScript genellikle
bazı görsel değişikliklere değineceğiz. Örneğin, bu, jQuery'nin
animateişlevini kullanabilir, veri kümesini sıralayabilir veya sayfaya DOM öğeleri ekleyebilirsiniz. Bununla birlikte, görsel değişiklikleri tetiklemek için JavaScript'in kullanılması şart değildir: CSS animasyonlar, CSS geçişleri ve Web Animasyonları API'si şunları yapabilir: animasyon ekler. - Stil hesaplamaları: Bu, hangi CSS kurallarının bulunduğunu tespit etme sürecidir
eşleşen seçicilere göre hangi HTML öğelerine uygulanır? Örneğin,
.headline, tüm HTML öğeleri için geçerli olan bir CSS seçici örneğidir veheadlinesınıfını içerenclassözellik değerine sahip. Başlangıç fiyatı kuralları öğrenildiğinde uygulanır ve her bir kural için öğesi hesaplanır. - Düzen: Tarayıcı bir öğeye hangi kuralların uygulandığını öğrendiğinde,
sayfa geometrisini (ör. ne kadar alan elemanları içeren öğe sayısı)
ve ekranda nerede
göründüklerini. Web'in düzen modeli,
etkileyebileceğini öğrendiniz. Örneğin,
<body>öğesinin genişliği öğesi genellikle alt öğelerinin boyutlarını, ve aşağıya doğru inceleyebilirsiniz. Bu nedenle, işlem tarayıcı için oldukça karmaşık olabilir. - Boya: Boyama, pikselleri doldurma işlemidir. Bu işlem, her bir İş Listesi’nin metin, renk, resim, kenarlıklar, gölgeler öğelerin en boy oranını gösterir. Çizim genellikle katman olarak adlandırılan birden fazla yüzey üzerinde yapılır.
- Bileşik: Sayfanın bölümleri potansiyel olarak katmanın ekrana doğru sırayla uygulanması gerekir. gerektiği gibi oluşturulur. Bu, özellikle de ekibinizin çünkü bir hata, bir öğenin görünmesiyle sonuçlanabileceğinden üzerine gelerek yanlış bir ad belirleyebilirsiniz.
Piksel ardışık düzeninin bu bölümlerinin her biri, kullanıcılara animasyonlarda engel oluşturabilir veya ayrı görsellik olsa bile karelerin boyanmasını geciktirebilir. bazı değişiklikler var. Bu nedenle, bir riskin nasıl ortaya çıkacağını Ardışık düzeninizin hangi kısımlarının tetiklediğini ve bunların değişikliklerinizi piksel ardışık düzeninin yalnızca piksel ardışık düzeninin oluşturmaktır.
"Rasterize" terimini duymuş olabilirsiniz birlikte kullanılır. Bu Çünkü resmin aslında iki görev vardır:
- Çekim çağrıları listesi oluşturuluyor.
- Pikseller dolduruluyor.
İkincisi "rasterleştirme" olarak adlandırılır. Böylece, boyama kayıtlarını Bunu pikselleştirmeyi de dahil olarak düşünebilirsiniz. Bazılarında ve pikselleştirme listesi oluşturma ve pikselleştirme, ancak geliştirici olarak bu konu sizin kontrolünüzde değildir.
Her karede ardışık düzenin her bölümüne her zaman dokunmanız gerekmez. Öyle ki, belirli bir süre için ardışık düzenin normal olarak faaliyet gösterdiği üç yol vardır. çerçevesini kullanarak görsel bir değişiklik yaptığınızda (ör. JavaScript, CSS veya Web Animasyonlar API'si.
1. JS / CSS > Stil > Düzen > Boya > Alaşım
Bir "düzeni" değiştirirseniz özelliği gibi bir özellik,
genişlik, yükseklik veya konumu (left veya top CSS'si gibi) gibi geometri
özellikleri) içeriyorsa tarayıcının diğer tüm öğeleri kontrol etmesi ve "yeniden düzenleme" "the"
sayfasını ziyaret edin. Etkilenen alanların yeniden boyanması ve son olarak boyanın
bu öğelerin yeniden bir araya getirilmesi gerekir.
2. JS / CSS > Stil > Boya > Alaşım
"Sadece boyama"yı değiştirdiyseniz özelliği (örneğin,
background-image, color veya box-shadow gibi özellikler: düzen adımı
sayfada görsel güncelleme yapılması gerekmez. Düzeni atlayarak
adımını atmalısınız.
bir sonraki karenin üretilmesinde
önemli ölçüde gecikmeye neden oldu.
3. JS / CSS > Stil > Alaşım
Düzen veya boyama gerekmeyen bir özelliği değiştirirseniz tarayıcı doğrudan birleştirme adımına geçebiliriz. Bu, en ucuz ve en ucuz bir grafikteki yüksek basınç noktaları için piksel ardışık düzeni üzerinde istenen sayfanın yaşam döngüsünü (ör. animasyonlar veya kaydırma) değiştirebilir. İlginç bilgi: Chromium, arama motorlarına sayfayı aşağı kaydırır ve bu işlem yalnızca nerede gerçekleşeceği konusunda önemlidir, yani bir sayfa yanıt vermese bile, bu bilgileri sayfayı kaydırabilir ve sayfanın önceden ekrana çizilmiş bölümlerini görebilirsiniz.
Web performansı, verimliliği artırırken işten kaçınma sanatıdır. olabildiğince çok özen gösterin. Çoğu durumda, bu beceri, değil, tarayıcıyla uyumlu olmasını sağlar. Şunu da belirtmek gerekir ki, bu eğitim, Daha önce ardışık düzende gösterilenler, işlem maliyeti açısından farklılık gösterir. biraz doğası gereği diğerlerine göre daha pahalıdır!
Ardışık düzenin farklı bölümlerine göz atalım. Göz atacağız. ve bunların nasıl teşhis edileceğine dair bilgi edineceksiniz.
Tarayıcı Oluşturma Optimizasyonları
Performans, kullanıcılar için önemlidir. Web geliştiricileri de iyi kullanıcı deneyimleri oluşturmak için hızlı tepki veren ve kullanıcı etkileşimlerine hızlı tepki veren web siteleri pratiğe dökebilirsiniz. Performans uzmanı Paul Lewis, atıklarınızı yok etmenize ve saniyede 60 kare performansını koruyan web uygulamaları oluşturabilirsiniz. Ayrılacaksınız ve bunların nedenlerini belirlemeniz için ihtiyacınız olan araçları oluşturmaya karar veriyor. Ayrıca tarayıcının oluşturma sürecini daha hızlı ve kolay bir şekilde etkileşime giren web siteleri oluşturmayı kolaylaştıran kalıpları keyifle kullanacak.
Bu, Udacity aracılığıyla sunulan ücretsiz bir kurstur ve istediğiniz zaman katılabilirsiniz.