JavaScript kodunu nasıl test edersiniz?


337

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ı?


Firefox için YSlow eklentisine bakmak isteyebilirsiniz .
Rob Wells

7
Bu sadece yüklemenin ne kadar süreceğini anlatacak. Bence soru çalışırken performansla daha fazla ilgiliydi.
Sam Hasler

Kodunuzu performans için en yaygın şekilde kullanmak istiyorsanız (ve belirli işlevlere odaklanabildiğinizden daha kesin). Bu gönderi bir zamanlayıcı kullanma konusunda iyi bir örneğe sahiptir (ancak gerçekten şansınız varsa Performance.now'a bakmalısınız
kavanoz

1
Tarayıcınızda hızlı ve kolay testler için jsben.ch
EscapeNetscape

Yanıtlar:


325

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.


3
İyi bilinen iyi performans algoritmaları yerleştirildikten sonra ince bir adımdır.
Rafael Xavier

1
Bu gerçekten iyi bir cevaptır, çünkü sorunun açıkladığı çoğu duruma pratik bir yaklaşım gerektirir. Bununla birlikte, bunu ölçmek için sadece kullanıcı algısı dışında başka bir yol olup olmadığını soran soruya cevap vermez . Düğmelerin dondurulması gibi tüm kesinti süreleri yine de pramodc'un cevabındaki yöntemler ve ona eklenen yorumlar kullanılarak ölçülebilir.
RoboticRenaissance

202

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')

Sonuçlar Şuna benzer

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 ! resim açıklamasını buraya girin


Evet, bunun cazibelerinden biri, uygulamanın hızlı ve kolay olmasıdır. Acaba, günlük kaydı javascript yürütülmesinden bazı performans alacaktır. Diyelim ki bir oyunda bir döngümüz var ve birden çok günlük satırı çıktısı veriyor. Örneğin, 5 dakika boyunca saniyede bir kez, yani 300 satırdır. Kimse biliyor mu?
K. Kilian Lindberg

Bu hala işlevsel mi? Chrome'da görünmüyor.
Örnek olarak öğrenme istatistikleri


@ K.KilianLindberg Günlük kaydı her zaman olduğu gibi performanstan zaman alacaktır, ancak a) testlerinizde tutarlı olacaktır ve b) canlı kodda konsol günlüğü tutmamalısınız. Makinemde test ettikten sonra, zaman kaydı bir MS'nin sadece bir kısmıdır, ancak daha fazlasını yaparsınız.
Polyducks

92

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;

10
Bu çözümün milisaniye cinsinden farkı döndürdüğünü unutmayın
Chris Bier

16
Milisaniye cinsinden zaman, sistem faktörlerine bağlı olarak değişebileceğinden Date () kullanılması önerilmez. Bunun yerine console.time () ve console.timeEnd () kullanın. Daha fazla bilgi için JQuery Lover'ın cevabına bakınız.
mbokil

44
Daha da iyisi, kullanınperformance.now()
edan

1
Performance.now () kullanmadan önce lütfen tarayıcı uyumluluğunu kontrol edin. developer.mozilla.org/tr-TR/docs/Web/API/Performance/…
AR_HZ

Tarih gerçekten geçen zamanı temsil etmiyor. Bu makaleye göz atın: sitepoint.com/measuring-javascript-functions-performance . Performance.now () daha doğru bir zaman damgasıdır.
Millsionaire

61

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.


1
JsPerf şu anda kapalı olduğundan , benchmarkjs kullanımı kolaydır .
mucaho

Ayrıca bir ops / sn ölçüm verdiği için de tavsiye ederim (kodunuzu birden çok kez çalıştırır)
Richard

JsPerf için +9001 (dokuz binden fazla;). Bunu düzenli olarak Python kodu için %timeitbir ipythonREPL kabuğuna benzer şekilde kullanıyorum .
amcgregor

37

Ç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


2
Daha da iyisi , üzerine inşa edilen Kullanıcı Zamanlama API'sını kullanmak olacaktır performance.now().
Chris

30

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

FireFox Performans Sonucu

IE Performans Sonucu

IE Performans Sonucu


Bağlantılı JSLitmus sayfası bozuk indirme bağlantıları içeriyor. Bulduğum JSLitmus (tarayıcılar için) ve jslitmus (NodeJS için küçük harf!).
Rob W

16

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.


5
bu doğrudur, ancak tarayıcıya özgü bir sorunla ilgisi olmayan bir kodlama sorunu olması durumunda profilciler iyidir.
John Boker

1
Elbette! Evet, genel "kötü kodlama" sorunlarını yakalayacaklar ve belirli hatalar gerçek hata ayıklama yapmak için harika, ancak genel kullanım örneği testi için, tüm platformlarda çalışan bir şeyden yararlanacaksınız.
Oli

2
Bunun doğru olduğuna dikkat edin, ancak Firebug gibi bir profil oluşturucu, gerekli değilse de, darboğazları bulmak için hala harika.
Pekka

1
" Sitelerin% 99.999999'u düşünüldüğünde ... " Sanırım bunu
uydurdun

@RobG Ondalık bir basamaktan fazla abartmış olabilirim, ancak geliştirme platformunuzun muhtemelen dağıtım platformunuzla aynı olmayacağı fikri.
Oli

11

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.


Teşekkürler, tam da aradığım şey buydu.
Joseph Sheedy


9

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");
}


4

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?


3

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


Neyin aksine? Anladığımdan emin değilim.
Pekka

Orignal poster sorusunun aksine: "CPU Çevrimleri, Bellek Kullanımı, Yürütme Süresi, vb.?"
snicker


2

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 .


2

İş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

1

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.


1

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.


0

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).


0

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.


-1

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);
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.