console.log와 성능

결론부터 말하면 console.log가 많아지면 정말로 느려진다.
하지만 이유는 DOM 크기 증가와는 완전히 다른 메커니즘

---

1. console.log가 많아지면 느려지는 이유

✔ 1) DevTools가 열려 있을 때 성능 급격히 저하

Chrome DevTools가 켜져 있으면, 로그를
UI에 렌더링해야 하기 때문에 매우 큰 비용이 든다.

• 로그 문자열 포맷팅
• 객체 Serialize
• Console 패널에 DOM 요소로 렌더링
• 과거 로그 저장 및 스크롤 처리

특히 루프 내부에서 매 프레임(console.log) 하면 FPS가 크게 떨어진다.

---

✔ 2) 로그가 많으면 JS 실행 자체도 늦어진다

console.log는 I/O 작업이다.

실제로 아래와 같은 작업을 수행한다:

1. 문자열 변환
2. 객체를 serialize (특히 깊은 객체일 경우 시간 증가)
3. 브라우저의 로깅 시스템에 전달
4. DevTools에서 렌더링(있는 경우)

→ 즉, JS 엔진이 pure 연산을 수행할 때보다 느려진다.

---

✔ 3) 비동기적이지만 완전히 free는 아니다

Chrome은 log 출력을 비동기 처리하지만
호출 자체는 비용이 있으므로 연산이 많은 루프에서는 속도 차이가 누적된다.

예시:

for (let i = 0; i < 1_000_000; i++) {
  console.log(i);
}

→ 이건 사실상 브라우저를 멈추게 만든다.

---

2. DOM이 커질 때 느려지는 이유와 비교하면?

원인 DOM 성능 저하 console.log 성능 저하

스타일 계산/레이아웃	영향 있음	영향 없음
노드 수 증가	영향 큼	영향 없음
JS 실행량 증가	간접적 영향	직접적 영향
UI 렌더링 비용	적음	DevTools 열림 시 매우 큼
성능 병목 위치	Layout 엔진	JS 엔진 + Console UI

→ 둘 다 “렌더링 비용 증가 때문에 느려진다”는 점은 비슷하지만
루트 원인은 완전히 다르다.

---

3. 실무용 Best Practice (console.log 관련)

✔ 1) 프로덕션 환경에서는 반드시 로그 제거

webpack, Vite, SWC 등에서 아래 설정 필수:

drop_console: true

✔ 2) 루프/리렌더링 영역에서는 console.log 자제

특히 React에서 렌더마다 찍히는 log는 성능을 크게 떨어뜨린다.

✔ 3) 대량 로그는 batch해서 처리

예:

const buffer = [];
function debug(msg) {
  buffer.push(msg);
  if (buffer.length > 50) {
    console.log(buffer.join("\n"));
    buffer.length = 0;
  }
}

✔ 4) logging 라이브러리 사용

• loglevel
• pino browser
  등을 사용하면 serialize 비용이 대폭 줄어든다.

---

결론

console.log가 많아지면 느려지는 이유는
‘로그 출력 자체의 비용 + DevTools 렌더링 비용’ 때문이다.

그러나 결과적으로 FPS 하락, 이벤트 응답 지연, 렌더링 지연 같은
“느린 현상”은 DOM 크기 증가와 비슷하게 사용자에게 체감될 수 있다.