Metin javascript zaman uyumsuz kaynağı yüklendi. Eşzamansız JavaScript yükleme - sayfa yüklemeyi hızlandırın. WordPress'te erteleme veya zaman uyumsuz nitelikler ekleme
29.06.2020
Merhaba arkadaşlar! JavaScript yüklemenin web sitesi performansındaki en büyük darboğazlardan biri olduğunu biliyor muydunuz? Bugün asıl görevim bir betiğin ne olduğunu ve sitenin hızını ve performansını nasıl etkilediğini açıklamak.
Komut dosyası etiketini yükleyen tarayıcı, komut dosyası yüklenene ve yürütülene kadar sayfayı oluşturmayı durdurur. Sayfa engellendi ve tarayıcı birkaç saniye boyunca kullanıcı eylemlerine yanıt vermiyor. Gecikme süresi birkaç faktöre bağlıdır:
yapılandırma,
internet bağlantı hızı,
dosya boyutu ve diğerleri ...
Bu nedenle Google PageSpeed Insights, sayfanın üst kısmından görüntülemeyi engelleyen JavaScript'in kaldırılmasını önerir. Komut dosyalarını sitenin altına, örneğin kapanış etiketinden önce yerleştirmek iyi bir uygulamadır.
veya asenkron yüklemenin ayarlanması.
Komut dosyası kodu sitenin üst kısmının görüntüsünü etkiliyorsa, onu ayrı bir dosyaya koymayın, doğrudan HTML'ye gömün.
JS, sitenin içeriğini değiştirebilir ve hatta farklı bir url'ye yönlendirebilir. Bu durumda, komut dosyasını belgenin sonuna bağlamak, sayfayı "sarsma", yeni yükleme veya mevcut öğeleri en üstte değiştirme etkisine yol açacaktır.
Komut dosyası etiketine zaman uyumsuz ve erteleme niteliklerini uygulama
Eşzamansız ve ertelenmiş JavaScript çalışmasının ne olduğuna ve eşzamansız ve erteleme nitelikleri arasındaki temel farkın ne olduğuna bir göz atalım. Ama önce, komut dosyası etiketinin olağan bağlantısıyla belge işleme sırasına bakalım.
< kaynak = "example.js">
Açıklayıcı bir örnek için aşağıdaki kuralları kullanacağım:
Komut dosyası yüklenirken ve yürütülürken HTML kodunun ayrıştırılması kesintiye uğrar ve ardından devam eder. Web sayfasının görüntülenmesinde bir gecikme var.
erteleme özelliği
Erteleme özelliği, tarayıcının sayfanın daha fazla işlenmesini durdurmadan js dosyalarını paralel olarak yüklemeye başlamasını sağlar. Tarayıcı, dosyaların bağlanma sırasına göre tutarlılığı garanti ederken, Belge Nesne Modelinin (kısaca DOM) tam ayrıştırılmasından sonra yürütülürler.
< erteleme kaynağı = "example.js">
zaman uyumsuz öznitelik
HTML5'te görünen zaman uyumsuz öznitelik desteği, tarayıcının js dosyalarını paralel olarak yüklemesine ve yüklendikten hemen sonra, sayfanın geri kalanının işlenmesini beklemeden yürütmesine izin verir.
< zaman uyumsuz kaynak = "example.js">
İşlem sırası şeması:
Bu eşzamansız bir indirmedir. Öznitelik, belgenin görüntülenmesini önemli ölçüde etkilemeyen komut dosyaları için önerilir. Bunlara istatistik toplama sayaçları (Google Analytics, Yandex Metrica), reklam ağı kodları (Yandex Advertising Network, Google Adsense), sosyal medya düğmeleri vb. dahildir.
Web sitesi yükleme hızı, Google'daki sıralama faktörlerinden biridir.
Asenkron JavaScript bağlantısı, gecikmeyi ortadan kaldırarak sayfa yükleme sürelerini azaltır. Bununla birlikte, örneğin bir kitaplık kullanarak js dosyalarını tek bir dosyada sıkıştırmanızı ve birleştirmenizi öneririm. Kullanıcılar hızlı siteleri sever 😎
Async ve Defer - JavaScript yükleme stratejileri
JavaScript, herhangi bir modern web uygulamasının önemli bir parçasıdır ve yükleme için kullanmayı seçtiğimiz stratejiler, o uygulamanın performansını doğrudan etkiler. Bu makalede, her bir yaklaşım arasındaki önemli farkları, artıları ve eksileri, performans sonuçları ile birlikte sayfa etkileşimi ve yükleme süreleri için nasıl optimize edileceğini anlamaya çalışacağız.
Gösteri için, aşağıdaki dış bağımlılıklardan oluşan bir web sitesi oluşturacağım. Dosyaların indirme süreleri bununla doğru orantılı olduğundan, ilgili dosya boyutlarına özellikle dikkat edin.
HTML - sayfa ~ 1 MB. JavaScript'ten bazı dinamik çıktıları göstermek için gerçek işaretleme/içerik içerir.
Resim - image1.png ~ 5 Mb
JavaScript - file1.JS ~ 3MB, çekirdek (ana dosya) javascript'idir ve HTML ayrıştırmasına bağlıdır. Sayfaya bir miktar dinamik içerik göstermek veya bir tepki/açısal bileşen eklemek gerekiyor.
JavaScript - file2.js ~ 460B, dom ile etkileşime giren küçük, bağımsız bir javascript dosyasıdır.
JavaScript - file3.js ~ 1.5 MB, ikincil bir js dosyasıdır ve daha düşük öncelikli bazı kodları yürütmek için file1.js'ye bağlıdır. Bu kod, sayfa oluşturma ve kullanıcı etkileşimi için hemen gerekli değildir; sosyal medya simgelerini, yorumları, çevrimiçi yardımı, bazı analitik görevlerini başlatmayı vb. gösterir.
Şimdi farklı yaklaşımları analiz etme zamanı
Yaklaşım-1 [baş bölümündeki komut dosyaları]
İlk durumda, tüm scripts etiketlerini HTML'mizin head bölümüne yükleyeceğiz. Aşağıda, krom sayfasının ağ sekmesinin analizinin, kullanıcı etkileşimi için hazır bir ekran görüntüsü bulunmaktadır.
Artıları:
Çeşitli JS dosyalarının kodunun yürütülme sırası, dosyaların HTML'ye dahil edildiği sırayla kaydedilecektir. Mevcut örnekte, dosya2 ve dosya3, dosya1'den önce yüklenmiş olsa bile, yürütme sırası doğru olacaktır.
eksileri:
Bu senaryoda, head bölümündeki 3 komut dosyasının tümü yüklenene, ayrıştırılana ve yürütülene kadar HTML ayrıştırma duraklatılacaktır. HTML dosyası önceden yüklenmiş [ancak ayrıştırılmamış] olsa bile kullanıcıya boş bir beyaz ekran gösterilecektir. Bu kesinlikle kullanılabilirlik için iyi değil.
DOM henüz hazır olmadığı için yukarıdaki komut dosyalarının hiçbiri HTML sayfasına erişemez/değiştiremez. Bu sorunu çözmek için olası bir çözüm, DOMContentLoaded olayını dinlemek ve ardından kodu yürütmektir. DOMContentLoaded Bu olay, orijinal HTML belgesi tamamen yüklendiğinde ve stil sayfalarının, resimlerin yüklenmesini bitirmesini beklemeden ayrıştırıldığında tetiklenir.
Yaklaşım-2 [sondaki komut dosyaları]
İlk yaklaşımda karşılaştığımız 2 sorunun üstesinden gelmek için, 3 betiğin tümünü body etiketinin altına yükleyelim.
Artıları: HTML, komut dosyaları yüklenmeden önce ayrıştırılır, böylece kullanıcı komut dosyalarını beklemek yerine gerçek içeriği hemen görebilir.
Tüm komut dosyaları HTML ayrıştırıldıktan sonra yürütüldüğünden, her türlü manipülasyon için DOM'a erişebilirler. Komut dosyası yürütme sırası korunur.
eksileri:
Böyle bir performans kazancı yoktur.
Yaklaşım-3 [Async niteliğini kullanarak]
HTML5, uygun komut dosyalarının HTML ayrıştırmasını etkilemeden başka bir akışta paralel olarak yüklenmesine yardımcı olan async komut dosyası özniteliğini tanıttı.
Ancak, HTML ayrıştırması tamamlanmış olsun ya da olmasın, ilgili komut dosyası, yüklemeyi bitirir bitirmez ayrıştırılacak ve yürütülecektir ve bu belirli noktaya kadar DOM öğesine başvuruda bulunacaktır.
Burada file2.js'nin HTML dosyasından önce yüklendiğini açıkça görebilirsiniz. Ancak, tarayıcı dosya2'yi yüklerken, HTML ayrıştırmasını duraklatmadı ve bu nedenle, yürütüldüğü zaman, dinamik içeriği enjekte etmek için html yer tutucusuna bir bağlantıya sahipti.
Artıları: Komut dosyaları farklı bir iş parçacığına yüklendiğinden, HTML ayrıştırma duraklatılmaz ve kullanıcı beyaz boş ekran yerine hemen içeriği görebilir. Ana performans kazancı, yani DOMContentLoaded süresi 47.68 saniyeden sadece 21.12 saniyeye düştü ve kazancın ~ %55'i kadar.
eksileri:
JS yürütme sırası korunmaz. HTML'ye dahil edilen komut dizisinde değil, uygun yükleme sırasında yürütülür. Tarayıcı Desteği - IE 9 ve altı gibi eski web tarayıcılarında desteklenmez.
JS, DOM öğesi kullanılabilir olmadan önce yüklenirse ne olur?
Not: Gövde bölümünün altına async özniteliği olan komut dosyalarını yerleştirmek işe yaramaz ve Yaklaşım-2'ye eşdeğer olacaktır.
Yaklaşım-4 [Erteleme özelliğini kullanarak]
Erteleme özelliği, komut dosyasının yalnızca HTML ayrıştırması tamamlandıktan sonra yürütülmesine neden olur. Burada unutulmaması gereken çok önemli bir nokta, Chrome'un henüz ertelemeyi desteklemediği ve DOMContentLoaded'ın süresi üzerinde hiçbir etkisi olmadığıdır. Ancak, HTML ayrıştırmasının sonunda komut dosyalarını yürütür.
Artıları:
Komut dosyalarını içe aktarma sırası korunur. Bu nedenle file3.js, dosya3 daha önce yüklenmiş olsa bile, yalnızca indirme tamamlandıktan ve dosya1 yürütüldükten sonra yürütülür.
Tarayıcı desteği - zaman uyumsuz özniteliğe kıyasla daha iyi tarayıcı desteğine sahiptir, yani kısmen IE v6-9'da desteklenir
Komut dosyaları, yalnızca tam HTML ayrıştırıldıktan sonra yürütüldüğünden DOM'a erişebilir.
eksileri:
Başlangıçta ertelemenin zaman uyumsuz olmaktan daha iyi bir seçim olacağını düşündüm, ancak daha sonra Chrome'un henüz [sürüm 71.0.3578.98] desteklemediğini ve DOMContentLoaded süresi üzerinde hiçbir etkisi olmadığını gördüm.
Ancak, önemli performans iyileştirmeleri ile Firefox'ta beklendiği gibi çalışır.
sonuçlar
Google Analytics'e, Google reCAPTCHA'ya veya DOM erişimi gerektirmeyen başka herhangi bir şeye bağlı olan üçüncü taraf kitaplıkları için baş bölümüne bir eşzamansız öznitelik ile komut dosyası etiketlerini yerleştirmek tercih edilir, çünkü karşılık gelen komut dosyaları paralel olarak yüklenir, ancak hemen yürütülür. .
Head bölümüne yüklenen diğer tüm komut dosyaları için erteleme kullanın, çünkü bunlar da paralel olarak yüklenecektir, ancak yalnızca HTML ayrıştırmayı bitirdikten ve DOM'ye erişilmeye/manipüle edilmeye hazır olduktan sonra yürütülecektir.
İşlevselliği daha sonra yürütmek için eşzamansız komut dosyaları içinde DOMContentLoaded dinleyici kombinasyonunu da kullanabilirsiniz. Lütfen görüşlerinizi ve sonuçlarınızı yorumlarda bırakın, bunları sizinle tartışmaktan memnuniyet duyacağım.
Bu materyalin yazarı I - Yuri Pakholkov'dur. Java, C++, C# dillerinde program yazmak (ve bunlara danışmanlık yapmak) ve web siteleri oluşturmak için hizmet vermekteyim. CMS OpenCart, WordPress, ModX ve kendi yazdığım sitelerle çalışıyorum. Ek olarak, doğrudan JavaScript, PHP, CSS, HTML ile çalışıyorum - yani sitenizi değiştirebilir veya web programlama konusunda yardımcı olabilirim.
Ve aşağıdaki örnekler, (satır içi) komut dosyasının içine nasıl yerleştirileceğini gösterir.
Modül yedeği
type özniteliği için modül değerini destekleyen tarayıcılar, nomodule özniteliğine sahip herhangi bir komut dosyasını yok sayar. Bu, desteklenmeyen tarayıcılar için nomodule işaretli yedek komut dosyaları sağlarken modül komut dosyalarını kullanmanızı sağlar.
Kendi web siteniz olmadan veya kişisel fonlara yatırım yapmadan çevrimiçi para kazanmanın imkansız olduğuna dair yaygın bir inanç var. Bu doğru değil. tonlarca var...
Genellikle, ürün yazılımını değiştirmek için arızalar, sorunlar veya basit bir istek vardır. Belli bir zamana kadar resmi garanti kapsamındaki cihaz güncellenebiliyor...
Bir Vkontakte grubunu korumak oldukça karmaşık bir süreçtir ve yanlış bir yaklaşımla tüm işleri mahvedebilirsiniz. Bu yazımda önemli olanlardan bahsedeceğim...
Arkadaşlarınızı VKontakte'de ücretsiz olarak aldatın
Yeni başlayanlar için yatırım yapmadan İnternetten gerçekten nasıl para kazanılır Yatırım yapmadan İnternetten para kazanmanın gerçek yolları
Terfide davranışsal faktörler ve bunları geliştirmek için çalışma yöntemleri
VKontakte sayfasına trafik nasıl bulunur ve artırılır
Honor Phone'da Hızlı Şarj Uygulaması