---

220519

---

최적화하는 법 (Optimization)

---

최적화란 ?

• 보통 실무에서 최적화는 다른 작업보다 우선순위가 많이 떨어지지만, 해야하는 이유

  		사용자 경험이 좋아집니다. 
  		(돈을 많이 벌 수 있습니다. **사장님**이…)
  		면접문제로 많이 나옵니다. ( ... )

성능 측정의 척도

올바르게 동작하게 만든다 : 메모리, 네트워크 트래픽(백엔드)과 같은 자원을 효과적으로 사용하는 것이다.
빠르게 동작하게 만든다 : 시간과 긴밀한 관계가 있다.

시간

초기 구동 시간 : 초기에 애플리케이션이 로드 되는 시간
계산 시간 : 동일한 계산을 얼마나 빠르게 수행하는가
반응 시간 : 사용자의 행동에 얼마나 빠르게 반응하는가

초기 구동 시간

1. 다운로드 해야 하는 파일 갯수와 용량은 작게 유지해야한다.

• 이미지 스프라이트 기법을 적극적으로 사용한다.
• 가능한 최신 포맷의 이미지를 사용한다. 이미지 용량 최적화 툴을 할용한다.
• 최적화된 폰트를 사용한다.

2. 최소화한(minify) CSS, JS 파일 사용하여 파일의 용량을 줄인다.
3. 라이브러리, 프레임워크는 필요한 것만 사용해야한다.
4. 중요하지 않은 컨텐츠라면 레이지 로딩을 고려해볼 필요가 있다.
5. 지속적인 구동시간 측정하기

계산 시간

효울적이고 빠르게 계산을 수행하도록 코드를 작성한다

반응 시간

사용자의 행동에 얼마나 빠르게 반응 하는가를 판단하는것이 바로 반응 시간이며,
이 반응 시간을 줄이기 위해 우리는 브라우저의 렌더링 방식을 이해할 필요가 있다.

1. JS 보다는 CSS 애니메이션을 활용합니다.
   • JS로 스타일을 수정해도 결국 CSS 속성으로 업데이트 된다.
2. Transform 속성을 사용한다.
3. repaint, reflow 를 유발하는 속성은 되도록 사용하지 않는다.
4. requestAnimationFrame 을 사용한다.
   • requestAnimationFrame: 브라우저가 애니메이션을 최적화 하도록 하고, 비 활성 탭에서는 애니메이션이 동작하지 않도록 한다.
5. DOM 접근과 업데이트는 가능한 적게 사용한다.

• DOM 접근은 가능한 좁은 범위에서 적게 사용한다.

메모리

메모리의 생명 주기

• 메모리 할당 : 프로그램이 사용할 수 있도록 운영체제가 메모리를 할당한다.
• 메모리 사용 : 개발자가 코드 상에서 할당된 변수를 사용함으로써 읽기와 쓰기 작업이 이루어진다.
• 메모리 해제 : 프로그램에서 필요하지 않은 메모리 전체를 되돌려주어 다시 사용가능하게 만드는 단계이다.

메모리 누수와 Garbage Collection

• 메모리 누수는 프로그램이 필요하지 않은 메모리 공간을 계속해서 점유하는 현상을 말한다. 이러한 현상을 방지하기 위해 자바스크리브나 자바, 파이썬 같은 고수준 언어에는 가비지 컬렉터가 존재한다.

좋은 습관 기르기

배열이나 객체를 불변하는 객체처럼 다루기

• 배열이나 객체는 불변하는 객체처럼 다루는 것이 데이터의 변화를 추적하는데 용이하다.
  만약, 배열 데이터를 수정해야 한다면, 기존에 사용했던 원본 데이터는 그대로 두고 새로운 배열을 만들어 사용하는 습관을 들이자.

엄격모드(strict mode)로 사용하기

• 자바스크립트는 엄격모드로 사용할 것을 권장한다.
  그래야 많은 에러를 예방할 수 있다.

엄격모드의 특징

• 선언하지 않은 변수에 값을 할당할 수 없다.
• 읽기 전용 객체에 값을 할당하면 에러가 발생한다.
  (일반모드에서는 조용한 에러 -> 무시 처리)
• 지울 수 없는 값을 지우려고 하면 에러가 발생한다.(일반모드에서는 조용한 에러 -> 무시 처리)
• 함수 파라메터에 중복된 이름을 사용할 수 없다.