Console.log có làm giảm hiệu suất thực thi JavaScript không?

Việc sử dụng tính năng gỡ lỗi có console.loglàm giảm hiệu suất thực thi JavaScript không? Nó sẽ ảnh hưởng đến tốc độ thực thi tập lệnh trong môi trường sản xuất?

Có cách nào để tắt nhật ký bảng điều khiển trong môi trường sản xuất từ ​​một vị trí cấu hình duy nhất không?

Nếu bạn sắp có điều này trên một trang web công cộng hoặc một cái gì đó, bất kỳ ai có ít kiến ​​thức về cách sử dụng các công cụ dành cho nhà phát triển đều có thể đọc thông báo gỡ lỗi của bạn. Tùy thuộc vào những gì bạn đang ghi, đây có thể không phải là một hành vi mong muốn.

Một trong những cách tiếp cận tốt nhất là kết hợp console.logmột trong các phương pháp của bạn và nơi bạn có thể kiểm tra các điều kiện và thực thi nó. Trong một phiên bản sản xuất, bạn có thể tránh có những chức năng này. Đây câu hỏi Stack Overflow nói chi tiết về làm thế nào để làm điều tương tự bằng cách sử dụng trình biên dịch Đóng cửa .

Vì vậy, để trả lời câu hỏi của bạn:

1. Có, nó sẽ làm giảm tốc độ, mặc dù chỉ đáng kể.
2. Tuy nhiên, đừng sử dụng nó vì quá dễ dàng để một người đọc nhật ký của bạn.
3. Câu trả lời cho câu hỏi này có thể cung cấp cho bạn gợi ý về cách loại bỏ chúng khỏi sản xuất.

Trên thực tế, console.logchậm hơn rất nhiều so với một hàm rỗng. Chạy thử nghiệm jsPerf này trên Chrome 38 của tôi cho kết quả tuyệt vời:

• khi trình duyệt giao diện điều khiển được đóng lại, gọi console.loglà chậm hơn khoảng 10 000 lần vì gọi một chức năng rỗng,
• và khi giao diện điều khiển đang mở, việc gọi nó chậm hơn 100 000 lần .

Không phải là bạn sẽ nhận thấy độ trễ hiệu suất nếu bạn có một số lượng hợp lý console.…cuộc gọi kích hoạt một lần (một trăm sẽ mất 2 mili giây khi tôi cài đặt Chrome - hoặc 20 mili giây khi mở bảng điều khiển). Nhưng nếu bạn đăng nhập nhiều lần nội dung vào bảng điều khiển - chẳng hạn như nối nó qua requestAnimationFrame- nó có thể khiến mọi thứ trở nên lộn xộn.

Cập nhật:

Trong thử nghiệm này, tôi cũng đã kiểm tra ý tưởng về một “nhật ký ẩn” tùy chỉnh để sản xuất - có một biến chứa các thông báo nhật ký, có sẵn theo yêu cầu. Hóa ra là

• nhanh hơn khoảng 1000 lần so với bản gốc console.log,
• và rõ ràng là nhanh hơn 10 000 lần nếu người dùng mở bảng điều khiển của mình.

const DEBUG = true / false
DEBUG && console.log('string')

Nếu bạn tạo một lối tắt đến bảng điều khiển trong một tập lệnh cốt lõi chung, ví dụ:

var con = console;

và sau đó sử dụng con.log ("thông báo") hoặc con.error ("thông báo lỗi") trong suốt mã của bạn, trong quá trình sản xuất, bạn có thể chỉ cần cuộn lại con ở vị trí cốt lõi để:

var con = {
    log: function() {},
    error: function() {},
    debug: function() {}
}

Việc sử dụng tính năng gỡ lỗi console.log có làm giảm hiệu suất thực thi JavaScript không? Nó sẽ ảnh hưởng đến tốc độ thực thi tập lệnh trong môi trường sản xuất?

Tất nhiên, console.log()sẽ làm giảm hiệu suất chương trình của bạn vì nó cần thời gian tính toán.

Có cách nào để tắt nhật ký bảng điều khiển trong môi trường sản xuất từ ​​một vị trí cấu hình duy nhất không?

Đặt mã này ở đầu tập lệnh của bạn để ghi đè hàm console.log chuẩn thành một hàm trống.

console.log = function () { };

Bất kỳ lệnh gọi hàm nào sẽ làm giảm hiệu suất một chút . Nhưng một số ít console.logsẽ không có bất kỳ ảnh hưởng đáng chú ý nào.

Tuy nhiên, nó sẽ tạo ra các lỗi không xác định trong các trình duyệt cũ hơn không hỗ trợ console

Hiệu suất sẽ là tối thiểu, tuy nhiên trong các trình duyệt cũ hơn, nó sẽ gây ra lỗi JavaScript nếu bảng điều khiển trình duyệt của người dùng không mở log is not a function of undefined. Điều này có nghĩa là tất cả mã JavaScript sau lệnh gọi console.log sẽ không thực thi.

Bạn có thể tạo một trình bao bọc để kiểm tra xem có phải window.consolelà một đối tượng hợp lệ hay không, rồi gọi console.log trong trình bao bọc. Một cái gì đó đơn giản như thế này sẽ hoạt động:

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

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

Đây là một fiddle: http://jsfiddle.net/enDDV/

Tôi đã thực hiện kiểm tra jsPerf này: http://jsperf.com/console-log1337

Nó dường như không mất nhiều thời gian hơn các lệnh gọi hàm khác.

Điều gì về các trình duyệt không có API bảng điều khiển? Nếu bạn cần sử dụng console.log để gỡ lỗi, bạn có thể bao gồm một tập lệnh trong triển khai sản xuất của mình để ghi đè API console, giống như Paul gợi ý trong câu trả lời của anh ấy.

Tôi làm theo cách này để duy trì chữ ký ban đầu của các phương thức bảng điều khiển. Ở một vị trí chung, được tải trước bất kỳ JS nào khác:

var DEBUG = false; // or true 

Sau đó trong suốt mã

if (DEBUG) console.log("message", obj, "etc");
if (DEBUG) console.warn("something is not right", obj, "etc");