Akankah console.log mengurangi performa eksekusi JavaScript?

99

Akankah penggunaan fitur debugging console.logmengurangi kinerja eksekusi JavaScript? Apakah ini akan memengaruhi kecepatan eksekusi skrip di lingkungan produksi?

Apakah ada pendekatan untuk menonaktifkan log konsol di lingkungan produksi dari satu lokasi konfigurasi?

javascript  performance 
— Sudantha
sumber
Semua jawaban, sejauh ini, asumsikan Anda hanya mengeluarkan pesan string. Bagaimana dengan kinerja objek logging, dengan struktur objek yang mungkin besar? misalnya console.log (largeObj)?
— PandaWood
Mengeluarkan sejumlah besar objek ke konsol dapat mengubah pemuatan halaman 3 detik menjadi 30 detik. Hanya sebuah contoh ...
— Andrew
Sederhana console.logmembutuhkan ~ 50ms
— Pedram marandi

Jawaban:

55

Jika Anda akan memiliki ini di situs publik atau sesuatu, siapa pun yang memiliki sedikit pengetahuan tentang penggunaan alat pengembang dapat membaca pesan debug Anda. Bergantung pada apa yang Anda catat, ini mungkin bukan perilaku yang diinginkan.

Salah satu pendekatan terbaik adalah menggabungkannya ke console.logdalam salah satu metode Anda, dan di mana Anda dapat memeriksa kondisi dan menjalankannya. Dalam build produksi, Anda dapat menghindari fungsi-fungsi ini. Ini pertanyaan Stack Overflow berbicara secara rinci tentang bagaimana melakukan hal yang sama dengan menggunakan compiler Penutupan .

Jadi, untuk menjawab pertanyaan Anda:

  1. Ya, itu akan mengurangi kecepatan, meski hanya diabaikan.
  2. Tapi, jangan menggunakannya karena terlalu mudah bagi seseorang untuk membaca log Anda.
  3. Jawaban atas pertanyaan ini dapat memberi Anda petunjuk tentang cara menghapusnya dari produksi.
— Ramesh
sumber
terima kasih tetapi masih membungkus conosle.logakan tetap membuat hit ke fungsi yang diganti bukan?
— Sudantha
15
Sekadar catatan - menggunakan objek console.logke log memang menyebabkan kebocoran memori karena browser mempertahankan struktur objek untuk memungkinkan pengembang memperluas log.
— Shamasis Bhattacharya
3
— Rekursi Tak Terbatas
8
"terlalu mudah bagi seseorang untuk membaca log Anda" - Bagaimana ini menjadi masalah? Ini JavaScript, mereka sudah memiliki akses penuh ke kode sumber!
— Quentin
4
Hanya untuk berpadu: Saya baru saja menemukan, mengirim spam ke console.log bahkan dengan teks statis yang sama (tidak ada objek atau larik; secara harfiah hanya console.log ('test') yang akan melakukannya) juga menyebabkan kinerja yang buruk. Hal ini menjadi perhatian saya saat saya melakukan logging "dipanggil" dalam sebuah fungsi yang dipanggil pada ratusan komponen React selama rendering ulang. Kehadiran hanya kode logging menyebabkan gagap yang sangat mencolok selama pembaruan yang sering.
— Im
81

Sebenarnya, console.logini jauh lebih lambat daripada fungsi kosong. Menjalankan tes jsPerf ini di Chrome 38 saya memberikan hasil yang menakjubkan:

  • ketika konsol browser ditutup, panggilan console.logadalah sekitar 10 000 kali lebih lambat daripada memanggil fungsi kosong,
  • dan saat konsol terbuka, pemanggilannya 100 000 kali lebih lambat .

Bukan berarti Anda akan melihat kelambatan kinerja jika Anda memiliki sejumlah console.…panggilan yang masuk akal yang diaktifkan sekali (seratus akan memakan waktu 2 md pada pemasangan Chrome saya - atau 20 md saat konsol terbuka). Tetapi jika Anda memasukkan barang ke konsol berulang kali - misalnya, menghubungkannya requestAnimationFrame- itu bisa membuat semuanya tersendat.

Memperbarui:

Dalam pengujian ini saya juga telah memeriksa ide "log tersembunyi" khusus untuk produksi - memiliki variabel yang menyimpan pesan log, tersedia sesuai permintaan. Ternyata begitu

  • sekitar 1000 kali lebih cepat dari aslinya console.log,
  • dan jelas 10.000 kali lebih cepat jika pengguna membuka konsolnya.
— tomekwi
sumber
1
Ketika kompilator melihat fungsi kosong, ia tidak mengeksekusi apa pun karena ia melihat baris untuk mengeksekusinya, ia harus menjalankan fungsinya. kompilator tidak menjalankan fungsi kosong dan tidak terpakai sebagai pengoptimalan.
— SidOfc
1
@SidneyLiebrand terima kasih atas infonya, senang mengetahuinya. Hasil pengujian kedua dapat dioptimalkan dengan cara yang sama seperti console.log. Keduanya adalah fungsi yang menghasilkan efek samping.
— tomekwi
1
console.logdengan sendirinya tidak terlalu memengaruhi kinerja dengan cara yang akan Anda perhatikan kecuali Anda mengikatnya ke penangan gulir / ubah ukuran. Ini disebut banyak dan jika browser Anda harus mengirim teks ke konsol seperti 30 / 60x per detik itu bisa menjadi jelek. Dan kemudian ada bug IE yang tidak memungkinkan Anda untuk memilikinya console.logsama sekali dengan konsol ditutup :(
— SidOfc
1
Anda memang benar - saya juga menulisnya di jawaban saya. Sebagai aturan praktis, saya mencoba untuk tidak memiliki panggilan konsol dalam kode produksi. Namun performa bukanlah alasannya - ini lebih karena "terlalu mudah bagi orang awam untuk membaca log Anda" seperti yang ditulis @Ramesh.
— tomekwi
1
logging-on x 3,179 ops/sec ±2.07% (56 runs sampled) logging-off x 56,058,330 ops/sec ±2.87% (56 runs sampled) logging-off-stringify x 1,812,379 ops/sec ±3.50% (58 runs sampled) log-nothing x 59,509,998 ops/sec ±2.63% (59 runs sampled)
— casey
10

Jika Anda membuat pintasan ke konsol dalam skrip inti umum, misalnya:

var con = console;

dan kemudian gunakan con.log ("message") atau con.error ("pesan kesalahan") di seluruh kode Anda, pada produksi Anda dapat dengan mudah memasang ulang con di lokasi inti untuk:

var con = {
    log: function() {},
    error: function() {},
    debug: function() {}
}
— sq2
sumber
16
cara kotor:console.log = function(){}
— br4nnigan
8

Akankah penggunaan fitur debugging console.log mengurangi performa eksekusi JavaScript? Apakah ini akan memengaruhi kecepatan eksekusi skrip di lingkungan produksi?

Tentunya console.log()akan menurunkan performa program Anda karena membutuhkan waktu komputasi.

Apakah ada pendekatan untuk menonaktifkan log konsol di lingkungan produksi dari satu lokasi konfigurasi?

Letakkan kode ini di awal skrip Anda untuk mengganti fungsi console.log standar menjadi fungsi kosong.

console.log = function () { };
— Holydragon
sumber
2
Ini tampaknya menjadi salah satu solusi paling sederhana untuk menonaktifkan log konsol di lingkungan produksi. Bertanya-tanya mengapa tidak memiliki perhatian lebih! Kita dapat mengontrol definisi fungsi kosong ini di bawah variabel yang dapat kita alihkan sebagai benar / salah tergantung pada lingkungan mana yang kita kerjakan (prod atau dev)
— Anshuman Manral
2
Ini adalah jawaban yang brilian! Terima kasih!
— Sistem Rebooter
6

Panggilan fungsi apa pun akan sedikit mengurangi kinerja. Tetapi beberapa console.logseharusnya tidak memiliki efek yang nyata.

Namun itu akan membuang kesalahan yang tidak ditentukan di browser lama yang tidak mendukung console

— Petah
sumber
3

Kinerja yang dicapai akan minimal, namun di browser lama ini akan menyebabkan kesalahan JavaScript jika konsol browser pengguna tidak terbuka log is not a function of undefined. Ini berarti semua kode JavaScript setelah panggilan console.log tidak akan dijalankan.

Anda dapat membuat pembungkus untuk memeriksa apakah window.consolemerupakan objek yang valid, lalu memanggil console.log di pembungkusnya. Sesuatu yang sederhana seperti ini akan berhasil:

window.log = (function(console) {
    var canLog = !!console;
    return function(txt) {
        if(canLog) console.log('log: ' + txt);
    };
})(window.console);

log('my message'); //log: my message

Ini biola: http://jsfiddle.net/enDDV/

— Paul
sumber
2

Saya membuat tes jsPerf ini: http://jsperf.com/console-log1337

Sepertinya tidak perlu waktu lebih lama dari panggilan fungsi lainnya.

Bagaimana dengan browser yang tidak memiliki API konsol? Jika Anda perlu menggunakan console.log untuk debugging, Anda dapat menyertakan skrip dalam penerapan produksi untuk mengganti API konsol, seperti yang disarankan Paul dalam jawabannya.

— Jørgen
sumber
jika saya dapat memilih dua jawaban ini akan naik ke atas
— Sudantha
1
Pengujian Anda tidak hanya menambahkan panggilan console.log, tetapi juga menjalankan operasi jquery yang sama dua kali. Saya telah membuat revisi pengujian Anda berikut, semoga membantu: jsperf.com/console-log1337/7 PS: terima kasih, saya tidak tahu tentang jsperf.com :)
— dubrox
2
Ini sebenarnya tampak jauh lebih lambat daripada panggilan fungsi normal. Dalam duel langsung, hasilnya tidak bisa dibandingkan
— tomekwi
1
Jawaban yang buruk. Bahkan tidak benar. Suara pemikiran yang diharapkan saat @tomekwi menunjukkan perbedaannya luar biasa. Saya telah melakukan beberapa tes dunia nyata sendiri dan benar-benar dapat mengatakan tanpa keraguan spamming console.log pasti menyebabkan kinerja terpukul. Beberapa log di sana-sini setiap detik atau dua, bukan masalah besar, tetapi sering mencatat sesuatu (pada pembaruan bingkai, merender ulang komponen besar) dan perbedaan dengan dan tanpa console.log adalah siang dan malam.
— Im
1

Saya melakukannya dengan cara ini untuk mempertahankan tanda tangan asli dari metode konsol. Di lokasi umum, dimuat sebelum JS lainnya:

var DEBUG = false; // or true

Kemudian di seluruh kode

if (DEBUG) console.log("message", obj, "etc");
if (DEBUG) console.warn("something is not right", obj, "etc");
— ow3n
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.