2016-06-11 24 views
10

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

+0

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

cevap

13

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.

+1

Harika bir açıklama için teşekkürler. Bu emin anlayışımı temizledi! – M00

+0

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. –