Sayfa oluşturmayı hızlandırmak için WordPress tembel JavaScript yüklemesi nasıl yapılır?

WordPressSayfa oluşturma yöntemlerini hızlandırmak için JavaScript'in tembel yüklenmesi.

JavaScript'in Erteleme özelliği nedir?

Muhtemelen herkes bu durumla karşılaşmıştır:

Başlıkta N tane komut dosyası vardır ve komut dosyaları yüklendiğinde, genellikle boş olan sayfa oluşturma engellenir.

Tabii ki, kaynak koddaki betiği altbilgiye koyarak bunu aşabiliriz.

Ancak bazı karmaşık geliştirme ortamları bu basit görevi özellikle karmaşık hale getirebilir.

Bu noktada JavaScript'te nispeten nadir bir özellik olan Defer özelliğini kullanabiliriz.

Hiç kullanmayabilirsiniz ama bu tanıtımı okuduktan sonra elinizden bırakmayacağınızdan eminim.

Ana işlevi, yalnızca olayla tetiklenen JavaScript içeren komut dosyaları için tam sayfa yükleme hızı sağlayan, yükte ayrıştırmak yerine komut dosyasının tüm sayfa yüklendikten sonra ayrıştırılmasına izin vermektir.

Evet, script etiketinin defer özelliği varsa, kodu sayfanın en altına koymaya benzer şekilde head kısmına yerleştirilse bile HTML sayfası ayrıştırıldıktan sonra yürütülür.

Elbette gecikme kullanımı da sınırlıdır, genellikle 2 noktaya dikkat edin:

1) Ertelenmiş bir erteleme türü komut dosyası bloğunda document.write komutunu çağırmayın;

• Çünkü document.write doğrudan çıktı efekti üretecektir.

2) Erteleme komut dosyalarında, herhangi bir anında yürütme komut dosyası da dahil olmak üzere genel değişkenleri veya işlevleri kullanmayın.

WordPress'te kullanılan komut dosyasına Erteleme özelliğini ekleyin

WordPress'te, WordPress tarafından kullanılan komut dosyalarına Erteleme özelliğini otomatik olarak nasıl ekleyebiliriz?

Mevcut temanın function.php dosyasına aşağıdaki kodu ekleyebiliriz ▼

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};

• Yukarıdaki kod yalnızca şuna göre çalışır:WordPress tarafından tanıtılan JavaScript koduetkili olacaktır.

注意 事项

Canlı Önizleme Yönetimi boş görüntülenebilir:

Yukarıdaki kodu kullanırsanız, gerçek zamanlı önizleme yönetimini açtığınızda (Görünüm → Özelleştir), boş görüntülenebilir, bu yüzden lütfen uygun şekilde kullanın.

Gerçek zamanlı önizleme yönetimi gerektiğinde, yukarıdaki kodu yorumlayın ve özelleştirme tamamlandıktan sonra yorumlanan kodu silin.

PHP yorum kodu örneği:

/*

这里是代码 

*/