# 4. 웹 어플리케이션의 성능을 200% 끌어올리기 위한 코드 점검 및 개선 방법

###### tags: `지호`, `프론트엔드 Back to the Basics`

---

## 1. 파일 다운로드
- 파일 개수와 용량은 적게
- 도메인은 분산
- 적절한 포맷 사용 (이미지 <picture/>, WebP)
- 웹 폰트 최적화
- Link 태그 만으로 접속 시간 절약 (사용자가 다음에 갈 주소가 명확할 때)

<br/>

## 2. 컨텐츠 렌더링 & 인터랙션 가능
- 로딩 속도 개선
- 필수 컨텐츠가 아니라면 비동기 로딩 고려: 광고, 댓글, 헤더/푸터
- Lazy loading: 이미지/아이프레임/스크립트
- 서버에서 불러오는 시간이 오래 걸리는 경우, placeholder로 대체

<br/>

## 3. 계산 시간
- 다루야할 데이터의 양을 줄인다.
- 값이 필요해지기 전까지 최대한 미뤄두고 필요한 직전에 계산해서 사용

<br/>

### 웹 워커

<br/>

### Lazy Evaluation
- 값이 필요해지기 전까지 계산을 미뤄두는 기법

<br/>

### Memoization
- 계산 결과를 기억해두고 반복 사용하는 기법
- 루프, 재귀 호출 등 최적화

<br/>
<br/>

## 4. 반응 시간

<br/>


<br/>

### 렌더링 순서
**자바스크립트**: 시각적 변화 유발
**스타일**: 어떤 규칙을 어떤 요소에 적용할 지 계산
**레이아웃**: 요소가 화면에서 차지하는 공간과 위치 계산. 다른 요소에 영향을 줄 수도 있음
**페인트**: 각 레이어에 픽셀을 그려내는 과정. 텍스트, 색, 이미지, 경계선, 그림자 등 표현
**합성**: 정해진 순서로 레이어를 합성하여 최종 결과물을 그려냄


<br/>


<br/>
<br/>

## 5. 리소스

### 메모리 누수
- 프로그램이 필요하지 않은 메모리를 계속 점유하는 현상
- 메모리 생명주기
- 할당: 사용할 메모리 확보
- 사용: 메모리 사용 (읽기, 쓰기)
- 해제: 불필요한 메모리 반환
- 자바스크립트는 JS 엔진이 추정후 해제
- 참조 카운팅 방식 사용
- 해당 객체를 참조하는 수가 얼마나 되는지 엔진이 확인
- 참조 수가 0이 되면, 객체를 지움

<br/>


<br/>

### 네트워크 트래픽
- 브라우저로 전달되는 트래픽 최소화

<br/>


<br/>

### 정리

<br/>