[javascript] Chrome Violation console log 분석 정리

배경설명

• 프로젝트 웹 브라우저에서 Chrome Violation console log가 지속적으로 확인됨.

Chrome Violation 은?

• Chrome 개발자 도구> console> levels> Verbose 선택 시, console 확인 가능
• 오류를 의미하지 않으나, 웹 서비스 성능 개선이 필요하다는 신호 🤩

Chrome Violation 샘플

1. [Violation] 'setTimeout' handler took 895ms

• setTimeout 비동기 함수에서 895ms 동안 멈춰 있었다는 것을 의미함.
• 해결방안
  • setTimeout 호출하는 곳을 먼저 찾아보기 -> 제거 후 다시 테스트
  • 문제가 발생할 만한 Task를 여러 Task로 쪼개보기 -> Chrome Engine이 동시에 여러 일을 병렬 처리할 수 있도록

2. [Violation] Forced reflow while executing JavaScript took 163ms

• reflow : DOM tree 레이아웃을 다시 계산해서 화면에 렌더링하기 때문에 성능에 큰 영향. (reflow vs repaint)
• script에서 reflow를 강제로 발생시키면서 렌더링 시간이 오래 걸린다는 것을 의미
• 해결방안
  • script 단에서 DOM 레이아웃 계산 또는 조작 로직 경량화
• 참고 : Violation-Forced reflow
• repaint : 레이아웃 영향 없이, 요소의 색이나 형식을 변경.

3. [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.

• 이미 scroll-blocking 하고 있는 touchmove event 가 있음.
• 해결방안
  • onScroll addEventListener의 세번째 인자로 { passive:true } 전달 요청
  • window.requestAnimationFrame()

결론

• 😂😂😂😂😂