Bagaimana cara Anda menguji kode JavaScript?

Siklus CPU, Penggunaan Memori, Waktu Eksekusi, dll?

Ditambahkan: Apakah ada cara kuantitatif untuk menguji kinerja dalam JavaScript selain hanya persepsi seberapa cepat kode berjalan?

Profiler jelas merupakan cara yang baik untuk mendapatkan angka, tetapi dalam pengalaman saya, kinerja yang dirasakan adalah yang terpenting bagi pengguna / klien. Misalnya, kami memiliki proyek dengan akordeon Ext yang diperluas untuk menampilkan beberapa data dan kemudian beberapa grid Ext bersarang. Semuanya benar-benar merender dengan sangat cepat, tidak ada operasi yang memakan waktu lama, hanya ada banyak informasi yang diberikan sekaligus, sehingga terasa lambat bagi pengguna.

Kami 'memperbaiki' ini, bukan dengan beralih ke komponen yang lebih cepat, atau mengoptimalkan beberapa metode, tetapi dengan merender data terlebih dahulu, lalu merender kisi-kisi dengan setTimeout. Jadi, informasinya muncul lebih dulu, maka grid akan muncul sesaat kemudian. Secara keseluruhan, butuh sedikit waktu pemrosesan untuk melakukannya dengan cara itu, tetapi bagi pengguna, kinerja yang dirasakan membaik.

Hari-hari ini, profiler Chrome dan alat-alat lain yang tersedia secara universal dan mudah untuk digunakan, seperti console.time(), console.profile(), dan performance.now(). Chrome juga memberi Anda tampilan garis waktu yang dapat menunjukkan kepada Anda apa yang membunuh laju bingkai Anda, di mana pengguna mungkin menunggu, dll.

Menemukan dokumentasi untuk semua alat ini sangat mudah, Anda tidak perlu jawaban SO untuk itu. 7 tahun kemudian, saya masih akan mengulangi saran dari jawaban asli saya dan menunjukkan bahwa Anda dapat menjalankan kode lambat selamanya di mana pengguna tidak akan melihatnya, dan kode cukup cepat berjalan di mana mereka melakukannya, dan mereka akan mengeluh tentang kode yang cukup cepat tidak cukup cepat. Atau permintaan Anda ke API server Anda membutuhkan 220ms. Atau sesuatu yang lain seperti itu. Intinya tetap bahwa jika Anda mengambil profiler dan pergi mencari pekerjaan untuk dilakukan, Anda akan menemukannya, tetapi itu mungkin bukan pekerjaan yang dibutuhkan pengguna Anda.

Saya setuju bahwa persepsi kinerja adalah yang terpenting. Tetapi kadang-kadang saya hanya ingin mengetahui metode melakukan sesuatu yang lebih cepat. Terkadang perbedaannya BESAR dan patut diketahui.

Anda bisa menggunakan pengatur waktu javascript. Tapi saya biasanya mendapatkan hasil yang jauh lebih konsisten menggunakan native Chrome (sekarang juga di Firefox dan Safari) metode devTool console.time()&console.timeEnd()

Contoh bagaimana saya menggunakannya:

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

Pembaruan (4/4/2016):

Chrome canary baru-baru ini menambahkan Line Level Profileing pada tab sumber alat dev yang memungkinkan Anda melihat dengan tepat berapa lama setiap baris untuk dieksekusi!

Kami selalu dapat mengukur waktu yang diambil oleh fungsi apa pun dengan objek tanggal sederhana .

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

Coba jsPerf . Ini adalah alat kinerja javascript online untuk membuat tolok ukur dan membandingkan cuplikan kode. Saya menggunakannya sepanjang waktu.

Sebagian besar browser sekarang menerapkan timing resolusi tinggi di performance.now(). Ini lebih unggul daripada new Date()untuk pengujian kinerja karena beroperasi secara independen dari jam sistem.

Pemakaian

var start = performance.now();

// code being timed...

var duration = performance.now() - start;

Referensi

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

JSLitmus adalah alat ringan untuk membuat tes benchmark JavaScript ad-hoc

Mari kita periksa kinerja antara function expressiondan 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>

Apa yang saya lakukan di atas adalah membuat function expressiondan function constructormelakukan operasi yang sama. Hasilnya adalah sebagai berikut:

Hasil Kinerja FireFox

Hasil Kinerja IE

Beberapa orang menyarankan plug-in dan / atau browser tertentu. Saya tidak akan melakukannya karena mereka hanya sangat berguna untuk platform yang satu itu; uji coba di Firefox tidak akan menerjemahkan secara akurat ke IE7. Mengingat 99,999999% situs memiliki lebih dari satu browser mengunjungi mereka, Anda perlu memeriksa kinerja pada semua platform populer.

Saran saya adalah menyimpan ini di JS. Buat halaman benchmarking dengan semua tes JS Anda dan waktu eksekusi. Anda bahkan dapat memilikinya AJAX-posting hasilnya kembali kepada Anda untuk menjaganya agar tetap sepenuhnya otomatis.

Kemudian cukup bilas dan ulangi dengan platform yang berbeda.

Saya memiliki alat kecil di mana saya dapat dengan cepat menjalankan test case kecil di browser dan segera mendapatkan hasilnya:

Tes Kecepatan JavaScript

Anda dapat bermain dengan kode dan mencari tahu teknik mana yang lebih baik di browser yang diuji.

Saya pikir pengujian kinerja (waktu) JavaScript sudah cukup. Saya menemukan artikel yang sangat berguna tentang pengujian kinerja JavaScript di sini .

Berikut adalah fungsi sederhana yang menampilkan waktu eksekusi dari fungsi yang diteruskan:

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

Anda dapat menggunakan ini: http://getfirebug.com/js.html . Ini memiliki profiler untuk JavaScript.

Jawaban cepat

Di jQuery (lebih khusus tentang Sizzle), kami menggunakan ini (checkout master dan open speed / index.html di browser Anda), yang pada gilirannya menggunakan benchmark.js . Ini digunakan untuk menguji kinerja perpustakaan.

Jawaban panjang

Jika pembaca tidak mengetahui perbedaan antara tolok ukur, beban kerja, dan profiler, bacalah terlebih dahulu beberapa yayasan pengujian kinerja pada bagian "readme 1st" di spec.org . Ini untuk pengujian sistem, tetapi memahami dasar-dasar ini juga akan membantu pengujian JS perf. Beberapa hal penting:

Apa itu tolok ukur?

Suatu tolok ukur adalah "standar pengukuran atau evaluasi" (Kamus Webster II). Patokan komputer biasanya adalah program komputer yang melakukan serangkaian operasi yang didefinisikan secara ketat - beban kerja - dan mengembalikan beberapa bentuk hasil - metrik - yang menggambarkan kinerja komputer yang diuji. Metrik tolok ukur komputer biasanya mengukur kecepatan: seberapa cepat beban kerja diselesaikan; atau throughput: berapa banyak unit beban kerja per unit waktu diselesaikan. Menjalankan tolok ukur komputer yang sama pada banyak komputer memungkinkan dilakukannya perbandingan.

Haruskah saya membandingkan aplikasi saya sendiri?

Idealnya, uji perbandingan terbaik untuk sistem adalah aplikasi Anda sendiri dengan beban kerja Anda sendiri. Sayangnya, seringkali tidak praktis untuk mendapatkan basis pengukuran yang andal, berulang, dan sebanding untuk berbagai sistem yang menggunakan aplikasi Anda sendiri dengan beban kerja Anda sendiri. Masalah mungkin termasuk pembuatan uji kasus yang baik, masalah kerahasiaan, kesulitan memastikan kondisi yang sebanding, waktu, uang, atau kendala lainnya.

Jika bukan aplikasi saya sendiri, lalu apa?

Anda mungkin ingin mempertimbangkan untuk menggunakan tolok ukur standar sebagai titik referensi. Idealnya, patokan standar akan portabel, dan mungkin sudah dijalankan pada platform yang Anda minati. Namun, sebelum Anda mempertimbangkan hasil, Anda perlu memastikan bahwa Anda memahami korelasi antara kebutuhan aplikasi / komputasi Anda dan apa tolok ukur sedang mengukur. Apakah tolok ukurnya serupa dengan jenis aplikasi yang Anda jalankan? Apakah beban kerja memiliki karakteristik yang serupa? Berdasarkan jawaban Anda atas pertanyaan-pertanyaan ini, Anda dapat mulai melihat bagaimana tolok ukur dapat mendekati kenyataan Anda.

Catatan: Patokan standar dapat berfungsi sebagai titik referensi. Namun demikian, ketika Anda melakukan pemilihan vendor atau produk, SPEC tidak mengklaim bahwa tolok ukur standar apa pun dapat menggantikan penentuan tolok ukur aplikasi aktual Anda sendiri.

Pengujian kinerja JS

Idealnya, tes perf terbaik akan menggunakan aplikasi Anda sendiri dengan pengalihan beban kerja Anda sendiri apa yang perlu Anda uji: perpustakaan yang berbeda, mesin, dll.

Jika ini tidak layak (dan biasanya tidak). Langkah penting pertama: tentukan beban kerja Anda. Itu harus mencerminkan beban kerja aplikasi Anda. Dalam pembicaraan ini , Vyacheslav Egorov berbicara tentang beban kerja buruk yang harus Anda hindari.

Lalu, Anda bisa menggunakan alat seperti benchmark.js untuk membantu Anda mengumpulkan metrik, biasanya kecepatan atau throughput. Di Sizzle, kami tertarik untuk membandingkan bagaimana perbaikan atau perubahan memengaruhi kinerja sistem perpustakaan.

Jika sesuatu berkinerja sangat buruk, langkah Anda selanjutnya adalah mencari kemacetan.

Bagaimana cara menemukan kemacetan? Profiler

Apa cara terbaik untuk melakukan eksekusi profil javascript?

Saya menemukan waktu eksekusi menjadi ukuran terbaik.

Anda dapat menggunakan console.profile di firebug

Saya biasanya hanya menguji kinerja javascript, berapa lama script berjalan. jQuery Lover memberikan tautan artikel yang bagus untuk menguji kinerja kode javascript , tetapi artikel itu hanya menunjukkan cara menguji berapa lama kode javascript Anda berjalan. Saya juga merekomendasikan membaca artikel yang disebut "5 tips untuk meningkatkan kode jQuery Anda saat bekerja dengan set data yang sangat besar".

Ini adalah kelas yang dapat digunakan kembali untuk kinerja waktu. Contoh termasuk dalam kode:

/*
     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 mendekati masalah ini dari perspektif pengguna. Ini mengelompokkan semua acara browser, aktivitas jaringan dll yang disebabkan oleh beberapa tindakan pengguna (klik) dan mempertimbangkan semua aspek seperti latensi, waktu tunggu, dll.

Saya mencari sesuatu yang serupa tetapi menemukan ini.

https://jsbench.me/

Ini memungkinkan perbandingan sisi ke sisi dan Anda kemudian dapat juga membagikan hasilnya.

Aturan emas adalah BUKAN dalam keadaan APAPUN mengunci browser pengguna Anda. Setelah itu, saya biasanya melihat waktu eksekusi, diikuti oleh penggunaan memori (kecuali Anda melakukan sesuatu yang gila, dalam hal ini bisa menjadi prioritas yang lebih tinggi).

Pengujian kinerja menjadi semacam kata kunci pada akhir-akhir ini tetapi itu tidak berarti bahwa pengujian kinerja bukanlah proses penting dalam QA atau bahkan setelah produk dikirim. Dan ketika saya mengembangkan aplikasi saya menggunakan banyak alat yang berbeda, beberapa dari mereka yang disebutkan di atas seperti Profiler chrome saya biasanya melihat SaaS atau sesuatu opensource yang bisa saya mulai dan lupakan itu sampai saya mendapatkan peringatan yang mengatakan bahwa ada sesuatu yang meningkat. .

Ada banyak alat luar biasa yang akan membantu Anda mengawasi kinerja tanpa harus Anda lompati hanya untuk menyiapkan beberapa peringatan dasar. Berikut adalah beberapa yang menurut saya layak untuk Anda periksa sendiri.

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

Untuk mencoba dan melukis gambar yang lebih jelas, berikut adalah sedikit tutorial tentang cara mengatur pemantauan untuk aplikasi yang bereaksi.

Ini adalah cara yang baik untuk mengumpulkan informasi kinerja untuk operasi tertentu.

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