[Violation] took 1000⬆️ms

[Violation] took 1000⬆️ms

이게 뭐지

앞에서 this 바인딩 문제를 해결하니 이번엔 이상한 경고가 출력된다

대충 이 핸들러 호출하고 종료되기까지 1016초 걸렸으니 왠만하면 비동기로 동작하게끔 하는 게 좋겠다 라는 의미이다

또한 이 경고는 숨길 수가 없다고 한다

 

원인은 경고 출력용 alert 함수 때문이었는데, alert로 출력된 경고 메시지의 ‘확인' 버튼을 눌러야 함수가 종료되었다고 판단하기 때문에 확인 버튼을 언제 누르냐에 따라 위의 경고 메시지의 시간이 달라진다

테스트해보니 3초 뒤에 클릭하면 대충 3초 조금 넘는 시간이 걸렸다고 나왔다

만약 경고 메시지의 확인 버튼을 10분 뒤에 누르면 아마 600,000ms 걸렸다고 나오지 않을까…

 

alert 함수는 위의 함수 종료를 지연시키는 부분에서 알 수 있듯 이후의 모든 자바스크립트 코드를 일시정지시킨다

이 때문에 배포 코드면 몰라도 개발 시에는 코드 동작이 멈추기 때문에 왠만하면 사용하지 말라고 한다

배포 코드에서도 DOM 렌더링을 통해 경고를 띄워주는 등 별개의 방법을 사용하는 것을 추천한다

---

참고자료

Chrome violation : [Violation] Handler took 83ms of runtime

Why shouldn't I use Alert in JavaScript?