Web performansını optimize etmek için Google Developers belgelerini okudum. Orada kullanılan terminolojiyle biraz kafam karıştı. Hem CSS hem de JavaScript dosyaları DOM yapısını engeller. Ancak, CSS render-blocking olarak adlandırılırken, JavaScript parser-blocking olarak adlandırılır. 'Ayrıştırıcı engelleme' ve 'render-engelleme' terimlerindeki fark nedir? Yoksa aynı mı ve terminoloji birbirinin yerine kullanılır mı?Ayrıştırıcı tıklatma ve engelleme engellemesi
cevap
Bir HTML sayfasının iki <script src="...">
öğesinin olduğunu düşünün. Ayrıştırıcı ilkini görür. Döndürürken * ayrıştırmayı durdurup javascript'i çalıştırır, çünkü sonraki işaretlemenin nasıl ayrıştırılacağını temel olarak değiştiren document.write()
yöntem çağrıları içerebilir. İnternet üzerinden kaynak almak, tarayıcının yaptığı diğer şeylerden çok daha yavaştır, bu yüzden hiçbir şey yapmadan beklemeyi bekler. Sonunda JS gelir, yürütür ve ayrıştırıcı hareket edebilir. Daha sonra ikinci <script src="...">
etiketini görür ve kaynağın yeniden yüklenmesini beklemek için tüm süreç boyunca gitmesi gerekir. Sıralı bir süreç ve bu ayrıştırıcıyı engelliyor.
CSS kaynakları farklıdır. Ayrıştırıcı yüklenecek bir stil sayfası gördüğünde, isteği sunucuya verir ve devam eder. Yüklenecek başka kaynaklar varsa, bunlar paralel olarak getirilebilir (bazı HTTP kısıtlamalarına tabi olarak). Ancak sadece CSS kaynakları yüklendiğinde ve hazır olduğunda sayfa ekranda boyanabilir. Bu işlem engelleniyor ve getiriler paralel olduğundan daha yavaştır. * Ayrıştırıcı engelleme, bazı modern tarayıcılarda olduğu kadar basit değildir. Bu komut dosyası, yüklendiğinde ve yürütüldüğünde, sonraki ayrıştırmayı dağıtmak için hiçbir şey yapmıyorsa ya da yaparsa, aynı kaynakların hala yüklenmesi gerekmesi ümidiyle aşağıdaki HTML'yi geçici olarak ayrıştırma becerisine sahiptir. . Ancak, eğer senaryonun garip bir şey yapması halinde çalışmayı geri bırakmaları gerekebilir.
Harika bir açıklama için teşekkürler. Bu emin anlayışımı temizledi! – M00
Tarayıcının ileriye baktığı ve JS/CSS dosyalarından daha fazlasını almayı talep ettiği * ön yükleme tarama * olarak bilinen bir şey de vardır. Yine de, bir tarayıcının yapabileceği paralel çağrıların sayısının bir sınırı vardır. –
- 1. WScript.Shell ve engelleme yürütmesi?
- 2. BufferedInputStream ve Engelleme
- 3. Ayrıştırıcı?
- 4. iOS'ta arka plan ses akışını engelleme
- 5. CAS ve Sigara Engelleme Sayacı
- 6. UIButton engelleme dokunuşlarıBegan ve dokunuşlarKaliteli
- 7. Haskell ayrıştırıcı, Monad ve MonadPlus
- 8. Gmail'deki AJAX isteğini iletme engellemesi
- 9. jQuery - basamaklı sınıflar ve tıklatma işlevleri sorunları
- 10. Java'da engelleme
- 11. jTable sağ tıklatma menüsü
- 12. node.js'de olay döngü engellemesi nasıl belirlenir ve ölçülür?
- 13. java'da çift tıklatma belirleme
- 14. XML :: Ayrıştırıcı
- 15. Windows altında TCP paket engelleme ve yönlendirme
- 16. Ruby: HTTP.new.start ve dinamik HTTP (S) Engelleme
- 17. Ayrıştırıcı, RegEx ve XML kullanarak, C#
- 18. Telefonun tıklatmada numarayı aramasını engellemesi - Raylar, JavaScript
- 19. Android: sürekli SQL eklentileri için engelleme veya engelleme kuyruğu?
- 20. sql server engelleme işleçleri
- 21. Engelleme CSS Kaynakları
- 22. Adaptördeki tıklatma olayı nasıl yapılır
- 23. Haskell hClose engelleme
- 24. Makro genişletmeyi engelleme
- 25. aramaları engelleme ama
- 26. WebGrid'de çağrı engelleme
- 27. Android'de web sitelerini engelleme
- 28. Networkstream.Write() Engelleme Sorunu
- 29. Recv_from işlevini engelleme yapma
- 30. Engelleme soketi, EAGAIN
Docs, _ "JavaScript, DOM 'yapısını engelleyebilir ve sayfa oluşturulduğunda gecikebilir. (" Çözümleyici engelleme ")" _ vs _ "CSS, işleme engelleme kaynağı olarak kabul edilir; "CSSOM" oluşturuluncaya kadar işlenen herhangi bir içeriğin oluşturulmasını sağlar. ("render-blocking") "_ – Rayon