JavaScript kodunu nasıl test edersiniz?

CPU Çevrimleri, Bellek Kullanımı, Yürütme Süresi vb.

Eklendi: Kodun ne kadar hızlı çalıştığını algılamanın yanı sıra JavaScript'te performansı test etmenin nicel bir yolu var mı?

Profilers kesinlikle sayı almak için iyi bir yoldur, ancak benim deneyimime göre, algılanan performans kullanıcı / müşteri için önemli olan tek şeydir. Örneğin, bazı verileri göstermek için genişletilmiş bir Ext akordeonuna ve ardından birkaç iç içe Ext ızgarasına sahip bir projemiz vardı. Her şey aslında oldukça hızlıydı, tek bir işlem uzun sürmedi, bir kerede çok fazla bilgi işleniyordu, bu yüzden kullanıcıya yavaş geliyordu.

Daha hızlı bir bileşene geçerek veya bir yöntemi optimize ederek değil, önce verileri oluşturarak, ardından ızgaraları bir setTimeout ile oluşturarak 'düzelttik'. İlk önce bilgiler ortaya çıktı, ardından ızgaralar bir saniye sonra yerine geçecekti. Genel olarak, bu şekilde yapılması biraz daha fazla zaman aldı, ancak kullanıcıya algılanan performans iyileştirildi.

Bu günlerde, Krom profil ve diğer araçlar gibi kullanımına evrensel olarak kullanılabilir ve kolay olan console.time(), console.profile()ve performance.now(). Chrome ayrıca size kare hızınızı neyin öldürdüğünü, kullanıcının nerede beklediğini vb. Gösterebilecek bir zaman çizelgesi görünümü sunar.

Tüm bu araçlar için dokümantasyon bulmak gerçekten kolaydır, bunun için bir SO cevabına ihtiyacınız yoktur. 7 yıl sonra, hala orijinal cevabımın tavsiyesini tekrarlayacağım ve bir kullanıcının fark etmeyeceği yerde sonsuza kadar yavaş kod çalıştırabileceğinizi ve yaptıkları yerde oldukça hızlı kod çalıştırabileceğinizi ve şikayet edeceklerini belirteceğim. oldukça hızlı kod yeterince hızlı değil. Veya sunucu API'nıza olan isteğiniz 220 ms sürdü. Ya da bunun gibi bir şey. Mesele şu ki, bir profil çıkarır ve yapılacak işi aramaya başlarsanız, onu bulabilirsiniz, ancak kullanıcılarınızın ihtiyaç duyduğu iş olmayabilir.

Algılanan performansın gerçekten önemli olduğu konusunda hemfikirim. Ama bazen sadece bir şey yapmanın daha hızlı olduğunu öğrenmek istiyorum. Bazen fark BÜYÜK ve bilmeye değer.

Javascript zamanlayıcılarını kullanabilirsiniz. Ama genellikle çok daha tutarlı (şimdi de Firefox ve Safari'de) yerel Chrome'u kullanarak sonuçları devtool yöntemlerini olsun console.time()&console.timeEnd()

Nasıl kullandığım örneği:

var iterations = 1000000;
console.time('Function #1');
for(var i = 0; i < iterations; i++ ){
    functionOne();
};
console.timeEnd('Function #1')

console.time('Function #2');
for(var i = 0; i < iterations; i++ ){
    functionTwo();
};
console.timeEnd('Function #2')

Güncelleme (4/4/2016):

Chrome kanaryası, kısa bir süre önce her bir satırın ne kadar sürdüğünü görmenizi sağlayan dev araçlar kaynakları sekmesini Profil Seviyesine ekledi !

Her zaman herhangi bir fonksiyonun aldığı zamanı basit tarih nesnesi ile ölçebiliriz .

var start = +new Date();  // log start timestamp
function1();
var end =  +new Date();  // log end timestamp
var diff = end - start;

JsPerf'i deneyin . Kod snippet'lerini karşılaştırmak ve karşılaştırmak için çevrimiçi bir javascript performans aracıdır. Her zaman kullanıyorum.

Çoğu tarayıcı şimdi yüksek çözünürlüklü zamanlama uyguluyor performance.now(). new Date()Performans testinden üstündür çünkü sistem saatinden bağımsız olarak çalışır.

kullanım

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

Referanslar

• https://developer.mozilla.org/en-US/docs/Web/API/Performance.now ()
• http://www.w3.org/TR/hr-time/#dom-performance-now

JSLitmus , geçici JavaScript karşılaştırma testleri oluşturmak için hafif bir araçtır

Arasında performans inceleyelim function expressionve function constructor:

<script src="JSLitmus.js"></script>
<script>

JSLitmus.test("new Function ... ", function() { 
    return new Function("for(var i=0; i<100; i++) {}"); 
});

JSLitmus.test("function() ...", function() { 
       return (function() { for(var i=0; i<100; i++) {}  });
});

</script>

Yukarıda yaptığım şey, bir işlem oluşturmak function expressionve function constructoraynı işlemi gerçekleştirmek. Sonuç aşağıdaki gibidir:

FireFox Performans Sonucu

IE Performans Sonucu

Bazı kişiler belirli eklentiler ve / veya tarayıcılar önerir. Yapmazdım çünkü sadece bu platform için gerçekten kullanışlılar; Firefox'ta yapılan bir test çalıştırması IE7'ye doğru olarak çevrilmez. Sitelerin% 99.999999'unun birden fazla tarayıcı ziyaret ettiği düşünülürse , tüm popüler platformlardaki performansı kontrol etmeniz gerekir.

Benim önerim bunu JS'de tutmak olacaktır. Tüm JS testinizin açık olduğu ve yürütme zamanının bulunduğu bir karşılaştırma sayfası oluşturun. Tam otomatik tutmak için sonuçları AJAX'a gönderebilirsiniz.

Ardından durulayın ve farklı platformlarda tekrarlayın.

Tarayıcıda hızlı bir şekilde küçük test senaryoları çalıştırabildiğim ve sonuçları hemen alabileceğim küçük bir aracım var:

JavaScript Hız Testi

Kod ile oynayabilir ve test edilen tarayıcıda hangi tekniğin daha iyi olduğunu öğrenebilirsiniz.

Bence JavaScript performans (zaman) testi oldukça yeterli. Burada JavaScript performans testi hakkında çok kullanışlı bir makale buldum .

Aktarılan bir işlevin yürütme süresini gösteren basit bir işlev şunlardır:

var perf = function(testName, fn) {
    var startTime = new Date().getTime();
    fn();
    var endTime = new Date().getTime();
    console.log(testName + ": " + (endTime - startTime) + "ms");
}

Bunu kullanabilirsiniz: http://getfirebug.com/js.html . JavaScript için bir profil oluşturuyor.

Hızlı cevap

(Özellikle Sizzle üzerine) jQuery, biz kullanmak bu (çıkış ustası ve açık hızını tarayıcınızdaki / index.html), sırayla kullanır benchmark.js . Bu, kütüphaneyi performans testi için kullanılır.

Uzun cevap

Okuyucu kıyaslama, iş yükü ve profilciler arasındaki farkı bilmiyorsa, önce spec.org'un "benioku 1." bölümündeki bazı performans testi temellerini okuyun . Bu sistem testi içindir, ancak bu temellerin anlaşılması JS perf testine de yardımcı olacaktır. Bazı önemli noktalar:

Kıyaslama nedir?

Bir karşılaştırma ölçütü "bir ölçüm veya değerlendirme standardıdır" (Webster II Sözlüğü). Bilgisayar karşılaştırması, genellikle, test edilen bilgisayarın nasıl çalıştığını açıklayan, kesin olarak tanımlanmış bir işlem kümesi - bir iş yükü - ve bir sonuç sonucu - bir metrik - veren bir bilgisayar programıdır. Bilgisayar karşılaştırma ölçütleri genellikle hızı ölçer: iş yükü ne kadar hızlı tamamlandı; veya verim: birim zaman başına kaç iş yükü birimi tamamlandı. Aynı bilgisayar kıyas ölçütünün birden fazla bilgisayarda çalıştırılması bir karşılaştırma yapılmasına olanak tanır.

Kendi başvurumu karşılaştırmalı mıyım?

İdeal olarak, sistemler için en iyi karşılaştırma testi kendi iş yükünüzle kendi uygulamanız olacaktır. Ne yazık ki, kendi iş yükünüzle kendi uygulamanızı kullanarak farklı sistemler için geniş bir güvenilir, tekrarlanabilir ve karşılaştırılabilir ölçümler tabanına sahip olmak genellikle pratik değildir. Sorunlar arasında iyi bir test vakası oluşturulması, gizlilik endişeleri, karşılaştırılabilir koşulları sağlamada zorluk, zaman, para veya diğer kısıtlamalar sayılabilir.

Kendi başvurum değilse ne olacak?

Standart ölçütleri referans noktası olarak kullanmayı düşünebilirsiniz. İdeal olarak, standartlaştırılmış bir kıyaslama taşınabilir olacaktır ve ilgilendiğiniz platformlarda zaten çalıştırılmış olabilir. Ancak, sonuçları düşünmeden önce, uygulama / bilgi işlem ihtiyaçlarınız ile Benchmark ölçüyor. Karşılaştırmalar çalıştırdığınız uygulama türlerine benziyor mu? İş yükleri benzer özelliklere sahip mi? Bu sorulara verdiğiniz yanıtlara dayanarak, karşılaştırmanın gerçekliğinize nasıl yaklaşabileceğini görmeye başlayabilirsiniz.

Not: Standart bir kıyaslama referans noktası olarak kullanılabilir. Bununla birlikte, satıcı veya ürün seçimi yaparken, SPEC, standartlaştırılmış herhangi bir karşılaştırmanın kendi gerçek uygulamanızı karşılaştırmanın yerini alabileceğini iddia etmez.

Performans testi JS

İdeal olarak, en iyi performans testi, test etmeniz gerekenleri kendi iş yükünüzle değiştirerek kendi uygulamanızı kullanmak olacaktır: farklı kütüphaneler, makineler, vb.

Bu mümkün değilse (ve genellikle değildir). İlk önemli adım: iş yükünüzü tanımlayın. Uygulamanızın iş yükünü yansıtmalıdır. Gelen bu konuşma Vyacheslav Egorov kaçınmalısınız boktan iş yükleri bahsediyor.

Ardından, genellikle hız veya iş hacmi gibi metrikleri toplamanıza yardımcı olması için benchmark.js gibi araçları kullanabilirsiniz. Sizzle'de, düzeltmelerin veya değişikliklerin kütüphanenin sistemik performansını nasıl etkilediğini karşılaştırmak istiyoruz.

Bir şey gerçekten kötü performans gösteriyorsa, bir sonraki adımınız darboğaz aramaktır.

Darboğazları nasıl bulurum? Profilers

Javascript yürütme profilini en iyi yolu nedir?

Yürütme zamanının en iyi önlem olduğunu düşünüyorum.

Firebug'da console.profile kullanabilirsiniz

Genellikle sadece javascript performansını, komut dosyasının ne kadar çalıştığını test ederim. jQuery Lover, javascript kod performansını test etmek için iyi bir makale bağlantısı verdi , ancak makale yalnızca javascript kodunuzun ne kadar çalıştığını test etmeyi gösteriyor. Ayrıca, " büyük veri kümeleriyle çalışırken jQuery kodunuzu geliştirmeye ilişkin 5 ipucu" adlı makaleyi okumanızı da tavsiye ederim .

İşte zaman performansı için yeniden kullanılabilir bir sınıf. Örnek kodda yer almaktadır:

/*
     Help track time lapse - tells you the time difference between each "check()" and since the "start()"

 */
var TimeCapture = function () {
    var start = new Date().getTime();
    var last = start;
    var now = start;
    this.start = function () {
        start = new Date().getTime();
    };
    this.check = function (message) {
        now = (new Date().getTime());
        console.log(message, 'START:', now - start, 'LAST:', now - last);
        last = now;
    };
};

//Example:
var time = new TimeCapture();
//begin tracking time
time.start();
//...do stuff
time.check('say something here')//look at your console for output
//..do more stuff
time.check('say something else')//look at your console for output
//..do more stuff
time.check('say something else one more time')//look at your console for output

UX Profiler bu soruna kullanıcı açısından yaklaşır. Bazı kullanıcı işlemlerinin (tıklama) neden olduğu tüm tarayıcı olaylarını, ağ etkinliğini vb. Gruplandırır ve gecikme, zaman aşımları vb.

Benzer bir şey arıyordum ama bunu buldum.

https://jsbench.me/

Yan yana karşılaştırmaya izin verir ve sonuçları da paylaşabilirsiniz.

Altın kural HERHANGİ BİR koşulda kullanıcı tarayıcınızı kilitlememektir. Bundan sonra, genellikle yürütme süresine, ardından bellek kullanımına bakarım (çılgın bir şey yapmazsanız, bu durumda daha yüksek bir öncelik olabilir).

Performans testi geç bir dönüm noktası haline geldi, ancak performans testinin KG'de veya hatta ürün gönderildikten sonra bile önemli bir süreç olmadığı anlamına gelmez. Uygulamayı geliştirirken birçok farklı araç kullanıyorum, bazıları krom Profiler gibi yukarıda bahsettiğim şey genellikle bir SaaS'a veya bir şey açığa çıkabileceğim ve bir şeyin göbek gittiğini söyleyene kadar unutabileceğim bir açık kaynaklara bakıyorum. .

Sadece bazı temel uyarıları ayarlamak için çemberlerden atlamak zorunda kalmadan performansa göz atmanıza yardımcı olacak birçok harika araç var. İşte kendiniz için kontrol etmeye değer olduğunu düşündüğüm birkaç tane.

1. Sematext.com
2. Datadog.com
3. Uptime.com
4. Smartbear.com
5. Solarwinds.com

Denemek ve daha net bir resim boyamak için, burada izleme bir uygulama tepki için nasıl kurulacağı biraz öğretici olduğunu.

Bu, belirli bir işlem için performans bilgisi toplamanın iyi bir yoludur.

start = new Date().getTime(); 
for (var n = 0; n < maxCount; n++) {
/* perform the operation to be measured *//
}
elapsed = new Date().getTime() - start;
assert(true,"Measured time: " + elapsed);