Tarayıcılar her sayfa yüklemesinde javascript'i ayrıştırıyor mu?


190

Tarayıcılar (IE ve Firefox) sayfa her yenilendiğinde bağlantılı javascript dosyalarını ayrıştırıyor mu?

Dosyaları önbelleğe alabilirler, bu yüzden her seferinde onları indirmeye çalışmazlar, ancak her sayfa temelde ayrı olduğundan, eski kodları parçalayıp yeniden ayrıştırmalarını beklerim.

Her ne kadar mükemmel anlaşılabilir olsa da bu verimsiz, ancak modern tarayıcıların sitelerdeki ayrıştırma adımını önlemek için yeterince akıllı olup olmadığını merak ediyorum. Bir sitenin ExtJS veya jQuery vb. Gibi bir javascript kütüphanesi kullandığı durumları düşünüyorum.


4
Benim 2c: Ayrıştırılmış Javascript dosyalarını önbelleğe alma performans faydaları bu anlamlı bir optimizasyon için çok küçük hissediyorum.
Itay Maman

2
Karşılaştırmalarımdan, aslında önemli olabilir. Örneğin, jQuery yükleme süresi yaklaşık 30 msn'dir (hızlı bir masaüstü makinede); bunların% 20'si kodu yalnızca yürütülebilir bir gösterime ayrıştırır ve geri kalanı bunu yürütür, yani bu durumda jQuery nesnesini başlatır. Mobil cihaz kullanıyorsanız ve iki veya üç kitaplık kullanıyorsanız, JavaScript yürütme engellendiği için bu gecikme alakalı olabilir ve her JS komut dosyası belleğe yükleninceye kadar sayfa aslında boştur.
djjeck

Yanıtlar:


338

Bunlar kazabildiğim detaylar. JavaScript'in genellikle bir VM üzerinde yorumlandığı ve çalıştırıldığı düşünülse de, kaynağı doğrudan makine koduna (IE hariç) derleme eğiliminde olan modern tercümanlarda durum böyle değildir.


Krom: V8 Motoru

V8'in bir derleme önbelleği var. Bu, derlenmiş JavaScript'i en fazla 5 çöp toplama kaynağı için bir karma kullanarak depolar. Bu, iki özdeş kaynak kodunun nasıl dahil edildiklerine bakılmaksızın bellekte bir önbellek girdisini paylaşacağı anlamına gelir. Sayfalar yeniden yüklendiğinde bu önbellek temizlenmez.

Kaynak


Güncelleme - 19/03/2015

Chrome ekibi, JavaScript akışı ve önbelleğe alma için yeni teknikleriyle ilgili ayrıntıları yayınladı .

  1. Script Akışı

Komut dosyası akışı, JavaScript dosyalarının ayrıştırılmasını optimize eder. [...]

Sürüm 41'den itibaren Chrome, indirme başlar başlamaz senkronize olmayan komutları ve ertelenen komut dosyalarını ayrı bir iş parçacığında ayrıştırır. Bu, ayrıştırmanın indirme işlemi bittikten sadece milisaniye sonra tamamlanabileceği ve sayfaların% 10 daha hızlı yüklenmesine neden olacağı anlamına gelir.

  1. Kod önbellekleme

Normalde, V8 motoru her ziyarette sayfanın JavaScript'ini derleyerek bir işlemcinin anladığı talimatlara dönüştürür. Derlenmiş kod derleme zamanında makinenin durumuna ve içeriğine büyük ölçüde bağımlı olduğundan, bu derlenmiş kod daha sonra kullanıcı sayfadan ayrıldığında atılır.

Chrome 42, derlenen kodun yerel bir kopyasını saklamak için gelişmiş bir teknik sunar, böylece kullanıcı sayfaya geri döndüğünde indirme, ayrıştırma ve derleme adımlarının tümü atlanabilir. Tüm sayfa yüklemelerinde bu, Chrome'un derleme süresinin yaklaşık% 40'ını önlemesine olanak tanır ve mobil cihazlarda değerli pil tasarrufu sağlar.


Opera: Carakan Engine

Uygulamada bu, bir kod programı derlenmek üzereyken, kaynak kodu yakın zamanda derlenen başka bir programla aynı olduğunda, derleyiciden önceki çıktıyı yeniden kullandığımız ve derleme adımını tamamen atladığımız anlamına gelir. Bu önbellek, bir sayfanın bir haber servisinden farklı haber makaleleri gibi sayfalar sonradan yüklendiği tipik tarama senaryolarında oldukça etkilidir, çünkü her sayfa genellikle aynı, bazen çok büyük komut dosyası kitaplığını yükler.

Bu nedenle, JavaScript sayfa yeniden yüklemelerinde önbelleğe alınır, aynı komut dosyasına yapılan iki istek yeniden derlemeye neden olmaz.

Kaynak


Firefox: SpiderMonkey Motoru

SpiderMonkey Nanojitbir JIT derleyicisi olan yerel arka ucu olarak kullanır . Makine kodunu derleme işlemi burada görülebilir . Kısacası, komut dosyaları yüklenirken yeniden derleniyor gibi görünüyor . Bununla birlikte, iç kısımlara daha yakından bakarsak , derlemeyi izlemek için kullanılan Nanojityüksek seviye monitörün jstracerderleme sırasında üç aşamadan geçebileceğini ve bunun bir fayda sağladığını görüyoruz Nanojit:

İzleme izleyicisinin başlangıç ​​durumu izlemedir. Bu, spidermonkey'in bayt kodunu yorumladığı anlamına gelir. Spidermonkey geri atlama bayt kodunu her yorumladığında, monitör atlama hedefi program sayacı (PC) değerinin kaç defa atlandığını not eder. Bu numaraya PC için isabet sayısı denir. Belirli bir bilgisayarın vuruş sayısı bir eşik değerine ulaşırsa, hedef sıcak kabul edilir.

Monitör bir hedef PC'nin sıcak olduğuna karar verdiğinde, o hedef PC için yerel kod tutan bir parça olup olmadığını görmek için bir karma karmaşasına bakar. Böyle bir parça bulursa, çalışma moduna geçer. Aksi takdirde kayıt moduna geçer.

Bu hot, kod parçaları için yerel kodun önbelleğe alındığı anlamına gelir . Yeniden derlenmesi gerekmeyeceği anlamına gelir. Bu karma yerel bölümlerin sayfa yenilemeleri arasında tutulduğu açık değildir. Ama öyle olduklarını varsayıyorum. Herkes bunun için destekleyici kanıt bulabilirse o zaman mükemmel.

DÜZENLEME : Mozilla geliştiricisi Boris Zbarsky'nin Gecko'nun derlenmiş komut dosyalarını henüz önbelleğe almadığını belirtti . Alındığı bu SO cevap .


Safari: JavaScriptCore / SquirelFish Motoru

Bu uygulama için en iyi cevabın zaten başka biri tarafından verildiğini düşünüyorum .

Şu anda bayt kodunu (veya yerel kodu) önbelleğe almıyoruz.
Ancak, şu anda, kod oluşturma
JS yürütme süresinin önemsiz bir kısmı (<% 2) olduğunu düşündüğümüz bir seçenektir , bu yüzden
şu anda bunu takip etmiyoruz .

Bu, Safari'nin baş geliştiricisi Maciej Stachowiak tarafından yazılmıştır . Bence bunu doğru olarak kabul edebiliriz.

Ben başka bir bilgi bulamadı ancak en son hızı geliştirmeler hakkında daha fazla bilgi bulabilirsiniz SquirrelFish Extrememotor burada veya kaynak kodunu taramak burada maceracı hissediyorsanız.


IE: Çakra Motoru

Bu alanda IE9'un JavaScript Motoru (Çakra) hakkında güncel bilgi bulunmamaktadır. Eğer bir şey bilen varsa, lütfen yorum yap.

Bu oldukça gayri resmi olmakla IE eski motor uygulamaları için Eric Lippert ( JScript MS Geliştirici ) bir blog cevapta devletler burada o:

JScript Classic, herhangi bir JScript Classic programı çalıştırmadan önce kodu tam olarak kontrol ettiğimiz, tam ayrıştırma ağacı oluşturduğumuz ve bir bayt kodu oluşturduğumuz için derlenmiş bir dil gibi davranır. Ardından bayt kodunu bir bayt kodu yorumlayıcısı aracılığıyla çalıştırırız. Bu anlamda, JScript her bit Java kadar "derlenir". Aradaki fark, JScript'in tescilli bayt kodumuzu sürdürmenize veya incelemenize izin vermemesidir . Ayrıca, bayt kodu JVM bayt kodundan çok daha üst seviyededir - JScript Klasik bayt kodu dili ayrıştırma ağacının doğrusallaştırılmasından biraz daha fazladır, oysa JVM bayt kodu açıkça düşük seviyeli bir yığın makinesinde çalışacak şekilde tasarlanmıştır.

Bu, bayt kodunun hiçbir şekilde devam etmediğini ve dolayısıyla bayt kodunun önbelleğe alınmadığını gösterir.


10
+1, mükemmel yazma. Ancak, Firefox ile ilgili olarak, lütfen Mozilla Geliştirici Boris Zbarsky'nin Gecko'nun şu anda bunu yapmadığını açıkladığı bu StackOverflow sorusuna bakın .
cha0site

Teşekkürler, bunu seyahatlerimde gördüm, ancak başka destekleyici kanıt bulamadım. Cevabı onunla düzenleyeceğim.
Jivings

1
IE hakkında söylenenlerin 2003'te söylendiğine dikkat edin:
IE9'un

Ayrıca, Opera JS bayt kodunu sadece yeniden yüklemeden daha fazla önbelleğe alır. (Ancak, oluşturulan makine kodu önbelleğe alınmaz).
gsnedders

2
@Jivings Yukarıdakileri kaynak olarak alın. (Ben Carakan ekibindeki insanlardan biriyim.)
gsnedders

12

Opera, diğer cevapta belirtildiği gibi yapar. ( kaynak )

Firefox (SpiderMonkey'i motoru) does not önbellek bayt kodu. ( kaynak )

WebKit (Safari, Konqueror) yapar değil önbellek baytkodu. ( kaynak )

IE [6/7/8] veya V8 (Chrome) hakkında emin değilim, sanırım IE V8 olmayabilir önbellekleme bir tür yapabilir. IE kapalı kaynak olduğundan emin değilim, ama V8 doğrudan makine koduna derleme çünkü "derlenmiş" kodu önbelleğe almak mantıklı olmayabilir.


1
IE6–8 neredeyse kesinlikle olmayacak. IE9 olabilir, ama hiçbir şekilde kanıtım yok. Derlenmiş JS, büyük olasılıkla hiçbir yerde önbelleğe alınmaz, çünkü genellikle oldukça büyüktür.
gsnedders

@gsnedders: IE8'in teknik olarak yapamayacağından emin değilim, bayt kodunu (resmi değil ama yakın) derlemek için de derlenmiş gibi görünüyor, bu yüzden önbelleğe almamak için teknik bir neden yok. IE9, yerel koda derlemek için bir JIT ekliyor gibi görünüyor.
cha0site

2
Bayt kodu IE tarafından sonsuza dek kullanılmıştır. IE8'de yeni bir şey değil. Sadece bir tercüman göz önüne alındığında, tercümanın performansı ayrıştırma süresinden çok daha yavaştır. IE9'un tamamen yeni (sıfırdan) bir JS motoru var, bu yüzden ikisi arasında hiçbir şey takip etmiyor.
gsnedders

3

Bildiğim kadarıyla, yalnızca Opera ayrıştırılan JavaScript'i önbelleğe alır. Burada "Önbelleğe alınmış derlenmiş programlar" bölümüne bakın .


teşekkürler, diğer tarayıcı ailesi hakkında daha fazla ayrıntı var mı?
ajreal


0

Doğru cevabın "her zaman değil" olacağını düşünüyorum. Anladığım kadarıyla, hem tarayıcı hem de sunucu, neyin önbelleğe alınacağının belirlenmesinde rol oynar. Gerçekten her seferinde yeniden yüklenecek dosyalara ihtiyacınız varsa, bunu Apache içinden yapılandırabilmeniz gerektiğini düşünüyorum (örneğin). Elbette, kullanıcının tarayıcısının bu ayarı göz ardı edecek şekilde yapılandırılabileceğini düşünüyorum, ancak bu muhtemelen olası değildir.

Bu nedenle, çoğu pratik durumda, javascript dosyalarının kendilerinin önbelleğe alındığını, ancak sayfa her yüklendiğinde dinamik olarak yeniden yorumlandığını hayal ediyorum.


0

Tarayıcı kesinlikle önbelleğe almayı kullanır, ancak evet, bir sayfa her yenilendiğinde tarayıcılar JavaScript'i ayrıştırır. Çünkü bir sayfa tarayıcı tarafından yüklendiğinde, 2 ağaç oluşturur.

Bu render ağacı, dom öğelerinin görsel düzeni hakkında bilgilerden oluşur. Bu nedenle, bir sayfa yüklendiğinde, javascript ayrıştırılır ve javascript tarafından yapılan herhangi bir dinamik değişiklik dom öğesini konumlandırmak, öğeyi göstermek / gizlemek, öğe eklemek / kaldırmak, tarayıcının oluşturma ağacını yeniden oluşturmasına neden olur. Ancak FF ve krom gibi modern kardeşler onu biraz farklı ele alıyorlar, artımlı renderleme kavramına sahipler, bu nedenle yukarıda belirtildiği gibi js tarafından dinamik değişiklikler olduğunda, bu öğelerin yalnızca yeniden oluşturulmasına ve yeniden boyamasına neden olacaktır.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.