Performansı ciddi şekilde etkileyen yaygın Javascript hataları mı? [kapalı]

10

Katıldığım son bir UI / UX MeetUp'ta, etkileşimi ve kullanıcı arayüzü için Javascript (jQuery) kullanan bir web sitesinde bazı geri bildirimler verdim - oldukça basit animasyonlar ve manipülasyonlardı, ancak iyi bir bilgisayardaki performans korkunçtu.

Aslında, aynı sorunla gördüğüm birçok siteyi / programı hatırlattı, bazı eylemler performansı kesinlikle yok etti. Çoğunlukla Javascript'in neredeyse bir Flash değiştirme görevi yaptığı durumlarda (veya en azından daha belirgin olan). Bu, çok daha fazla Javascript ve işlevselliğe sahip olan ama çok sorunsuz çalışan bazı webapps'lerle tam bir tezat oluşturuyor.

Sitenin performansını öldürecek JS geliştirirken dikkate alınmayan bazı genel sorunları bilmek isterim.

web-development javascript

— Nic
kaynak

Muhtemelen diğer tüm programlarla aynıdır: Gerektiğinden daha fazla iş yapmak ve aynı işi tekrar tekrar, genellikle yüzlerce kez yapmak.

1

@delnan bu çok doğru, ama JS'de çok daha yaygın gibi görünüyor. Algı belki?

— Nic

1

JavaScript hakkında konuşurken 'site' hakkında konuşmak biraz passe olacak. Her yerde ve bu günlerde her şey için kullanılıyor.

— Adam Crossland

@Adam Crossland kesinlikle haklısın - aynı örnekte, jQuery'ye de büyük ölçüde dayanan yerel bir uygulama ile bir geliştiriciye yardımcı olduğumu düşünüyorum.

— Nic

1

Sorunuza tam olarak bir cevap değil, bu yüzden bir yorum yapıyorum: JavaScript'in çok fazla render yaptığı durumlar yaşadım ve aslında saniyeler içinde kullanılan tarayıcının oluşturma motoruydu. Bu nedenle, bir performans darboğazını ele almak için önce gereksiz oluşturma işlemlerini ararım.

— user281377

8

Ortak bir performans katili .lengthbir fordöngü içindeki HTMLC koleksiyonunu çağırıyor :

function foo(collection) {
    for (var index = 0; index < collection.length; index++) {
        // do something awesome here
    }
}

Bu anti-desen, koleksiyonun boyutunun döngüden her geçişte hesaplanmasına neden olur. Daha iyi yaklaşım, döngü dışındaki uzunluğu hesaplamaktır:

function foo(collection) {
    var collectionLen = collection.length;
    for (var index = 0; index < collectionLen; index++) {
        // do something awesome here
    }
}

— Adam Crossland
kaynak

3

Tarayıcıya bağlıdır. Örnek olarak bu ölçütü ele alalım: FF 5'te "normal" olan, "optimize edilmiş" sürümle hemen hemen aynı zamanda çalışır. Ve gerçekten eski ve sümüklü tarayıcılarda bile, JS aslında öğelerle ilgilenen herhangi bir şey yaparsa, böyle bir şey muhtemelen bir darboğaz olmayacaktır.

1

Hmm! Belki de günümüzün son derece optimizasyonlu JIT derleyicileri bu bilgeliği biraz eskimiş yapıyor.

— Adam Crossland

4

Burada gerçek bir uzman değilim, ama ECMA spec itibaren uzunluğu sadece dizi nesnesinin bir özellik gibi görünüyor. Yani onu çağırmak tüm öğeleri saymak yerine sadece değer döndürür. Tüm uygulamaların teknik özelliklere uyup uymadığı hakkında bir fikriniz yoktur, ancak varsa, kodunuz performansı hiç artırmaz.

— Jacek Prucia

4

@JacekPrucia Koleksiyon değil, dizi dedi - genellikle, gerçek kodda, bu gibi işlevler tarafından döndürülen DOM öğelerinin bir listesi anlamına gelir document.getElementsByTagName. İşlev nodeList, .lengthözelliğe her erişildiğinde uzunluğunu yeniden hesaplayan bir canlı döndürür .

— Yi Jiang

2

@ JacekPrucia karşılaştırması performans artışıdır . Mülk arama ucuz değil.

— Raynos

4

Hayır, sorun flaş değiştirme olarak kullanılan JS'den gelmiyor. Buna ikna değilseniz, actioncript hakkında kendinizi belgeleyin: JS'ye çok yakın.

Performans katili olarak, birkaç kötü uygulama bulabilirsiniz:

Kaydırma, fareyi veya benzeri şeyleri sürekli etkinliğe olay işleyicisi ekleyin. Bunun 2 dezavantajı vardır: olay yeterince tetiklenmezse, uygulamanız reaktif olmaz. Çok fazla tetiklenirse, hiçbir şey için büyük bir CPU yükünüz olacaktır.
Eşzamanlı AJAX aramaları yapma. Javascript çok iş parçacıklı değildir, JS'nin bir kısmı bir şey beklerken uygulamanız dondurulur. Eşzamansız AJAX çağrılarını kullanmanız daha iyi olur ve aynı şekilde uzun bir hesaplama aşamasını ayırmak ve uygulamanızı reaktif tutmak için setTimeout / setInterval kullanın.
Diğer dillerde olduğu gibi yüksek algoritma karmaşıklığı.

— deadalnix
kaynak

Birden fazla uygulamanın tam tarayıcı görüntülerini döndürmeye, hafifletmeye veya canlandırmaya çalıştığını gördüm ve süreçte sefil bir şekilde başarısız oldum - Flash değiştirme yorumunun kaynaklandığı yer :)

— Nic

AJAX'taki ilk A eşzamansız olduğu için, teknik olarak eşzamanlıysa AJAX değil, ama puanınız hala iyi.

— Karl Bielefeldt

Evet doğru, kesinlikle AJAX değil. Ama yine de, bundan kaçınılmalıdır: D

— deadalnix

3

Etkileşimi ve kullanıcı arayüzü için Javascript (jQuery) kullanan bir web sitesinde bazı geri bildirimler verdim - oldukça basit animasyonlar ve manipülasyonlardı, ancak iyi bir bilgisayardaki performans korkunçtu.

Performansla ilgili en büyük sorun, temeldeki DOM modelini ve CSS3 animasyon modelini (veya tuval veya svg) anlamadan yüksek düzeyli soyutlamalar (jQuery gibi) kullanmaktır.

Eğer soyutlamalar olmadan nasıl yapılacağını bilmiyorsanız , o zaman hangi tekniklerin hızlı veya yavaş olduğuna dair mutlak sıfır bilginiz vardır.

JavaScript öğrenin, DOM öğrenin. Bu ikisini öğrendikten ve soyutlamalarınızın kaputun altında ne yaptığını öğrendikten sonra bunları verimli bir şekilde kullanabilirsiniz. Tabii ki çoğu zaman soyutlamanın yavaşlamak ve sadece bir kütüphane olmadan manuel olarak yapmak olduğunu fark ediyorsunuz.

— Raynos
kaynak

1

Javascript'in güzelliği ve dezavantajı, son derece esnek olmasıdır. Bununla birlikte, muhtemelen birçok durumda yapmamanız gereken şeyleri yapmanızı sağlar.

Bir parçası olduğum kod incelemelerinden, büyük endişeler CSS oluşturma ile ilgili olma eğilimindedir. Daha yeni JS geliştiricileri için, küresel kapsamda çok fazla değişkenin kullanıldığını görme eğilimindeyiz.

Ayrıca, yanlış kapanmalar genellikle bellek sızıntılarına neden olabilir. Bununla birlikte, çoğu modern Javascript çerçevesi, kodunuz çerçeveyi takip ettiği sürece bu tür sorunları önler.

— Bu homurdanıyor
kaynak

0

İşte daha iyi jquery kodu yazma hakkında bir yıl kadar önce bulduğum hızlı bir bağlantı: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance /

Performansı öldüren bir iş arkadaşı kodunda bulduğum bir şey, önbelleğe alınması gerekmeyen verileri önbelleğe almaktı.

Misal:

var table = $("#data").dataTable(.....);

DataTables , güzel ızgaralar yapmak için kullandığımız bir jQuery eklentisidir. Her neyse, tablonun içinde yaklaşık 5 bin satır vardı, DataTables eklentisini uyguladıktan sonra tablo değişkenine kaydetmek aslında FireFox ve IE'nin bir komut dosyasının çok uzun sürdüğü konusunda uyarmasına neden oldu. Hikayenin ahlaki, sadece gerekiyorsa verileri önbelleğe.

— Tyanna
kaynak

1

DataTables, önbelleğe alma ile ilgili bir sorundan ziyade gerçekten verimsiz / zayıf bir eklenti gibi görünüyor. 5k hiçbir şey değildir.

— Raynos

@Raynos: 5 kilobayt veri değil, 5 bin satır dedi . Bir "satır" olabilir çok büyük bir şey olabilir.

— Chris Farmer

@ChrisFarmer Eğer bir "satır" çok büyük bir şeyse, o zaman farklı bir sorununuz var demektir.

— Raynos

-1

Duyduğumdan fordöngüler jQuery'den daha hızlı $.each().

— pthesis
kaynak

3

Bu şaka yanıtı mı?

— Raynos