Dinamik WordPress gelişimini optimize etmek için görünürlük ateşi kullanmak

Nadiren insanlar interneti keşfederken çok fazla pencere (her biri birçok sekme ile) açmazlar. Aslında, birkaç tarayıcı bile çalıştırabilirler. Web geliştiricileri olarak, ilk sayfa yüklendiğinde, video başlattığında, sermaye açma, slayt şovlarına başladığında vb. Birçok şey yapma eğilimindeyiz. Bir sayfa yüklendiğinde ve gerçekten görüldüğünde genellikle aynı olay olmadığını biliyoruz. Örneğin, sitenize bağlantı yeni bir sekmeye açılırsa, tamamen görülene kadar birkaç dakika, saat ve hatta günler sürebilir.
Bu iki sorun yaratır. Bu sorunlardan birinin iyi bir örneği, otomatik olarak oynamak istediğiniz videodur. Bunu sayfanın yüklenmesinde yapmak çok kolaydır, ancak birisi sayfayı başka bir sekmede açarsa, video tamamlanana kadar sekmeyi gerçekten açmayabilir. Neden olan bir diğer sorun, sayfanın Ajax isteklerini düzenli olarak geri alması gerektiğinde. Sayfa kullanılmayan bir sekmede, gizli pencerede veya etkin olmayan bir tarayıcıda açılırsa, bu birçok gereksiz sunucu isteği ile sonuçlanabilir. Bu, yeni doğrudan şablon eklentisi Epoch’ta Postmatic ile çalışırken karşılaştığım sorun.
Her on beş saniyede bir, EPOCH, yeni yorum eklenmediğinden emin olmak için yorum sayısını otomatik olarak sayar. Yeni bir yorum bulunursa, Epoch onu alır ve daha sonra ortaya çıkarır. Birinin gönderiyi açması, okuması ve ardından bir hafta boyunca kullanılmayan bir sekmede açılmasına izin vermesinden çok endişeliyiz. Bu sorunun çözümü sadece birkaç satır kod olduğu ortaya çıktı. API’nın eski tarayıcıda görünürlüğü hakkında, bulanık jQuery yöntemini kullanarak sekmenin etkin durumunu belirleyebiliriz. Ancak bu yöntem çok güvenilmezdir; Bahsetmemek gerekirse, yeni bir tarayıcıda çalışmaz. Bunun yerine, API görünürlüğü sadece 2011’de oldukça iyi bir kullanım puanı olan tanıtıldı. Bu IE9 veya daha önce içermez. API’nın görünürlüğü size geçerli sayfanın durumunu söyler – ister oluşturulur, görünür, görünmez, vb. API görünürlüğünün uygulanması çok geniş olmasına rağmen, elbette, satıcının özel önekine bağlıdır. Bu sadece tarayıcıyı yapan kişilerin, özel bir satıcının önekiyle bizi deli etme misyonuna sahip olduklarına dair daha fazla kanıttır. Neyse ki, ateşin görünürlüğü için önek bizi görmez hale getiren bazı sargılar var. Bu makalede Andrey Sitnik tarafından görünürlük.js nasıl kullanılacağını açıklayacağım. Bu ambalajın kullanımı çok kolaydır ve GPL ile uyumlu MIT lisansları ile korunur, bu nedenle WordPress projenizde kullanım için güvenlidir.
Bu, tüm popüler bağımlılık yönetim sistemlerini kullanarak projenize bağımlılık olarak eklenebilir veya CDN üzerinden yüklenebilir. Doğru sıraya girmenize güveneceğim. Sonraki iki bölümde görünürlük sargısı kullanarak, bu makalenin tanıtımında tartıştığım iki sorunu çözmek için görünürlük sarma uygulamanın iki basit yolunu göstereceğim. Her iki örneği de yalnızca JavaScript’te göstereceğim. Not: Bunu eklentinize veya temanıza doğru şekilde uyguladığınızdan emin olun. Birinci Örnek: Otomatik olarak YouTube Video YouTube, videoları IFrame’ye yüklemek için ateş sağlar. Bu oldukça düz. Örnek kodunu görürseniz, video yüklendiğinde çalışan bir olay olduğunu göreceksiniz. Etkinliğin dönüş işlevinde videoların nasıl oynanacağını gösterirler. Aşağıdaki görünüm: işlev onplayerready (olay) {
event.target.playvideo ();
} Visibility.js sarma kullanarak, sayfa çok basit değişikliklerle görünene kadar videoyu başlatmamak için işlevi değiştirebiliriz: işlev onplayerready (olay) {
Görünürlük.onvisible (function () {
event.target.playvideo ();
});
} Sayfa Etkin Tarayıcı sekmesinde oluşturulursa, davranış aynı olacaktır. Öte yandan, birisi sayfayı aktif olmayan sekmeye açarsa, sekme tekrar etkin olana kadar video başlamaz.
Aynı strateji birkaç farklı duruma da uygulanabilir. Örneğin, bir vites kullanıyorsanız, yalnızca sayfa gerçekten görünür olduğunda bir slayt gösterisi başlatmak isteyebilirsiniz.
İkinci örnek: JavaScript’in geliştirilmiş zaman ayarlama işlevi, aynı işlevi belirtilen aralıkta tekrarlamak için çok basit bir yol sağlar. Aşağıdakiler en temel örnek: setInTIntVal (function () {console.log (‘snack’);

}, 10.000); Bu, “atıştırmalık” kelimesini her on saniyede bir konsola kaydedecektir. Bu tür zaman ayarlama işlevi, otomatik dönme kaymasını taşımak için kullanılır, ancak AJAX üzerinden veri değişikliklerini kontrol etmek için sunucuya düzenli olarak geri dönmek için de kullanılabilir. Genellikle, istemciden sunucuya iki yollu sabit bir bağlantı olmadan sunucu yapılandırmalarında “eve çağrılar” ı kontrol etmek gerekir.
Şimdi bu zaman işlevini düşünün: setInTintVal (function () {
$ .Get (url, {eylem: “bir şey”},
İşlev (yanıt) {
//bir şey yap
}
);
}, 10.000); Ajax isteklerini her on saniyede bir yapacak. Görüntüleyicinin aktif başına dakikasında sunucunuza altı ek istektir. Böyle sabit bir ankete ihtiyacınız varsa, sorun değil, ancak birisi sayfayı açarsa, beş dakika okuyun ve sonra sekmeyi açık bırakır ancak bir gün boyunca aktif değil, gitmesi gerekmeyen sekiz binden fazla istek anlamına gelir sunucunuza.
Bu, web soketleri, WordPress eklentileri veya tema geliştiricileri gibi teknoloji tarafından çok iyi çözülen bir sorun olmasına rağmen, web soketlerinin kullanıldığını bildikleri belirli siteler için kodlarda çalışmadıkça web soketlerine veya benzer teknolojilere güvenemezler. Son adımda tartıştığım görünürlük ateşi için aynı ambalaj, bir dizinin yerine kullanılabilir, ancak yalnızca geçerli sekme görünürse dönüş işlevini gerçekleştirir. İşte son örnek, yeniden düzenlenmiş yalnızca geçerli sekme görülürse çalışır: görünürlük. Her (10000, function () {
$ .Get (url, {eylem: “bir şey”},
İşlev (yanıt) {
//bir şey yap
}
);
}); Sayfa görünür sekmede olduğunda, bir dizi kullanılırken davranış tamamen aynıdır. Ancak, sekme görünmediğinde hiçbir şey olmaz. Sunucunuzda ve bilgisayarınızda kaynak kullanımını azaltmanın yanı sıra, geri dönüş işlevi, sekmenin görünür olduktan sonra çalışmasıdır. Daha fazla optimizasyon ve daha fazla kontrol WordPress ile gittikçe daha fazla etkileşimli uygulama oluşturduğumuzda, kesinlikle istemci ve sunucu arasında iki yollu iletişime güveneceğiz. Bunu yapmanın etkili bir yolunu bulmak çok önemlidir. Bu düşünce ile, Automattic’in düğüm tabanlı bir sistem olan Socket.io’nun sponsoru olduğunu görmek şaşırtıcı değildir. JS, istemciler ve sunucular arasında gerçek zamanlı iletişim için çok iyidir.