• 병목 현상 코드를 최적화

문제 분석

크롬 개발자도구 → [performance] → 좌측 상단 ↩️ 새로고침 버튼(Start profiling) 클릭

• 자바스크립트 코드에서 병목현상 발생
  • Article 컴포넌트에서 removeSpecialCharacter 로 인한 병목현상 발생

해결책

• 효율적인 함수로 개선

  • 자바스크립트 내장함수를 이용하거나 정규식을 사용

• 작업하는 양을 줄이기

  • 실질적으로 필요한 부분만큼 범위를 축소하거나 제한하여 작업량을 줄이기

  // 기존 코드
  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++;
      }
    }
    return _str;
  }
  
  // 개선된 코드
  function removeSpecialCharacter(str) {
    let _str = str.substring(0, 300);
    _str.replace(/[\\#\\_\\*\\~\\&\\;\\~\\[\\]\\`\\n\\=\\-\\>\\~]/g, "");
    return _str;
  }
  

개선 후

BEFORE

• 소요시간 : 1100 ms

AFTER

• 소요시간 : 0.14 ms