#perfmatters: Performans ninjası için alet teknikleri
Geliştirme araçlarınızı nasıl kullanacağınızı bilmek, performans uzmanı olmanın anahtarıdır. Colt, performansın üç temel ayağını adım adım açıkladı: ağ, hesaplama ve oluşturma. Her alandaki temel sorun ve bunları bulup ortadan kaldırmak için kullanılabilecek araçlar hakkında bir tura çıktı.
- Artık masaüstünden bildiğiniz ve sevdiğiniz Geliştirici Araçları ile Android'de Chrome'un profilini oluşturabilirsiniz.
- Performans çalışması için yineleme döngüsü şu şekildedir: veri toplama, analiz elde etme, harekete geçme.
- Sayfalarınız için kritik oluşturma yolundaki öğelere öncelik verin.
- Resim yapmaktan kaçının, çünkü çok pahalıdır.
- Uygulamanızdaki kritik zamanlarda bellek karmaşasından ve kod yürütmeden 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 orandır ancak aynı zamanda, burada yaptığınız iyileştirmelerin kullanıcılarınız için büyük yararlar sağlayacağı anlamına da gelir. Ilya bu konuşmada, Chrome'da yapılan ve yükleme süresini iyileştirecek son değişiklikleri ve ağ yükünü mutlak en düşük düzeyde tutmak için ortamınızda yapabileceğiniz birkaç değişikliği açıkladı.
- Chrome M27'de yeni ve iyileştirilmiş bir kaynak planlayıcı var.
- Chrome M28, SPDY sitelerini (hatta) daha hızlı hale getirdi.
- Chrome’un basit önbelleği revizyondan geçti.
- SPDY / HTTP/2.0, büyük aktarım hızı iyileştirmeleri sunar. nginx, Apache ve Jetty için olgun SPDY modülleri vardır (sadece üçü için).
- QUIC, UDP'nin üzerine kurulmuş yeni ve deneysel bir protokoldür; henüz yolun başındadır ama nasıl çalışacağına göre kullanıcılar kazanacaktır.
#perfmatters: 60 fps'de düzen ve oluşturma
Projelerinizde 60 fps'ye basmak doğrudan kullanıcı etkileşimiyle ilişkilidir ve başarısı için çok önemlidir. Bu konuşmada Nat ve Tom, Chrome'un oluşturma ardışık düzeninden, kare düşüşlerinin bazı yaygın nedenlerinden ve bunlardan nasıl kaçınılacağından bahsetti.
- Bir kare 16 ms uzunluğundadır. JavaScript, stil hesaplamaları, boyama ve birleştirmeyi içerir.
- Boyama extremely pahalı. Boya Fırtınası, pahalı boya işlemlerini gereksiz şekilde tekrarlamanız anlamına gelir.
- Katmanlar, boyanmış öğeleri önbelleğe almak için kullanılır.
- Giriş işleyicileri (dokunma ve fare tekerleği dinleyicileri) yanıt vermeyi durdurabilir; mümkünse bunları kullanmaktan kaçının. Minimum düzeyde tutamayacağınız yer.
#perfmatters: Hazır mobil web uygulamaları
Kritik Oluşturma Yolu, tarayıcının sayfayı boyamaya başlayabilmesi için ihtiyaç duyduğu her şeyi (JavaScript, HTML, CSS, resimler) ifade eder. Özellikle hücresel ağlardaki akıllı telefonlar gibi ağ kısıtlaması olan cihazlardaki kullanıcılar için, kritik oluşturma yolunda öğelerin teslimine öncelik vermek bir zorunluluktur. Bryan, Google ekibinin PageSpeed Insights web sitesinin öğelerini tanımlama ve önceliklendirme sürecinde nasıl ilerlediğini anlattı ve bunu 20 saniyelik yükleme süresinden 1 saniyenin biraz üstüne çıkardı!
- Oluşturmayı önleyen 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şturmayı engelleyen CSS'yi en aza indirin; yalnızca ilk görüntü alanını görüntülemek için gereken stilleri yayınlayın, ardından geri kalanını yayınlayın.
- Oluşturma engelleyici CSS'de satır içine yerleştirilen büyük veri URI'leri oluşturma performansına zarar verir; resim URL'lerinin engellemediği kaynakları engeller.