FE 성능최적화

웹 성능 결정 요소

로딩 성능 (어떻게 더 빨리 리소스를 로드할것인가) / 렌더링 성능 (어떻게 더 빨리 그릴것인가)

로딩 성능 최적화

lightHouse로 먼저 진단을 한다

이미지 사이즈 최적화

예를들어 로드하는 이미지의 사이즈가 1200x1200이지만, 미리보기용으로 사용될 이미지는 120x120이라고 가정할 때, 이를 240x240정도로 최적화시키면 어떨까?(레티나 디스플레이와 같은 경우 더 많은 픽셀을 차지할수 있기때문)
=> Image processing CDN 적용 혹은 api요청 자체에 사이즈 파라미터를 같이 넘겨받는 경우 조절

Code Split & Lazy Loading

번들의 트리구조를 보고 트리쉐이킹에 용이하도록 만들어진 여러 bundle-analyzer 들이 존재한다.
패키지 매니저에 맞는 bundle-analyzer를 설치해서 확인하면 유난히 큰 파일들이 존재하는데,
만약 진입페이지에서 사용하지 않고 특정 페이지 안에서만 해당 파일(dependency)를 import해서 사용한다면? --> Lazy Loading

텍스트 압축

압축 알고리즘 (웹) : GZIP > Deflate (일반적으로 이 두가지 사용) from server

server 압축 -> 압축풀기 client (file크기가 2kb이상일경우 압축하는게 좋고, 이하일경우는 안하는게 낫다(압축푸는데에도 시간이 소요되기에))

렌더링 성능

Bottleneck 코드 최적화

만약 렌더링을 지연시키는 함수가 있다고 가정하자, 어떤 필요에 의해서 쓸데없는 반복문을 너무 자주 실행시킨다거나
-> 더 효율적인 방식 (정규식 또는 다른 메서드?) or 최적화된 라이브러리 사용 or 작업의 양을 줄이기
선택은 상황에 따라 다르겠지만
어떤 함수가 병목현상을 일으키는 지 파악하는 방법이 핵심이다.
크롬 개발자도구의 perfomance탭에서 파악한다.

테스트로 받은 코드의 성능검사 결과이다.
Article이라는 컴포넌트를 사용하고, 그 안에 removeSpecialCharacter() 라는 마크다운의 특수문자를 지워주는 함수를 기존에 사용하고 있었고, 과도한 비효율적 반복문으로 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++
    }
  }

  return _str
}

렌더링 성능을 개선하기 위해, 예시로 다음과 같은 방안을 제시한다.

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

어디에서 병목현상이 나타나는지만 확인할 수 있으면 위처럼 (극단적 예제지만) 최적화 할 수 있다