perfomance탭으로 javascript 최적화

불필요한 자바스크립트 코드때문에 성능에 악영향을 끼치는것을 확인할수 있다.

 

하지만 어떤코드가 원인인지 알수가 없는데, 이떄 이용하는것이 perfomance탭이다.

이 performance탭은 페이지가 로드되면서 실행되는 작업들을 타임라인과 차트로 보여준다.

시계방향 화살표 모양을 누르면 프로파일링을 시작한다.

 

맨위의 타입은 어떤타입의 작업들이 어느정도 비율로 실행됬는지를 보여준다. 또한 페이지 전체의 타임라인을 보여준다.

 

 

 

네트워크 부분에 앞에부분에 html이 다 로드되면 , javascript파일이 로드되는것을 알 수 있다.

 

자바스크립트 로드가 완료되고, article api가 호출되는것을 볼 수 있다.  article api는 실행은 금방끝나지만 , callbak 떄문에 회색선으로 쭉 이어진것을 볼 수 있다.밑에 Article 컴포넌트를 보면 필요이상으로 실행중인것을 확인할 수 있다. 

 

타이밍 탭을 들어가도 Article 컴포넌트가 굉장히 긴시간동안 실행중인것을 볼 수 있다.

 

Article 컴포넌트를 확대시키면 removeSpecialCharacter 작업이 대다수의 작업시간을 잡아먹는중인것을 알 수 있다.

이제 removeSpecialCharacter 를 수정하면 성능최적화가 가능하다라는것을 파악했다.

 

 

직접 소스코드를 찾아가서 removeSpecialCharacter 를 살펴보면, 특수문자를 제거하기위해 for , while 반복문을 2번이나 사용하는것을 볼 수 있다. 이 비효율적인 코드를 개선하기위한 방법으로는 크게 2가지가 있다

 

1.특수문자를 효율적으로 제거하기 (replace함수와 정규식사용  or  마크다운의 특수문자를 지워주는 라이브러리사용)

2.작업하는 양 줄이기 (모든문자열을 검사하지말고 앞에 200~300자 정도만 검사)

 

위에서 말한 해결방안 1,2를 모두적용해서 함수를 수정해보았다.

 

 

다시 performance 탭에서 removeSpecialCharacter함수를 살펴보면, 굉장히 짧아진것을 확인할 수 있다.

 

또한 lighthouse탭에서 보고서를 받은결과 성능상 개선된것을 확인할 수 있다.