[Front-end🦁] #37 JavaScript 최적화

1. 최적화

1. 최적화 하는 이유

• 사용자 경험이 좋아진다.

2. 성능 측정의 척도

1. 올바르게 동작하게 만들고 === 리소스 (자원 소모를 얼마나 하는지 - 메모리, 네트워크 트래픽)
2. 빠르게 동작하게 만든다 === 시간

3. 시간 측정

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

• 다운로드 해야 하는 파일 갯수와 용량은 작게 유지 - 이미지 스프라이트 기법, 이미지 용량 최적화, 최적화된 폰트 사용 ...
• 최소화한 CSS, JS 파일을 사용하여 용량을 줄인다. - jquery Minified, JS & CSS Minifier 다운로드
• 프레임워크는 필요한 것만 사용

iframe 으로 불러오면 리소스를 두번 불러오게 된다.

2. 계산시간 : 동일한 계산을 얼마나 빠르게 수행하는가

알고리즘 영역!

3. 반응 시간 : 사용자의 행동에 얼마나 빠르게 반응하는가

반응 시간을 줄이려면 브라우저의 렌더링 방식을 이해하고 있어야 한다. reflow, repaint

1. JS 보다는 CSS 애니메이션을 활용하자.
   • JS로 스타일을 수정해도 결국 CSS 속성으로 업데이트 됩니다.
2. Transform 속성을 사용하자. - GPU를 사용할 수 있게!
3. repaint, reflow 를 유발하는 속성을 사용하지 말자. - https://csstriggers.com - CSS 속성의 reflow, repaint 정보!
4. requestAnimationFrame 사용. - 브라우저가 애니메이션을 최적화하게 하고, 비 활성 탭에서는 애니메이션이 동작하지 않게 해줌.
5. DOM 접근과 업데이트는 가능한 적게
   • DOM 접근은 가능한 좁은 범위에서 적게 사용. -> 매번 document.querySelector 하지 말고 상위 요소를 통해 접근하자.
   • DocumentFragment 를 사용해서 한번에 DOM을 업데이트한다.
   • DocumentFragment 는 html 문서에 js로 element를 만들어서 여러개 붙여야할 때, 계속해서 돔에 접근하는 것은 비효율적이므로 frag에 쌓아두고 마지막에 DOM에 접근해서 업데이트 하고, frag는 사라진다.

4. 메모리

MDN JavaScript 메모리 관리

1. 메모리의 생명 주기

1. 메모리 할당 : 프로그램이 사용할 수 있도록 운영체제가 메모리를 할당한다.
2. 메모리 사용 : 개발자가 코드 상에서 할당된 변수를 사용하면서 읽기, 쓰기 작업을 한다.
3. 메모리 해제 : 프로그램에서 필요하지 않은 메모리를 돌려주어 사용가능하게 만든다.

2. Garbage Collection

해제가 가장 어려운 부분이다.

• C에서는 free 로 직접 해제 (저수준 언어)
• JavaScript에서는 엔진이 추정해서 해제해줌 (고수준 언어)

reference counting 방식을 통해서 추정함. 어떤 메모리를 가리키는 변수가 하나도 없으면 메모리 해제.

var me = { age: 30 }; // 참조 카운팅 1개
var you = me;         // 2개
me = null;            // 1개
you = null;           // 0개 - 해제 된다.

// 메모리 누수 : 사용하지 않지만 메모리에 적재되어 있는 경우..
var x = {
  y: {
    z: 1
  }
};
// x 참조 객체를 object1, y 참조 객체를 object2

var a = x; // object1 객체의 참조 카운트 : 2 ( x, a )
x = 1;     // object1 객체의 참조 카운트 : 1 ( a )

var b = a.y; // object2 객체의 참조 카운트 : 2 ( y, b )
a = 2;       // object1 객체의 참조 카운트 : 0

// y 때문에 x는 바라보는 녀석이 없음에도 메모리에 남아있게 된다.
// 전역 변수를 사용하면 프로그램 종료 전까지 계속 메모리에 남아있게 되므로, 최대한 사용하지 말자.

5. tips:sparkles:

1. 배열이나 객체는 불변하는 것 처럼 다루기.

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

3. 일치 연산자 == 대신 ===로 사용하기.

2. 모의 면접 2

1. pixel ratio

CSS 에서 말하는 1px 에 실 기기에는 몇 개의 pixel이 들어가있는지를 나타낸 비율. 레티나 디스플레이에 사진을 넣으면 작아지기 때문에, 가로 세로 각 2배 사이즈의 이미지를 넣어서 대응해야 합니다.

2. 다음 이미지 포맷에 대해 각 특징에 대해 설명 해 주세요. (JPG, GIF, PNG, SVG)

JPG : 가장 용량이 작지만 화질도 좋아서 많이 사용합니다. 그치만 투명화가 불가능한 포맷입니다.
GIF : 움직이는 이미지를 표현할 수 있고, 투명도 표현이 가능합니다. 그치만 화질이 좋지 않습니다.
PNG : 용량이 비교적 큰 편이지만 투명 표현이 가능합니다.
SVG : 벡터 이미지로 깨지지 않는다는 장점이 있습니다.

3. margin collapsing

margin 겹칩 현상을 말합니다. 형제 요소의 margin-bottom과 margin-top이 겹쳐서 더 큰 쪽만 남거나, window 맨 위에 있는 요소에 margin-top 이 적용되지 않는 현상을 말합니다. 부모 자식간에도 margin 겹침이 일어나기도 합니다. 자식에 display: inline-block을 넣거나, 부모에 overflow:hidden 속성을 주는 등의 방법으로 해결할 수 있습니다.

4. event delegation

이벤트 위임은 부모 요소에 준 이벤트 핸들러를 붙였을 때, 자식 요소에 따로 이벤트 핸들러를 붙이지 않아도 버블링에 의해 이벤트가 전파되어 자식 요소에 이벤트가 일어났을 때 동작하는 것을 말합니다. 그래서 event handler 함수에 event.target 의 classList를 검사하여 이벤트가 일어난 요소에 따라 다른 동작이 일어나게 처리할 수 있습니다.

브라우저는 이벤트가 일어났을 때, 이벤트의 진원지를 찾아 캡쳐링, 버블링의 단계를 거치면서 이벤트를 전파합니다. 그래서 해당 특성을 이용하여 부모 요소에 이벤트 핸들러를 붙여서 자식 요소의 이벤트를 컨트롤할 수 있습니다. 하나의 이벤트 핸들러만 사용하면 되기 때문에 관리가 간편하다는 장점이 있습니다.

5. 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.

클로져는 외부에서 접근할 수 없는 함수 내부의 공간에 접근하기 위한 방법을 의미합니다. 어떤 변수를 캡슐화, 은닉하기 위해서 사용하며, 은닉한 해당 변수의 값을 가져올 수 있는 getter 함수를 함수의 return 값으로 주어 사용합니다. 필요에 따라 변수의 값을 설정하는 setter 함수도 이용할 수 있습니다.

전역 공간에 함수가 계속 존재하는 것은 아니라서 메모리 효율이 좋다고 한다. 하지만 메모리 최적화 측면에서는 좋지 않다.

6. 다음 코드 중 1번과 2번의 차이점을 설명해주세요.

function Car(){};
1. var car  = Car();
2. var car = new Car();

1 번은 Car 함수가 일반 함수로 실행되어 실행된 뒤의 Return 값이 car 변수에 할당됩니다. 2번은 Car 가 생성자 함수로 실행되어 함수 내에 따로 return 문이 없거나 원시값을 return 한다면 instance가 생성되어 car에 할당됩니다. object 를 return 하는 경우에는 해당 object가 할당됩니다.