console.log가 JavaScript 실행 성능을 저하 시키나요?

디버깅 기능을 사용 console.log하면 JavaScript 실행 성능이 저하됩니까? 프로덕션 환경에서 스크립트 실행 속도에 영향을 줍니까?

단일 구성 위치에서 프로덕션 환경에서 콘솔 로그를 비활성화하는 방법이 있습니까?

공개 사이트 등에서이 기능을 사용하려는 경우 개발자 도구 사용에 대한 지식이 거의없는 사람은 디버그 메시지를 읽을 수 있습니다. 로깅중인 항목에 따라 이것은 바람직한 동작이 아닐 수 있습니다.

가장 좋은 방법 console.log중 하나는 메서드 중 하나에을 래핑하고 조건을 확인하고 실행할 수있는 위치입니다. 프로덕션 빌드에서는 이러한 기능을 피할 수 있습니다. 이 Stack Overflow 질문 은 Closure 컴파일러를 사용하여 동일한 작업을 수행하는 방법에 대해 자세히 설명합니다 .

따라서 귀하의 질문에 답하려면 :

1. 예, 무시할 수 있지만 속도가 감소합니다 .
2. 그러나 사람이 로그를 읽기가 너무 쉽기 때문에 사용하지 마십시오.
3. 에 대한 답변 이 질문은 당신이 생산에서 제거하는 방법에 대한 힌트를 제공 할 수 있습니다.

실제로 console.log는 빈 함수보다 훨씬 느립니다. 이 jsPerf 테스트 를 Chrome 38에서 실행 하면 놀라운 결과를 얻을 수 있습니다.

• 브라우저 콘솔이 닫히면 빈 함수를 호출하는 것보다 호출 console.log이 약 10,000 배 느립니다 .
• 및 콘솔이 열려있을 때, 그것을 호출하면 100만큼 000 배 느립니다 .

합리적인 수의 console.…호출이 한 번 발생하면 성능 지연을 알 수 없습니다 (Chrome 설치시 100 번은 2ms, 콘솔이 열려 있으면 20ms). 하지만 콘솔에 반복적으로 기록하는 경우 (예 : 연결하는 requestAnimationFrame경우) 문제가 발생할 수 있습니다.

최신 정보:

이 테스트에서는 필요에 따라 사용할 수있는 로그 메시지를 보유하는 변수가있는 프로덕션을위한 사용자 지정 "숨겨진 로그"아이디어도 확인했습니다. 그것은 것으로 밝혀졌습니다

• 네이티브보다 약 1,000 배 빠릅니다 console.log.
• 사용자가 콘솔을 열면 분명히 10,000 배 더 빠릅니다.

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

공통 핵심 스크립트에서 콘솔에 대한 바로 가기를 만드는 경우, 예 :

var con = console;

그런 다음 코드 전체에서 con.log ( "message") 또는 con.error ( "error message")를 사용합니다. 프로덕션에서는 핵심 위치에서 con을 다음과 같이 간단히 다시 연결할 수 있습니다.

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

디버깅 기능 console.log를 사용하면 JavaScript 실행 성능이 저하됩니까? 프로덕션 환경에서 스크립트 실행 속도에 영향을 줍니까?

물론 console.log()계산 시간이 걸리기 때문에 프로그램의 성능이 저하됩니다.

단일 구성 위치에서 프로덕션 환경에서 콘솔 로그를 비활성화하는 방법이 있습니까?

표준 console.log 함수를 빈 함수로 재정의하려면 스크립트 시작 부분에이 코드를 넣으십시오.

console.log = function () { };

모든 함수 호출은 성능 을 약간 떨어 뜨립니다. 그러나 몇 가지 console.log눈에 띄는 효과가 없어야합니다.

그러나 지원하지 않는 이전 브라우저에서는 정의되지 않은 오류가 발생합니다. console

성능 저하는 최소화되지만 이전 브라우저에서는 사용자 브라우저 콘솔이 열려 있지 않으면 JavaScript 오류가 발생합니다 log is not a function of undefined. 이는 console.log 호출 이후의 모든 JavaScript 코드가 실행되지 않음을 의미합니다.

래퍼를 만들어 window.console유효한 개체 인지 확인한 다음 래퍼에서 console.log를 호출 할 수 있습니다 . 다음과 같이 간단한 것이 작동합니다.

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

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

다음은 바이올린입니다 : http://jsfiddle.net/enDDV/

이 jsPerf 테스트를 만들었습니다. http://jsperf.com/console-log1337

다른 함수 호출보다 오래 걸리지 않는 것 같습니다.

콘솔 API가없는 브라우저는 어떻습니까? 디버깅을 위해 console.log를 사용해야하는 경우 Paul이 답변에서 제안한 것처럼 콘솔 API를 재정의하는 스크립트를 프로덕션 배포에 포함 할 수 있습니다.

콘솔 메서드의 원래 서명을 유지하기 위해 이렇게합니다. 일반적인 위치에서 다른 JS보다 먼저로드됩니다.

var DEBUG = false; // or true 

그런 다음 코드 전체에서

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