#perfmatters: Performans ninjaları için araç teknikleri
Geliştirme araçlarınızı iyi bilmeniz, performans uzmanı olmanın anahtarıdır. Colt, performansın üç temel dayanağı olan ağ, bilgi işlem ve oluşturma konularını ele alarak her alandaki temel sorun ve bunları bulmak ve ortadan kaldırmak için kullanılabilecek araçlar hakkında bilgi verdi.
- Artık masaüstünde kullandığınız DevTools ile Android'de Chrome'un profilini oluşturabilirsiniz.
- Performans çalışmaları için iterasyon döngüsü şu şekildedir: Veri toplayın, analiz elde edin, işlem yapın.
- Sayfalarınız için kritik oluşturma yolunda bulunan öğelere öncelik verin.
- Boyamaktan kaçının. Çok pahalıdır.
- Uygulamanızda kritik zamanlarda bellek değişiminden ve kod çalıştırmaktan kaçının.
#perfmatters: Ağ performansını optimize etme
Ağ ve gecikme, genellikle bir sitenin toplam sayfa yükleme süresinin% 70'ini oluşturur. Bu, büyük bir yüzde olsa da bu alanda yapacağınız iyileştirmelerin kullanıcılarınıza büyük faydalar sağlayacağı anlamına da gelir. Bu konuşmada Ilya, Chrome'da yükleme süresini iyileştirecek son değişikliklerin yanı sıra ağ yükünü en aza indirmek için ortamınızda yapabileceğiniz birkaç değişikliği ele aldı.
- Chrome M27'de yeni ve iyileştirilmiş bir kaynak planlayıcı bulunur.
- Chrome M28, SPDY sitelerini daha da hızlandırdı.
- Chrome'un basit önbelleği tamamen yenilendi.
- SPDY / HTTP/2.0, aktarım hızında büyük iyileştirmeler sunar. nginx, Apache ve Jetty (sadece üç tanesini saymak gerekirse) için gelişmiş SPDY modülleri mevcuttur.
- QUIC, UDP'nin üzerine inşa edilmiş yeni ve deneysel bir protokoldür. Henüz yeni olmasına rağmen, kullanıcılar bu protokolden faydalanacaktır.
#perfmatters: 60 fps düzen ve oluşturma
Projelerinizde 60 fps'ye ulaşmak, kullanıcı etkileşimiyle doğrudan ilişkilidir ve projenizin başarısı için çok önemlidir. Bu sohbette Nat ve Tom, Chrome'un oluşturma ardışık düzeninden, kare atlama sorununa yol açan yaygın nedenlerden ve bu sorunlardan nasıl kaçınacağınızdan bahsetti.
- Bir kare 16 ms uzunluğundadır. JavaScript, stil hesaplamaları, boyama ve kompozisyon içerir.
- Boyama son derece pahalıdır. Boya fırtınası, pahalı boya işlerini gereksiz yere tekrarladığınız durumdur.
- Katmanlar, boyanmış öğeleri önbelleğe almak için kullanılır.
- Giriş işleyicileri (dokunma ve fare tekerleği dinleyicileri) duyarlılığı azaltabilir. Mümkünse bunları kullanmaktan kaçının. Bu tür durumlarda, reklamları en aza indiremezsiniz.
#perfmatters: Anında mobil web uygulamaları
Kritik Oluşturma Yolu, tarayıcının sayfayı boyamaya başlamadan önce ihtiyaç duyduğu her şeyi (JavaScript, HTML, CSS, resimler) ifade eder. Önemli oluşturma yolunda öğelerin yayınına öncelik vermek, özellikle hücresel ağlardaki akıllı telefonlar gibi ağ kısıtlaması olan cihazlardaki kullanıcılar için zorunludur. Bryan, Google'daki ekibin PageSpeed Insights web sitesi için öğeleri tanımlama ve önceliklendirme sürecini nasıl yürüttüğünü, 20 saniyelik yükleme süresini 1 saniyenin biraz üzerine nasıl indirdiğini anlattı.
- Oluşturmayı engelleyen JavaScript ve CSS'yi ortadan kaldırın.
- Görünür içeriğe öncelik verin.
- Komut dosyalarını eşzamansız olarak yükleyin.
- İlk görünümü sunucu tarafında HTML olarak oluşturun ve JavaScript ile geliştirin.
- Oluşturma işlemini engelleyen CSS'yi en aza indirin; yalnızca ilk görüntü alanını görüntülemek için gereken stilleri, ardından geri kalanı yayınlayın.
- Oluşturma işlemini engelleyen CSS'ye yerleştirilmiş büyük veri URI'leri oluşturma performansı için zararlıdır. Bu URI'ler, resim URL'lerinin engellemediği kaynakları engeller.