Geliştirilmiş Performans İçin Altı jQuery En İyi Uygulama

jQuery biridir Bugün en popüler JavaScript kütüphaneleri. API'si çok dik olmayan bir öğrenme eğrisine yol açan kullanımı çok kolaydır. Birçok proje dinamik işlevsellik getirmek için doğrudan vanilya JavaScript'i kullanmak yerine jQuery kodunu kullanıyor.

Ancak jQuery'nin de eksiklikleri var. Dikkatsizce kullanılırsa bazı performans sorunlarına yol açabilir tıpkı dayandığı dil gibi. Bu gönderi, herhangi bir performans sorununu önlememize yardımcı olacak olan jQuery'yi kullanmanın en iyi uygulamalarından bazılarını listeler..

1. Gerektiğinde Tembel kodları yükleyin

Tarayıcılar, DOM ağacını oluşturmadan ve ekrandaki pikselleri boyamadan önce JavaScript'i çalıştırır, çünkü komut dosyaları sayfaya yeni öğeler ekleyebilir veya bazı DOM düğümlerinin düzenini veya stilini değiştirebilir. Yani, tarafından tarayıcıya sayfa yükleme sırasında yürütülecek daha az komut dosyası verilmesi, yapabiliriz süreyi kısaltır Son DOM ağacı oluşturma ve boyama için, bundan sonra kullanıcı sayfayı görebilme.

Bunu jQuery'de yapmanın bir yolu kullanmaktır. $ .getScript Sayfa yükleme sırasında herhangi bir komut dosyasını ihtiyaç duyduğu anda yüklemek için.

$ .getScript ("scripts / gallery.js", geri arama); 

İstediğiniz zaman tek bir komut dosyası alacak bir ajax işlevidir, ancak alınan dosyanın önbelleğe alınmadığını unutmayın. İçin önbelleğe almayı etkinleştirmek için getScript Tüm ajax istekleri için aynısını etkinleştirmeniz gerekir. Bunu aşağıdaki kodu kullanarak yapabilirsiniz:

$ .ajaxSetup (cache: true); 

2. Kaçının $ (pencere) .load () Komut dosyanızın sayfanın alt kaynaklarına ihtiyacı yoksa

$ (document) .ready () eşittir DOMContentLoaded (nerede DOMContentLoaded mevcuttur) ve $ (pencere) .load () için Yük. Birincisi, bir sayfanın kendi DOM dosyası yüklendiğinde, ancak resim ve stil sayfaları gibi harici varlıklar olmadığında kovulur. İkincisi, kendi içeriği ve alt kaynakları da dahil olmak üzere, bir sayfanın yapıldığı her şey olduğunda tetiklenir..

Dolayısıyla, sayfanın alt kaynaklarına dayanan bir komut dosyası yazıyorsanız, örneğin div harici bir stil sayfasına göre tasarlanan, kullanmak en iyisi $ (pencere) .load ().

Ancak, durum böyle değilse, buna bağlı kalmak daha iyidir $ (document) .ready () çünkü, jQuery onun çağırır hazır olay işleyicisi kullanıp kullanmadığınızı $ (document) .ready () Ya da değil, öyleyse kullan.

3. kullanımı ayırmak DOM'dan değiştirilmesi gereken öğeleri kaldırmak için.

“yeniden düzenle” Bir web sayfasındaki düzen değişikliklerini ifade eden bir terimdir; tarayıcı, bir sayfanın yeni bir öğeye uyması için bir sayfanın öğelerini yeniden düzenlediğinde, bir öğenin yapısal değişikliklerine uyum sağladığında, kaldırılan bir öğenin bıraktığı boşluğu veya sayfadaki düzen değişikliği. yeniden akış bir pahalı tarayıcı işlemi.

Hayır'ı azaltabiliriz. Yapısal değişikliklerin bir elemente yaptığı değişikliklerin üzerinde yapılan değişiklikler sonra sayfa akışından çıkar ve bittiğinde geri koyarak. Bir tabloya birden fazla satır tek tek ekliyorsanız, çok fazla yeniden akışa neden olur. Bu yüzden daha iyi tabloyu DOM ağacından çıkarın, satırları ekleyin ve DOM'a geri koyun; bu yeniden akışları azaltacaktır.

jQuery en () Ayırmak sayfadan bir öğe kaldırmamıza izin veriyor, den farklı Kaldır() çünkü daha sonra sayfaya eklenmesi gerektiğinde, öğeyle ilişkili verileri kaydeder. Ayrılmış bir öğe daha sonra değiştirildiği zaman sayfaya geri yerleştirilebilir.

4. kullanımı CSS () yerine yükseklik veya genişlik ayarlamak yükseklik() ve Genişlik()

Bir öğenin yüksekliğini veya genişliğini jQuery'de ayarlıyorsanız, CSS () çünkü bu değerleri kullanarak yükseklik() ve Genişlik() İşlevdeki bazı düzen özelliklerine erişilmesi nedeniyle fazladan yeniden akışlara neden olur computeStyleTests jQuery'de (en son sürümde test edilmiştir.).

Kod için p.height ( "300 piksel"); işte reflows.

İçin p.css ("height": "300px");

computeStyleTests Bazı destek testleri yapmak için kullanılır. Aynı zamanda denir alma kullanarak yükseklik ve genişlik her ikisi de CSS () ve yükseklik genişlik() , ama için ayar sadece için denir yükseklik genişlik() gerek olmayabilir, öyleyse kullanın CSS () yerine.

5. Gereksiz yere yerleşim özelliklerine erişmeyin

Yükseklik, genişlik, kenar boşluğu vb. Gibi yerleşim özelliklerine erişmek, sayfaya yeniden akıtma tetikler. Tarayıcıya düzen özelliklerinden herhangi birini ne zaman sormanızın nedeni, güncellenmiş değeri aldığınızdan emin olmanızı sağlar (değerin daha önce geçersiz olması durumunda) değerleri yeniden hesaplama ve mizanpaj değişiklikleri uygulama.

Yani jQuery veya vanilya JavaScript kullanıp kullanmadığınızı, Gereksiz yere yerleşim özelliklerine erişime dikkat edin özellikle bir döngüde veya sonuçta stil değişiklikleri yaptıktan sonra.

6. Yapabileceğiniz önbellekleme özelliğini kullanın

JQuery'nin işlevlerinden bazıları, iyi kullanılabilecek önbellekleme mekanizmalarıyla birlikte gelir. Ajax istekleri kaynakları önbelleğe alır, ancak senaryo ve jsonp, bu nedenle, tüm ajax isteklerinizi önbelleğe almak istiyorsanız, küresel olarak ayarla aşağıdaki gibi.

Ayrıca, kaynaklarını kullanarak alırsanız posta Yukarıdaki kurulumla önbelleğe almayı etkinleştirseniz bile önbelleğe alınmaz.

Daha önce de söylediğim gibi, () Ayırmak farklı olarak kaldırılacak öğeyle ilişkili verileri önbelleğe alır Kaldır();saklamak() ilk CSS’yi önbelleğe alır Görüntüle Bir öğenin gizlenmeden önceki değeri, böylece verileri kaybetmeden geri yüklenebilir.

Sonuç

İhtiyaçlarınız için en etkili jQuery kodunu kullandığınızdan emin olmanın bir yolu, kodunuzu gerçekten çalıştırana ve performans sorunu olup olmadığını fark etmenize kadar beklemektir. Varsa, performans ve hata ayıklayıcı araçlarını kullanın. sorunun kökünü tespit etmek.

JQuery, tarayıcı uyumlulukları ve özellikleri için ek işlevler içeren JavaScript için bir koza gibi olduğundan, bu araçlar olmadan sorunları teşhis etmek zor olabilir.