Index
Index17. 자바스크립트 최적화 (Optimization)17.1 최적화란 무엇이며 왜 최적화를 해야할까요?17.2 성능 측정의 척도17.3 시간17.3.1 초기 구동시간17.3.2 계산 시간17.3.3 반응 시간17.4 메모리17.4.1 메모리의 생명 주기17.4.2 Garbage Collection17.5 좋은 습관 기르기17.5.1 배열이나 객체를 불변하는 객체처럼 다루기17.5.2 엄격모드(strict mode)로 사용하기17.5.3 일치연산자 사용하기
17. 자바스크립트 최적화 (Optimization)
17.1 최적화란 무엇이며 왜 최적화를 해야할까요?
Make it work, Make it right, Make it fast
- Kent Beck -
보통 실무에서 최적화는 다른 작업보다 우선순위가 많이 떨어집니다.
그렇다면 왜 해야할까요?
- 사용자 경험이 좋아집니다.
- 면접문제로 많이 나옵니다. ( ... )
17.2 성능 측정의 척도
소프트웨어 프로그래밍은 일단 동작하게 만들고(Make it work), 올바르게 동작하게 만들고(Make it right), 빠르게 동작하게 만든다(Make it fast) 라는 전략으로 접근합니다.
성능 측정의 척도
- 올바르게 동작하게 만들고 === 리소스 (자원 소모를 얼마나 많이 하는가? —> 메모리, 네트워크 트레픽)
- 빠르게 동작하게 만든다 === 시간
17.3 시간
- 초기 구동 시간 : 초기에 애플리케이션이 로드 되는 시간
- 계산시간 : 동일한 계산을 얼마나 빠르게 수행하는가
- 반응 시간 : 사용자의 행동에 얼마나 빠르게 반응하는가
17.3.1 초기 구동시간
로딩 시간이 빠른 페이지와 그렇지 않은 페이지의 사용자 경험은 하늘과 땅 차이입니다.
- 다운로드 해야 하는 파일 갯수와 용량은 작게 유지해야합니다. ( 이미지 스프라이트 기법, 이미지 용량 최적화, 최적화된 폰트 사용 )
- 최소화한 CSS, JS 파일 사용하여 파일의 용량을 줄입니다. (jquery 참고, JS & CSS Minifier 다운로드)
- 프레임워크는 필요한 것만 사용해야합니다. (네이버, 다음 비교)
17.3.2 계산 시간
효율적이고 빠르게 계산을 수행하도록 코드를 작성. —> 알고리즘의 영역. (js 100제 96번 참고)
17.3.3 반응 시간
사용자의 행동에 얼마나 빠르게 반응 하는가를 판단하는것이 바로 반응 시간입니다.
이 반응 시간을 줄이기 위해 우리는 브라우저의 렌더링 방식을 이해할 필요가 있습니다. (https://www.notion.so/paullabworkspace/14-CSS-transition-transform-9e4e90eeea374488b20568fff4772a99#d2dbd199fb8c400a99736f6abbbff0d6)
다음 웹 사이트를 통해 css 속성 별 reflow & repaint 에 대한 정보를 얻을 수 있습니다.
** 브라우저별 사용 렌더링 엔진 **
- JS 보다는 CSS 애니메이션을 활용합니다.
- JS로 스타일을 수정해도 결국 CSS 속성으로 업데이트 됩니다.
- Transform 속성을 사용합니다.
- repaint, reflow 를 유발하는 속성은 되도록 사용하지 않습니다.
- requestAnimationFrame 을 사용합니다.
- 브라우저가 애니메이션을 최적화 하도록 하고, 비 활성 탭에서는 애니메이션이 동작하지 않도록 합니다.
- DOM 접근과 업데이트는 가능한 적게 합니다.
- DOM 접근은 가능한 좁은 범위에서 적게 사용합니다.
- Document fragment 를 사용해서 한번에 DOM을 업데이트합니다.
17.4 메모리
17.4.1 메모리의 생명 주기
17.4.2 Garbage Collection
C, C++ 와 같은 저 수준의 언어와는 다르게 자바스크립트에서 사용하지 않는 메모리는 자바스크립트 엔진이 추정하여 삭제합니다. (GarbageCollection).
이때 이용하는 방식이 참조 카운팅 (reference counting)으로 메모리에 존재하는 값을 몇개의 변수와 함수가 참조하고 있는지 살펴보는것 입니다. 참조가 0이 되면 값을 메모리에서 삭제합니다.
예전에는 객체끼리 서로 맞물려있어 제거되지 않던 문제(순환 참조 문제)가 있었지만 최신 브라우저에서는 마크스위프(Mark and Sweep) 알고리즘을 사용하여 이런 문제가 해결되어 있습니다.(https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management#mark-and-sweep_algorithm)
자바스크립트에서 메모리 관리에 신경 써야하는것은 제때 메모리를 해제해 주지 못하는 경우가 있습니다.
바로 전역변수. 전역변수는 프로그램이 종료되기 전까지 계속 메모리에 존재하게 됩니다.
17.5 좋은 습관 기르기
좋은 습관을 들인 코드는 많은 에러를 사전에 예방할 수 있도록 만들어 줍니다.
17.5.1 배열이나 객체를 불변하는 객체처럼 다루기
배열이나 객체는 불변하는 객체처럼 다루는것이 데이터의 변화를 추적하는데 용이합니다.
만약 배열 데이터를 수정해야 한다면, 기존에 사용했던 원본 데이터는 그대로 두고 새로운 배열을 만들어 사용하는 습관을 들이길 바랍니다.
17.5.2 엄격모드(strict mode)로 사용하기
자바스크립트는 엄격모드로 사용할 것을 권장 드립니다. 많은 에러를 예방할 수 있습니다.
엄격 모드의 특징
- 선언하지 않은 변수에 값을 할당할 수 없습니다.
- 읽기 전용 객체에 값을 할당하면 에러가 발생합니다. (일반 모드에서는 조용한 에러 —> 무시 처리)
- 지울수 없는 값을 지우려고 하면 에러가 발생합니다. (일반 모드에서는 조용한 에러 —> 무시 처리)
- 함수 파라메터에 중복된 이름을 사용할 수 없습니다.
17.5.3 일치연산자 사용하기
1 == 1 1 == '1' 1 == 2 '' == false [] == false null == undefined