[JavaScript] Optimization

jiseung·2021년 12월 20일
0

JavaScript

목록 보기
5/5

Make it work, Make it right, Make it fast
- Kent Beck
RIGHT : Resource (자원 소모 : 메모리, 네트워크 트래픽)
FAST : Time

시간

1. 초기 구동 시간 : 초기에 애플리케이션이 로드되는 시간

  • 다운로드해야 하는 파일 갯수와 용량 최소화
    : 이미지 스프라이트 기법, 이미지 용량 최적화(JPEG 사용), 최적화된 폰트 사용
  • 최소화한 CSS, JS 파일을 사용해 파일의 용량 줄이기 (Minifier 사용하여 코드 최적화)
@charset 'utf-8';body{font-size:14px;background-color:#000;color:#fff}main{width:100%;max-width:1000px;margin:0 auto}
  • 프레임워크는 필요한 것만 사용

2. 계산 시간 : 연산 시간

메모이제이션. 효율적이고 빠르게 계산을 수행하도록 코드 작성

3. 반응 시간 : 반응 시간

브라우저 렌더링 방식 이해하기
css 속성 별 reflow & repaint
➡️ reflow가 repaint보다 성능 면에서 낫다.

  1. JS 보다는 CSS 애니메이션을 활용
  • JS로 스타일을 수정해도 결국 CSS 속성으로 업데이트 된다.
  1. Transform 속성을 사용(GPU 사용)
  2. repaint, reflow 를 유발하는 속성은 되도록 사용하지 않는다.
  3. requestAnimationFrame 사용
	window.requestAnimationFrame(play);
  • 재귀적으로 호출해 브라우저가 애니메이션을 최적화하도록 하고, 비 활성 탭에서 애니메이션이 동작하지 않도록 한다.
  1. DOM 접근과 업데이트는 가능한 적게
  • DOM 접근은 가능한 좁은 범위에서 적게 사용
  const parent = document.querySelector('.parent');
  const targetImg = parent.querySelector('.figImg');
  const targetTxt = parent.querySelector('.figCap');
  • Document fragment를 사용해서 한번에 DOM을 업데이트
  const main = document.querySelector('main');
  const frag = document.createDocumentFragment();

  for (let i = 0; i < 10; i++) {
      const article = document.createElement('article');
      article.innerHTML = `
      <figure>
          <img src="blahblah.jpg" alt="" class="figImg" />
          <figcaption class="figCap">blahblah</figcaption>
      </figure>
      `;

      frag.appendChild(article);
  }
  main.appendChild(frag);
profile
Frontend Web Developer

0개의 댓글