리액트 성능 최적화 기법 2 - 자바스크립트 실행 시간 줄이기

자바스크립트 실행시간을 어떻게 줄이지?

개발자 도구 -> 성능 탭으로 가면 프로파일링 시작 버튼을 누름으로써 성능을 볼 수 있다,

탭에 나와있는 결과를 보며 비정상적으로 긴 실행 시간을 가지고 있는 컴포넌트가 있다면,

해당 컴포넌트로 가서 로직을 변경하므로써 해결할 수 있다.

 

실습

성능 탭에서 프로파일링을 하면 나오는 창이다.

보면 Article 이라는 컴포넌트의 자식 요소들이 유독 눈에 띄는데

끊어지고, 실행되고를 반복하고 있는걸 확인 했다.

 

function removeSpecialCharacter(str) {
     const removeCharacters = ['#', '_', '*', '~', '&', ';', '!', '[', ']', '`', '>', '\n', '=', '-']
     let _str = str
     let i = 0,
       j = 0

     for (i = 0; i < removeCharacters.length; i++) {
       j = 0
       while (j < _str.length) {
         if (_str[j] === removeCharacters[i]) {
           _str = _str.substring(0, j).concat(_str.substring(j + 1))
           continue
         }
         j++
       }
     }

해당 컴포넌트에 로직이 복잡한 함수를 발견하였다.

해당 코드를 아래처럼 바꾸자.

function removeSpecialCharacter(str) {
  return str.replace(/[#_*~&;![\]`>\n=-]/g, "");
}

이후 실행해 보면 Article에 관련한 탭이 깔끔해진것을 확인 할 수 있다.

 

프론트에서 알고리즘 또한 중요한 요소라는것을 알게 되었다.