[JS] 최적화 (Optimization)

Javascript를 최적화를 위한 다양한 방법들을 알아보자!

 

[ 속도가 중요한 이유 ]

https://web.dev/why-speed-matters/

속도가 왜 중요합니까?

 

 

성능 측정의 척도 

- 올바르게 동작하게 만든다 

👉  메모리, 네트워크 트래픽과 같은 자원과 연관 

 

- 빠르게 동작하게 만든다.

👉  시간과 관계

 

---

 

시간

시간은 크게 3가지로 분류한다.

 

1. 초기 구동시간 

2. 계산시간

3. 반응 시간

 

이 시간들을 어떻게 최적화 할지 알아보자.

 

 

초기 구동시간 

- 초기에 애플리케이션이 로드 되는 시간

 

[ 초기 구동시간을 줄이는 법 ] 

 

- 다운로드 해야하는 파일 갯수,용량은 작게!

 

👉  이미지 스프라이트 기법 

 

👉  가능한 최신 포맷의 이미지 사용 (WebP ,AVIF)

      ( IE 지원불가능 주의 )

 

👉 최적화된 폰트사용

     ( 폰트용량 고려, 최신포맷의 폰트사용 , 이미지폰트사용 )

 

계산시간

- 동일한 계산을 얼마나 빨리 수행하는지

👉 알고리즘 영역

 

반응 시간

- 사용자 행동에 얼마나 빨리 반응하는지

 

반응시간을 줄이기 위해선 브라우저의 렌더링 과정을 이해해야한다.

 

 

[ 😀 브라우저 렌더링에 대해 궁금하다면 ? ] 

https://mandelina-code.tistory.com/63

[FE] 웹페이지 렌더링과 page reflow & repaint

 

 

반응 시간을 줄이기 위해서는

 

1.  JS보단 CSS로 애니메이션 수정 

 

 

2.  Position보단 Transform 속성을 사용

 

 

3.  repaint, reflow 를 유발하는 속성은 되도록 사용하지 않기

 

 

 

참고 : css 속성별 reflow & repaint 를 유발하는 브라우저 

https://csstriggers.com/

CSS Triggers

 

 

4. requestAnimationFrame 을 사용

 

   requestAnimationFrame 란 ?

- 비활성 탭에서는 애니메이션이 동작하지 않게 한다.

- 브라우저가 애니메이션을 최적화 하도록 한다.

 

 

 

5. DOM 접근과 업데이트는 가능한 적게한다. 

 

  - DOM접근은 가능한 좁은 범위에서!

  - DocumentFragment 을 사용하여 DOM을 한번에 업데이트

 

 

---

메모리

 

메모리누수 ?

프로그램이 필요하지 않은 메모리 공간을 계속해서 점유하는 현상을 의미

이를 방지하기 위해 고수준 언어에는 가비지 컬렉터가 존재

 

Garbage Collection ?

- 자바스크립트 엔진이 사용하지 않는 메모리를 추정하여 삭제한다.

- 이때 사용하는 방식은 참조 카운팅이다.

- 참조카운팅이 0이 되면 값을 메모리에서 삭제

- 객체끼리 서로 맞물려있어 제거되지 않았던 순환 참조 문제가 있었지만 마크 스위프 알고리즘을 통해 해결 

 

 

 

[마크 스위프 알고리즘]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management#mark-and-sweep_algorithm

자바스크립트의 메모리 관리 - JavaScript | MDN

 

- 전역변수는 프로그램이 종료되기 전까지 계속 메모리에 존재하므로 주의해서 사용해야한다.

 

 

---

strict mode (엄격모드)

 

엄격모드란 ? 

- 오류를 줄여 안정적인 코드를 생산하기 위해 ES5부터 엄격모드가 추가되었다. 

- 자바스크립트 언어의 문법을 좀 더 엄격히 적용하여 오류발생을 줄이고 최적화 작업에 문제를 일으킬수 있는 코드에 대해 명시적인 에러를 발생시킨다.

 

적용방법

- 전역의 선두에 'use strict'를 추가한다.

'use strict' ;

 

엄격모드가 발생시키는 에러

 

1. 암묵적 전역 : 선언하지 않은 변수를 참조하면 RefernceError

 

2. 변수,함수,매개변수의 삭제 : delete연산자로 지울수 없는 값 삭제시 SyntaxError 

 

3. 매개변수 이름의 중복 : 중복된 매개변수 이름을 사용하면 SyntaxError 

 

4. 읽기 전용 객체에 값을 할당하면 에러 

 

 

---

 

하지만 전역에 strict mode를 적용하는것 또는 함수단위로 적용하는 것은 피하고

즉시 실행 함수로 감싼 스크립트 단위로 적용하는것이 바람직하다.