#perfmatters: Performans ninjası için araç oluşturma teknikleri
Geliştirme araçlarınızı nasıl kullanacağınızı bilmek performans uzmanı olmanın anahtarıdır. Colt, performansın üç ayağını ele aldı: ağ, bilgi işlem ve oluşturma
- Artık masaüstünden bildiğiniz ve sevdiğiniz Geliştirici Araçları ile Android'de Chrome'un profilini görebilirsiniz.
- Performans çalışmalarının yineleme döngüsü; veri toplama, analiz elde etme ve harekete geçme şeklindedir.
- Sayfalarınız için kritik oluşturma yolunda bulunan öğelere öncelik verin.
- Resim yapmaktan kaçının. pahalıya mal olur.
- Uygulamanızdaki kritik zamanlarda bellek karmaşasından ve kod yürütmekten kaçının.
#perfmatters: Ağ performansını optimize etme
Bir sitenin toplam sayfa yükleme süresinin% 70'ini ağ ve gecikme oluşturur. Bu yüksek bir yüzdedir, ancak aynı zamanda burada yaptığınız iyileştirmelerin kullanıcılarınız için büyük faydalar sağlayacağı anlamına da gelir. Bu konuşmada Ilya, Chrome'da yüklenme süresini iyileştirecek son değişikliklerden ve ağ yükünün mutlak minimumda tutulmasına yardımcı olmak için ortamınızda yapabileceğiniz bazı değişikliklerden bahsetti.
- Chrome M27'nin yeni ve iyileştirilmiş kaynak planlayıcısı var.
- Chrome M28, SPDY sitelerini (hatta) daha hızlı hale getirdi.
- Chrome’un basit önbelleği revizyondan geçti.
- SPDY / HTTP/2.0, aktarım hızında büyük artışlar sunmaktadır. nginx, Apache ve Jetty için gelişmiş SPDY modülleri (örnek olarak yalnızca üç tanesi) mevcuttur.
- QUIC, UDP üzerine inşa edilmiş yeni ve deneysel bir protokoldür; Henüz erken bir iş olsa da bu süreç belli bir ihtimal olsa da kullanıcılar kazanacak.
#perfmatters: 60 fps düzeni ve oluşturma
Projelerinizde 60 fps'ye dokunmak doğrudan kullanıcı etkileşimiyle ilişkilidir ve projenin başarısı için büyük önem taşır. Bu konuşmada Nat ve Tom, Chrome'un oluşturma ardışık düzeninden, karelerin düşmesinin bazı yaygın nedenlerinden ve bunlardan nasıl kaçınılacağından bahsetti.
- Bir çerçeve 16 ms uzunluğundadır. JavaScript, stil hesaplamaları, boyama ve birleştirmeyi içerir.
- Boyama çok pahalıdır. Boya Fırtınası, pahalı boya işini gereksiz yere tekrarladığınız durumdur.
- Katmanlar, boyanan öğeleri önbelleğe almak için kullanılır.
- Giriş işleyiciler (dokunmatik ve fare tekerleği dinleyicileri) duyarlılığı azaltabilir; bunlardan kaçının. Trafiği minimumda tutamayacağınız durumlar.
#perfmatters: Hazır 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. Öğelerin kritik oluşturma yolunda yayınlanmasına öncelik verilmesi, özellikle hücresel ağlardaki akıllı telefonlar gibi ağ kısıtlamalı cihazlardaki kullanıcılar için bir zorunluluktur. Bryan, Google ekibinin PageSpeed Insights web sitesindeki öğeleri tanımlama ve önceliklendirme sürecinde nasıl ilerlediğini anlattı. Bu süreç, yükleme süresini 20 saniyeden biraz 1 saniyeye çıkardı.
- Oluşturmayı engelleyen JavaScript ve CSS'yi 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 genişletin.
- Oluşturma engelleyici CSS'yi en aza indirin; yalnızca ilk görüntü alanını görüntülemek için gerekli stilleri gönderir, ardından geri kalanını yayınlar.
- Oluşturma engelleyici CSS'de satır içi olarak yer alan büyük veri URI'leri, oluşturma performansına zarar verir; resim URL'lerinin engellemediği kaynakları engeller.