Jika Anda perlu mendapatkan waktu eksekusi fungsi pada mesin pengembangan lokal Anda Anda, Anda dapat menggunakan alat profil browser Anda, atau perintah konsol seperti console.time()
dan console.timeEnd()
.
Semua browser modern memiliki profiler JavaScript bawaan. Profiler ini harus memberikan pengukuran paling akurat karena Anda tidak perlu mengubah kode yang ada, yang dapat memengaruhi waktu eksekusi fungsi.
Untuk profil JavaScript Anda:
- Di Chrome , tekan F12 dan pilih tab Profil , lalu Kumpulkan Profil CPU JavaScript .
- Di Firefox , instal / buka Firebug, dan klik tombol Profile .
- Di IE 9+ , tekan F12 , klik Script atau Profiler (tergantung pada versi IE Anda).
Atau, pada mesin pengembangan Anda, Anda dapat menambahkan instrumentasi ke kode Anda dengan console.time()
dan console.timeEnd()
. Fungsi-fungsi ini, didukung di Firefox11 +, Chrome2 + dan IE11 +, melaporkan penghitung waktu yang Anda mulai / hentikan console.time()
. time()
mengambil nama penghitung waktu yang ditentukan pengguna sebagai argumen, dantimeEnd()
kemudian melaporkan waktu eksekusi sejak penghitung waktu dimulai:
function a() {
console.time("mytimer");
... do stuff ...
var dur = console.timeEnd("myTimer"); // NOTE: dur only works in FF
}
Perhatikan bahwa hanya Firefox yang mengembalikan waktu yang telah berlalu di timeEnd()
panggilan. Browser lain hanya melaporkan hasilnya ke konsol pengembang: nilai kembalinya timeEnd()
tidak terdefinisi.
Jika Anda ingin mendapatkan waktu eksekusi fungsi di alam , Anda harus memasukkan kode Anda. Anda memiliki beberapa opsi. Anda cukup menyimpan waktu mulai dan berakhir dengan menanyakan new Date().getTime()
:
function a() {
var start = new Date().getTime();
... do stuff ...
var end = new Date().getTime();
var dur = end - start;
}
Namun, Date
objek hanya memiliki resolusi milidetik dan akan dipengaruhi oleh perubahan jam sistem OS. Di browser modern, ada opsi yang lebih baik.
Pilihan yang lebih baik adalah menggunakan Waktu Resolusi Tinggi , alias window.performance.now()
. now()
lebih baik daripada tradisional Date.getTime()
dalam dua cara penting:
now()
adalah ganda dengan resolusi submillisecond yang mewakili jumlah milidetik sejak awal navigasi halaman. Ini mengembalikan jumlah mikrodetik dalam fraksional (misalnya nilai 1000,123 adalah 1 detik dan 123 mikrodetik).
now()
meningkat secara monoton. Hal ini penting karena Date.getTime()
dapat mungkin melompat ke depan atau bahkan mundur pada panggilan berikutnya. Khususnya, jika waktu sistem OS diperbarui (mis. Sinkronisasi jam atom), Date.getTime()
juga diperbarui. now()
dijamin akan selalu meningkat secara monoton, sehingga tidak terpengaruh oleh waktu sistem OS - itu akan selalu menjadi waktu jam dinding (dengan asumsi jam dinding Anda bukan atom ...).
now()
dapat digunakan di hampir setiap tempat itu new Date().getTime()
, dan + new Date
sebagainya Date.now()
. Pengecualiannya adalah bahwa Date
dan now()
waktu tidak tercampur, karena Date
didasarkan pada unix-epoch (jumlah milidetik sejak 1970), sedangkan now()
jumlah milidetik sejak navigasi halaman Anda dimulai (sehingga akan jauh lebih kecil daripada Date
).
Berikut ini contoh cara penggunaan now()
:
function a() {
var start = window.performance.now();
... do stuff ...
var end = window.performance.now();
var dur = end - start;
}
now()
didukung di Chrome stable, Firefox 15+, dan IE10. Ada juga beberapa polyfill yang tersedia.
Satu opsi lain untuk mengukur waktu eksekusi di alam liar adalah UserTiming . UserTiming berperilaku serupa dengan console.time()
dan console.timeEnd()
, tetapi menggunakan Stempel Waktu Resolusi Tinggi yang sama yang now()
menggunakan (sehingga Anda mendapatkan jam sub-milidetik yang meningkat secara monoton), dan menyimpan cap waktu dan durasi ke PerformanceTimeline .
UserTiming memiliki konsep tanda (cap waktu) dan ukuran (durasi). Anda dapat menentukan sebanyak mungkin yang Anda inginkan, dan mereka ditampilkan di PerformanceTimeline .
Untuk menyimpan cap waktu, Anda menelepon mark(startMarkName)
. Untuk mendapatkan durasi sejak tanda pertama Anda, Anda cukup menelepon measure(measurename, startMarkname)
. Durasi tersebut kemudian disimpan di PerformanceTimeline di samping tanda Anda.
function a() {
window.performance.mark("start");
... do stuff ...
window.performance.measure("myfunctionduration", "start");
}
// duration is window.performance.getEntriesByName("myfunctionduration", "measure")[0];
UserTiming tersedia di IE10 + dan Chrome25 +. Ada juga polyfill yang tersedia (yang saya tulis).